[React] props를 사용해서 컴포넌트에 값 전달하기

props의 기본 사용법

props는 properties의 줄임말입니다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용합니다.

 

Hello 컴포넌트를 사용 할 때 name이라는 값을 전달하고자 할 때, 이렇게 코드를 작성합니다.

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

function App() {
  return (
    <Hello name="react" /> //Hello 컴포넌트를 사용 할 때 name 이라는 값을 전달하자
  );
}

export default App;

 

Hello 컴포넌트에서 name 값을 사용하고 싶을 때, 이렇게 코드를 작성합니다.

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

function Hello(props) {
  return <div>안녕하세요 {props.name}</div> // props의 name 값을 조회
}

export default Hello;

 

 

여러 개의 props 사용 (비구조화 할당)

먼저 name과 color라는 props를 두 개 설정해줍니다.

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

function App() {
  return (
    <Hello name="react" color="red"/> // name과 color 두 개의 props 설정
  );
}

export default App;

 

Hello 컴포넌트에서 color와 name의 값을 조회합니다. 

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

function Hello(props) {
  // color와 name의 값을 조회
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
  
  // 더 간결하게 사용 가능
  return <div style={{ color }}>안녕하세요 {props.name}</div>
}

export default Hello;

 

 

defaultProps로 기본값 설정

컴포넌트에 defaultProps라는 값을 설정하면,  컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정할 수 있습니다.

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

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

Hello.defaultProps = {
  name: '이름없음' // '이름없음'이라는 name 값을 defaultProps로 설정
}

export default Hello;

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

function App() {
  return (
    <>
      <Hello name="react" color="red"/>
      <Hello color="pink"/> // name이 없는 Hello컴포넌트 렌더링
    </>
  );
}

export default App;

 

 

 

 

props.children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children을 조회하면 됩니다.

 

Wrapper라는 컴포넌트를 만들고 style을 지정해줍니다.

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

function Wrapper({ children }) { // 내용이 보여지게 하기위해서 props.children을 렌더링
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
        {children} // 내용이 보여지게 하기위해서 props.children을 렌더링
    </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="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;