React- props

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

1. props의 기본 사용법

예를 들어서 App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name이라는 값을 Hello 컴포넌트에게 전달해주고 싶다고 가정해보자. 그러면 아래와 같이 코드를 작성하면 된다.

 

App.js (파일명)

 

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" /> // name의 react 값을 전달해주고 싶을때 이렇게 작성
  );
}

export default App;

 

이제 전달 받은 name 값을 Hello.js에서 사용하고 싶다면 아래와 같이 하면 된다.

 

Hello.js (파일명)

 

import React from 'react';

function Hello(props) { // 파라미터에 props를 넣어준 다음
  return <div>안녕하세요 {props.name}</div> // 이렇게 조회하면 된다.
}

export default Hello;

컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회 할 수 있다. props 는 객체 형태로 전달되며 만약 name 값을 조회하고 싶다면 props.name 을 조회하면 된다.

 

실행 결과

 

2. 여러개의 props 비구조화 할당

1) 또 다른 값 생성

App.js (파일명)

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="blue"/> // color 값 추가 생성
  );
}

export default App;

 

2) Hello 컴포넌트에서 color 값을 조회해서 폰트의 색상으로 설정

일반적인 방법

Hello.js (파일명)

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

props 내부의 값을 조회 할 때마다 props. 를 입력하고 있는데 함수의 파라미터에서 비구조화 할당 문법을

사용하면 코드를 더욱 간결하게 작성할 수 있다.

 

비구조화 할당을 사용한 방법

Hello.js (파일명)

 

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

 

실행 결과

 

 

3. defaultPros로 기본값 설정

컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 된다.

 

Hello.js (파일명)

 

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = { // 기본값 설정
  name: '이름없음'
}

export default Hello;

 

App.js (파일명)

 

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello name="react" color="blue"/>
      <Hello color="pink"/>
    </>
  );
}

 

실행 결과

 

4. Props children

컴포넌트 태그 사이에 있는 다른 컴포넌트를 화면에 보이도록 할 때 사용

 

Wrapper.js (파일명)

 

import React from 'react';

function Wrapper() {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>

    </div>
  )
}

export default Wrapper;

 

 

App.js(파일명)

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="blue"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

 App.js에서 이렇게 Wrapper 태그 내부에 Hello 컴포넌트 두개를 넣었는데

브라우저를 확인하면 다음과 같이 Hello 컴포넌트들은 보여지지 않을 것이다.

 

Wrapper 태그 내부의 내용이 보여지게 하기 위해서는 Wrapper 에서 props.children 을 렌더링해주어야 한다.

 

Wrapper.js

 

import React from 'react';

function Wrapper({ children }) { // 이렇게 파라미터에 {children}을 써주고
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>{children}</div> // 여기도 {children}을 써주면 된다.
  )
}

export default Wrapper;

 

실행 결과

그 결과 이렇게 wrapper 태그안에 있는 컴포넌트도 화면에 잘 나타나는 것을 볼 수 있다.