React Children 과 친해지기

구조와 흐름

• React children의 배열·객체·undefined 등 불투명 데이터 구조 특성
• React.Children.toArray()를 통한 1차원 배열 변환과 배열 조작 가능 상태 확보
• 평탄화 과정에서 입력 배열 범위를 반영한 고유 key 접두사 부여

주의할 점

• JSX 렌더링 결과와 달리 중첩 배열 형태의 children에서 직접 slice 적용 시 예상 밖 요소 노출 가능성
• React.Fragment 내부 요소를 평탄화하지 않는 React.Children.toArray()의 제약
• 유지보수 모드인 React.Children 유틸리티의 향후 대체 가능성

적용해볼 점

• Fragment까지 깊게 평탄화해야 하는 경우 react-keyed-flatten-children 활용
• children 필터링·정렬·자르기 전 toArray() 기반의 정규화 검토