Props

전달하려는 컴포넌트 (App.js) 에서 전달 받는 컴포넌트 (Hello.js) 로 name이라는 데이터를 전달해주고 싶을때는 props를 사용합니다.

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

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

export default App;

---

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

function Hello(props) {
  console.log(props)  //{name = 'react'}
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

Hello.js 컴포넌트에서 전달받은 name이라는 데이터를 props의 파라미터를 통해 조회 할 수 있고 객체 형태로 전달 됩니다.

여러개의 props를 쓸때

여러개의 props를 쓸 때에는 비구조화 할당 을 통해 다음과 같이 쓰면 깔끔하게 데이터를 보낼 수 있다.

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

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

export default App;

---

import React from 'react';

function Hello({ color, name }) {
  console.log({ color, name })  //{color = 'red', name='react'}
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

비구조화 할당 을 모르면 꼭 검색해보길 바람!
여러개의 props는 쓴 순서대로 객체에 들어가기 때문에 순서에 조심한다.

defaultProps 로 기본값 설정

전달하는 컴포넌트에서 props를 지정하지 않았을 때 기본적으로 사용 할 값이다.

import React from 'react';

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

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;

props.children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children을 조회 하면 된다.
다음예제는 Wrapper 라는 컴포넌트에 Hello 컴포넌트를 감싼 예 이다.

//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="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

이렇게 작성하면 Wrapper 컴포넌트에 가려져서 Hello 컴포넌트는 안보일 것이다.
Wrapper 안의 컴포넌트의 내용을 보여지게 하기 위해서 이때 props.children 을 사용할 것이다.

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

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

export default Wrapper;

Wrapper 컴포넌트의 파라미터로 children 을 보내주고 jsx에 렌더링 해주면 안의 내용이 표시될 것이다.
감싸는 컴포넌트의 파라미터로 꼭 넣어주기!

Reference

velopert