스토리북 강의를 듣다가 부모에서 자식에게 내려준 children을 조작하기 위해서 React.children을 사용하는 코드를 접했다. 처음보는 형태인데 왜 사용하는걸까?
위와 같이 생각한 이유는 그동안 개발하면서 부모에서 자식으로 내려준 children값들은 그냥 렌더링하는 경우가 많았기 때문이다.
chidlren을 sort, filter, slice같은 조작이 필요한 경우에 쓰인다고 하는데 그냥 state로 관리하거나 그냥 바로 고차함수 메서드를 쓰면 되는거 아닌가? 생각했다.
분명히 사용하는 이유가 있을 것 같아서 열심히 검색해봤다.
차이점
children의 타입은 예측하기 어렵
children의 타입은 정말 다양하다. React.children의 map같은 함수들은 타입이 HTML/React요소나 함수의 경우 요소가 하나인 배열로, null일 경우 빈 배열로 판단하여 함수를 실행하는 편리한 점이 있다.
항상 1차원의 배열로 리턴
function Box({ children }) {
console.log(children);
console.log(React.Children.toArray(children));
return children;
}
const dogs = [
{ id: 1, name: "말티즈" },
{ id: 2, name: "리트리버" },
];
export default function App() {
return (
<Box>
<div name="시바견">시바견</div>
{dogs.map((dog) => (
<div
key={`${dog.id}_${dog.name}`}
name={dog.name}
>
{dog.name}
</div>
))}
</Box>
);
}-
children
[ Object1, // 말티즈 [ Object2, // 리트리버 Object3, // 시바견 ], ]; -
React.Children.toArray(children)
[ Object1, // 말티즈 Object2, // 리트리버 Object3, // 시바견 ];
당연히 둘다 아래처럼 출력이 되는 줄 알았는데 children의 경우 depth가 두개로 표현되어서 출력이 된다. 의외로 예상되는 결과랑 다른것은 React.children이 아니라 children이라는 것이다. 따라서, children을 통해 조작을 하게되면 예상치 못한 결과를 만날 수 있다는 문제점이 있다는 것을 알게 된다.
항상 1depth(1차원 배열)로 변환해서 리턴해준다는 것을 기억해두자.
child들에 고유한 key를 알아서 할당
특징으로는 접두어로 depth를 나타내는 .${id}값을 쓴다는 것이다.
depth는 0부터 시작하여 구분한다.
-
children
- React.children
이는 재조정과 렌더링 최적화시에 매우 중요한 작업인데 이것을 알아서 해주니 상당히 고맙다.
그럼 문제는 없을까? 당연히 있다.
문제점
Frament
리액트에서 제공하는 빈 태그(Fragment)안의 요소들은 펼쳐지지 않는 문제가 있다.
export default function App() {
return (
<Box>
<>
<div name="시바견">시바견</div>
<div name="허스키">허스키</div>
</>
{dogs.map((dog) => (
<div
key={`${dog.id}_${dog.name}`}
name={dog.name}
>
{dog.name}
</div>
))}
</Box>
);
}-
children
[ Object1, // 시바견 & 허스키 Object2, // 말티즈 Object3, // 리트리버 ]; -
React.children
[ Object1, // 시바견 & 허스키 Object2, // 말티즈 Object3, // 리트리버 ];
결과적으로 둘 모두가 같은 결과를 반환한다. Fragment를 안에 있는 요소들은 또한 자동으로 key값이 적용이 되지 않는다.
Fragment를 쓸거면 React.children을 굳이 쓸필요가 없다는 뜻이다.
마치며
일반적으로 부모 컴포넌트가 자식 컴포넌트에 직접 접근하는 것은 모범 사례라고 보기 어렵다고 한다.
앞으로 children을 조작할 일이 개발하면서 얼마나 있을지 감이 안잡히지만 여러가지 이점이 있으니 알아뒀다가 필요할때 사용해보자!
참고자료
https://fe-developers.kakaoent.com/2021/211022-react-children-tip/
