HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스
/
🏄‍♂️
[팀8] 어푸(Ah puh) - Surf
/
🔫
Trouble shooting
/
React.Children.toArray 사용이유

React.Children.toArray 사용이유

WHO
STATUS
solved
WHEN
Dec 12, 2021

👿 Problem

배열 데이터를 map으로 돌려 컴포넌트를 순회하고 싶을 때
바로 데이터를 map으로 순회하는 방법과 React.Children.toArray(data.map) 의 차이는 무엇일까?

😇 Solution

React의 virtual dom은 key값으로 각각의 객체를 구분하고 객체의 props가 바뀌었는지 확인한다.
map 메서드로 반복적인 컴포넌트를 그리는 경우 React.Children.toArray()로 감싸주면 자동으로 객체의 unique한 key가 지정되어 고유한 객체로 구분한다.

🧐 Reference

React.Children.toArray()
react의 virtual dom은 key값으로 각각의 객체를 구분하고그 객체의 props가 바뀌었는지 확인을 한다Array.prototype.map을 사용해서 반복적인 컴포넌트를 그리는 경우에 React.Children.toArray()으로 감싸주면 자동으로 uniq
React.Children.toArray()
https://velog.io/@gth1123/React.Children.toArray
React.Children.toArray()