React Children 과 친해지기

React.Children 유틸리티의 동작 원리와 함정, 그리고 실무에서 children을 조작할 때 왜 toArray()를 사용해야 하는지를 코드 예제로 설명한다. React.Children이 maintenance mode임을 인지하고 대안까지 안내하는 실용적인 글이다.

핵심 포인트 - children prop을 slice/filter 등으로 조작하려면 React.Children.toArray() 먼저 호출해야 한다 - children은 겉보기엔 배열이지만 실제로는 opaque data structure(object 또는 undefined)일 수 있음 - toArray()는 중첩 배열을 1차원(flat)으로 변환하고 각 child에 고유 key를 부여함 - toArray()가 React.Fragment 내부를 flatten하지 않는 알려진 한계가 있음 - 대안: react-keyed-flatten-children 패키지로 Fragment까지 완전 flatten 가능 - React.Children은 현재 maintenance mode → 향후 다른 유틸로 대체될 수 있음

상세 정리 - children이 단일 element면 object, 복수면 array, 자식 없으면 undefined - 따라서 children.slice()를 직접 호출하면 TypeError 가능 - React.Children.toArray(children)는 undefined나 object도 항상 array로 반환 - DOM 렌더링 시에는 배열이 1depth로 자동 평탄화되어 보여서 착각하기 쉬움 - 직접 children.slice(0,2) 시도: fruits 배열이 1개 요소로 카운트되어 3개가 렌더링됨 - toArray 후 slice(0,2): banana, apple만 2개 렌더링 (의도한 결과) - toArray의 key 부여: 원본 key에 배열 위치 prefix 추가 (.1:$1_apple 형태) - 이 prefix는 Reconciliation 최적화를 위해 각 child가 어느 입력 배열에 속하는지 추적 - React.Fragment가 자식으로 들어오면 toArray가 Fragment 내부를 flatten하지 않음 - Fragment 포함 시 toArray 결과: [Object(banana+melon), Object(apple), Object(kiwi)] - 해결책: react-keyed-flatten-children을 import해서 사용하면 Fragment까지 완전 flatten - React 팀 공식 입장: React.Children은 maintenance mode, 추후 대체 API 제공 예정 - 더 깊이 공부하려면 react-children-deepdive 문서 참고 권장

왜 읽나: children을 단순히 {children}으로 렌더링하는 것을 넘어 조작·필터링해야 하는 컴포넌트를 만들 때 반드시 알아야 할 함정과 올바른 해결책을 알려준다.