[React] Props Children

자식 컴포넌트에 정보를 전달하는 방법은 props 로 전달하는 것이다. 그중 children 이 있는데 해당 내용을 정리해 보려 한다!

 

children 

children 은 부모 컴포넌트의 자식으로 감싸진 요소를 props 를 통해 자식 컴포넌트로 전달해 주는 역할을 한다. 이는 부모가 자식의 내부 구조를 유연하게 정의할 수 있어서 재사용성과 컴포넌트의 유용성이 높아진다.

 

function Child(props) {
  console.log("props :>> ", props);
  return <div></div>;
}

function App() {
  return <Child>안녕하세요</Child>;
}

export default App;

App 컴포넌트는 자식 컴포넌트 Child 를 가지고 있다. 자식으로 데이터를 보낼 때 <Child hello='안녕하세요'> 와 같은 방식 말고도 다른 방법이 있다. 바로 children 이다. <Child>안녕하세요</Child> 이 방식으로 보내주면 자식에서는 자동으로 props 객체에 children 이 생긴 것을 볼 수 있다.

 

자식 컴포넌트에서는 children 을 어떻게 사용하는가? 그 방법은 일반 props 에서 사용하던 방식과 같다! 

function Child(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <Child>안녕하세요</Child>;
}

export default App;

부모로부터 전달받은 props 에서 children 을 꺼내 쓴다.

 

function Child({ children }) {
  return <div>{children}</div>;
}

function App() {
  return <Child>안녕하세요</Child>;
}

export default App;

구조분해할당으로 꺼내서 써도 된다.

 

그럼 위와 같이 화면에 부모에서 보내준 글자가 Child 에 잘 전달되어 보이는 것을 확인할 수 있다.

 

children props 활용

이런 children props 는 Layout 컴포넌트를 만들 때 자주 사용한다. 

function Layout({ children }) {
  return (
    <main>
      <header>헤더</header>
      {children}
    </main>
  );
}

function App() {
  return (
    <Layout>
      <div>App 컨텐츠 입니다.</div>
    </Layout>
  );
}

export default App;

children 을 사용해 부모인 App 컴포넌트가 Layout 의 내부 구조를 직접 정의하였다. 이런 식으로 children 을 사용하면 다양한 레이아웃을 쉽게 재사용할 수 있다.