React.Children.toArray(), Fragment 내부 평탄화 실패… react-keyed-flatten-children이 유일한 대안

React의 children prop은 단순 배열이 아닌 불투명한 데이터 구조인 경우가 많아 slice나 filter 같은 배열 메서드로 조작할 때 문제가 발생한다. DOM은 중첩 구조를 정상적으로 렌더링하지만, children prop을 직접 조작하면 예상치 못한 결과가 나올 수 있다. **React.Children.toArray()**는 이를 해결하기 위해 children을 1차원 배열로 평탄화하고, reconciliation을 위해 각 요소에 고유 키를 할당한다. 이 유틸리티는 children이 객체나 undefined인 경우에도 처리하여 런타임 오류를 방지한다. 생성된 키는 중첩 수준 간 고유성을 유지하기 위해 접두사 시스템(예: .1:$1_apple)을 사용한다. 하지만 중요한 한계가 있다. **React.Children.toArray()**는 React.Fragment 내부의 요소를 평탄화하지 않는다. Fragment에 여러 자식 요소가 있으면 결과 배열에서 단일 객체로 묶여 완전히 평탄화된 리스트를 기대하는 로직을 깨뜨릴 수 있다. 현재로서는 서드파티 라이브러리 **react-keyed-flatten-children**만이 유일한 해결책으로 제시된다. 또한 React.Children 유틸리티는 현재 유지보수 모드이며, 향후 다른 유틸리티로 대체될 수 있다고 언급된다.