React의 Children API 사용법

React에서 컴포넌트의 children prop과 Children API는 이름이 비슷해서 헛갈리게 쉬운데요. 소문자로 시작하는 children 은 소외 props라고 일컫는 컴포넌트 함수의 매개 변수가 가지고 있는 하나의 속성이며 이를 통해 컴포넌트의 자식이 넘어오게 됩니다. 대문자로 시작하는 Children 는 React에서 children prop을 효과적으로 다룰 수 있도록 제공하는  API 입니다. React를 좀 써보신 분이라면 자식(children) prop을 상대로 어떤 작업을 하는 것이 생각보다 까다롭다는 것을 잘 아실텐데요. 이에 대해서 간단히 설명을 드리면… children prop으로 이렇게 문자열이나 숫자가 넘어올 수도 있고요. Text {100} HTML 요소나 React 요소가 넘어올 수도 있고요. 함수가 넘어올 수도 있고, (보통 function as children 또는 render prop이라고 하죠?) {(data) => {data}} 아니면 아무 것도 넘어오지 않을 수도 있습니다. (null) 심지어 이것들이 뒤죽박죽 섞인 배열일 수도 있죠 😆 Text {100} 이처럼 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/