React Children과 친해지기

이 게시물은 React의 children prop과 이를 처리하는 React.Children 유틸리티에 대해 설명합니다.

children의 사용

• children prop은 React의 합성 모델에서 핵심적인 역할을 합니다.
• React.Children.toArray()를 사용하면 children을 1차원 배열로 변환할 수 있습니다.
• children 배열을 조작할 때 예상과 다른 결과를 얻을 수 있습니다.

고유 키 할당

React.Children.toArray()는 각 child에 고유한 key를 할당하여 렌더링 최적화를 도와줍니다. 하지만 React.Fragment의 내부 요소는 flatten하지 않는 이슈가 있어, react-keyed-flatten-children을 사용할 수 있습니다.