리액트 props.children 이란 무엇인가?

소개

props.children 는 특정 컴포넌트 내부에 다른 컴포넌트를 배치시키고 싶을 때 사용합니다.

 

아래 코드의 결과는 Hi 입니다. div안에 button이 들어가는걸 원하겠지만, Box컴포넌트는 Hi를 반환하는 기능밖에 업습니다.

const Box = (props) => <div>Hi</div>;

const App = () => {
  return (
    <Box>
      <button>버튼</button>
    </Box>
  }
}
→ 결과는 <div>Hi</div>

 

div안에 button이 들어가도록 하기 위해서는 props.children으로 전달하여 내부 컴포넌트를 렌더링 해줘야합니다.

const Box = (props) => <div>{props.children}</div>;

const App = () => {
  return (
    <Box>
      <button>버튼</button>
    </Box>
  }
}
→ 결과는 <div><button>버튼</button></div>