프론트엔드
React Children 과 친해지기
두줄요약
React.Children.toArray()의 평탄화와 key 할당 방식을 설명했습니다. Fragment 내부를 평탄화하지 않는 제약과 대안을 소개합니다.
구조와 흐름
children의 중첩 배열·단일 객체·undefined형태와 직접 배열 조작 시의 차이React.Children.toArray()를 통한 평탄화와 안전한 배열 메서드 적용- 입력 배열의 범위를 반영한 key 접두사 생성과 재조정·렌더링 최적화 연관성
주의할 점
- DOM 렌더링 결과와 달리 원본
children의 중첩 구조로 인한slice결과 차이 React.Children.toArray()가React.Fragment내부 요소를 평탄화하지 않는 제약- 유지보수 모드인
React.Children유틸리티와 향후 대체 가능성
적용해볼 점
- Fragment까지 깊게 평탄화해야 하는 경우
react-keyed-flatten-children활용 children필터링·정렬·개수 제한 전toArray()적용 여부 검토
