Props란?

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

Prop의 기본 사용법

APP컴포넌트에 Hi컴포넌트를 사용할 때 name이라는 값을 전달하고자 한다고 가정해보자

//App.js

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

function App() {
  return (
    <Hi name="react" />
  );
}

export default App;

이제 Hi 컴포넌트에서 name 값을 사용하고 싶을 때는 어떻게 해야할까?

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

function Hello(props) {
  return <div>반가워용~{props.name}</div>
}

export default Hi;

컴포넌트에 전달되는 props는 파라미터를 통해 조회할 수 있으며, props는 객체형태로 전달되어 만일 name값을 조회하고자 한다면 props.name을 조회하면된다.

여러개의 props 비구조화 할당
Hello 컴포넌트에 또 다른 props를 전달해보자 color이라는 값을 설정해보면,

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

function App() {
  return (
    <Hi name="react" color="red"/>
  );
}

export default App;

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

function Hi(props) {
  return <div style={{ color: props.color }}>반갑습니다~ {props.name}</div>
}

export default Hello;

props 내부의 값을 조회할 때 마다 props. 를 입력하고 있는데 함수의 파라미터에서 비구조화 할당(구조분해할당) 문법을 사용하면 조금 더 코드를 간결하게 작성할 수 있다.

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

function Hi({ color, name }) {
  return <div style={{ color }}>반갑습니다~ {name}</div>
}

export default Hello;

defaultProps로 기본 값 설정

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

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

function Hi({ color, name }) {
  return <div style={{ color }}>앗뇽 {name}</div>
}

Hello.defaultProps = {
  name: '몰라'
}

export default Hi;

props.children

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

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

function Wrapper({ children }) {
  const style = {
    border: '10px solid black',
    padding: '20px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;

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

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

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

export default App;