React의 Children API 사용법
www.daleseo.com
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/
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 7월 23일 오후 8:39