[React] props.children이 뭔데?

React공부를 하다가 state, props에 대해서는 어느정도 감을 잡아가는 중 children이라는 친구를 만났다. props랑 하는일은 비슷해보이는데 뭐가 다른지 모르겠어서 한번 찾아봤다.

props.children이란?

태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props

개발을 하다보면 어떤 자식 요소들이 들어올지 미리 예상할 수 없는 경우가 있다. 버튼들의 컨테이너 역할을 하는 메뉴바와 같은 컴포넌트에서 페이지마다 메뉴바의 형태는 같지만 내용물이 바뀔수도 있고 커스텀이 필요한 경우가 생길 것이다.

이때 props.children을 사용하면 불필요한 노가다를 줄일 수 있다.

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

function App() {
  return (
    <div className="App">
    
      <ChilrenContainer>
        <ul>
          <li>1번 children</li>
          <li>2번 children</li>
          <li>3번 children</li>
        </ul>
      </ChilrenContainer>
    
      <ChilrenContainer>
         <h1>나도 children</h1>
      </ChilrenContainer>
    </div>
  );
}

위의 코드를 보면 ChilrenContainer라는 컴포넌트를 만들고 props.children을 리턴하도록 해줬다.
ChilrenContainer를 App컴포넌트에서 사용할 때 태그 사이에 리스트를 넣어줄 수도 있고 h1태그를 넣어줄 수도 있다.

이러한 방식으로 props.children는 변수 같은 데이터만을 넘겨주는 일반 props와 달리 안에 들어갈 내용물을 통째로 전해줄 수 있다.

props.children를 잘 사용한다면 불필요한 코드들을 줄일 수 있을것 같다.