React의 Children API 사용법

React에서 컴포넌트의 children prop과 Children API는 이름이 비슷해서 헛갈리게 쉬운데요. 소문자로 시작하는 children은 소외 props라고 일컫는 컴포넌트 함수의 매개 변수가 가지고 있는 하나의 속성이며 이를 통해 컴포넌트의 자식이 넘어오게 됩니다. 대문자로 시작하는 Children는 React에서 children prop을 효과적으로 다룰 수 있도록 제공하는  API 입니다.

React를 좀 써보신 분이라면 자식(children) prop을 상대로 어떤 작업을 하는 것이 생각보다 까다롭다는 것을 잘 아실텐데요. 이에 대해서 간단히 설명을 드리면…

children prop으로 이렇게 문자열이나 숫자가 넘어올 수도 있고요.

<OurComponent>Text</OurComponent>

<OurComponent>{100}</OurComponent>

HTML 요소나 React 요소가 넘어올 수도 있고요.

<OurComponent>
  <input />
</OurComponent>

<OurComponent>
  <Button />
</OurComponent>

함수가 넘어올 수도 있고, (보통 function as children 또는 render prop이라고 하죠?)

<OurComponent>{(data) => <span>{data}</span>}</OurComponent>

아니면 아무 것도 넘어오지 않을 수도 있습니다. (null)

<OurComponent />

심지어 이것들이 뒤죽박죽 섞인 배열일 수도 있죠 😆

<OurComponent>
  <input />
  Text
  <Button />
  {100}
</OurComponent>

이처럼 React는 컴포넌트의 자식으로 무엇인든지 사용할 수 있도록 상당히 유연하게 설계되어 있기 때문에 우리는 children prop의 자료형(data type)을 예상할 수 없습니다. 그러므로 children prop을 상대로 직접 프로그래밍하게 되면 버그가 발생하기 쉬워집니다.

이것이 React에서 Children이라는 별도의 API를 제공하는 이유이며, 우리는 Children API를 통해서 children prop을 좀 더 안전하게 다룰 수 있습니다. 이번 포스팅에서는 React의 Children API를 사용해서 컴포넌트의 children prop을 다루는 방법에 대해서 다뤄보겠습니다.

📝 포스팅: https://www.daleseo.com/react-children/