[React] children 알아보기

 

최근 가장 관심있게 공부하고 적용하려고 노력하는 것이 있다. 그것은 바로! 리액트 디자인 패턴 중 하나인 합성컴포넌트이다. 내가 처음 React를 배울 때는 디자인 패턴을 고려하지 않고 개발을 진행하다보니 코드의 재사용성이나 가독성 부분에서 매우 떨어지는 경험을 했었다. 그러다 점차 협업을 할 일이 많아지기 시작하다 보니 자연스럽게 디자인패턴에 관심이 가기 시작하였다. 이렇게도 할 수 있구나...!

각설하고, 합성컴포넌트에 대한 본격적인 포스팅 전에 children의 개념에 대해서 정리해보고자 한다.

 

1. children은 무엇일까?

children은 React 컴포넌트에서 사용되는 특별한 prop으로, 컴포넌트 내용을 나타내는 역할을 한다.

const ParentComponent = ({children}) => {
	return(
    	<div>
        	{children}
        </div>
    );
}

 

ParentComponent의 열린 태그와 닫힌 태그 사이 내용이 children prop으로 전달 되어지고, children으로 넘어온 Component와 부모-자식 관계가 설정된다. 이와 같은 속성을 이용하여 컴포넌트가 렌더링 될 때 내용을 동적으로 결정하거나 다른 컴포넌트를 포함시킬 수 있다.

<ParentComponent>
  <h2>Title</h2>
  <p>description</p>
</ParentComponent>

위의 예시에서는 ParentComponent의 내용인 'h2'와 'p' 엘리먼트가 children prop으로 전달되어 렌더링된다. 이를 통해 ParentComponent 컴포넌트를 사용하는 곳에서 원하는 내용을 유연하게 사용할 수 있게 되는 것이다.

 

2. React.Children.toArray()

합성컴포넌트를 만들 때 유용하게 쓰일 React.Children.toArray() 메서드를 살펴보도록 하자.

해당 메서드는 앞서 보았었던 children과 비교해서 보면 좋을 것 같다. 다음 코드를 같이 살펴보자.

function Modal({ children }) {
  console.log(children);
  console.log(React.Children.toArray(children));
  return children;
}

const movies = [
  { id: 1, name: "Avengers" },
  { id: 2, name: "Elemental" },
];

export default function App() {
  return (
    <Box>
      <div name="container">container</div>
      {movies.map(movie => (
        <div key={`${movie.id}_${movie.name}`} name={movie.name}>
          {movie.name}
        </div>
      ))}
    </Box>
  );
}

위 코드에서 Modal 컴포넌트는 children과 React.Children.toArray(children) 두 값을 콘솔에 출력하게 된다.

한번 출력되는 값을 살펴보자.

 

• console.log(children)

[
  Object1,  // container
  [
    Object2,  // Avengers
    Object3,  // Elemental
  ],
];

• console.log(React.Children.toArray(children))

[
  Object1,  // container
  Object2,  // Avengers
  Object3,  // Elemental
];

여기서 두 가지 포인트를 잡아 볼 수 있다.

 

   1) 배열의 depth 차이

children과 React.Children.toArray(children))의 결과 값으로 나오는 배열의 depth가 각각 2depth와 1depth로 다른 것을 알 수 있다. 

 

   2) key값의 생성 유무

React.Children.toArray(children)) 의 결과 값을 보면 각 child 마다 고유한 key를 할당해주는 것을 확인 할 수 있다.

Children.toArray()는 1차원 배열(flat array)로 변환하는 과정에서재조정과 렌더링 최적화를 위해 고유한 key 값을 부여한다고 한다.

 

후에 합성 컴포넌트에서 React.Children.toArray 메서드를 이용해 컴포넌트를 배치하는 유용한 스킬을 포스팅할 예정이다.

참고

React Children 과 친해지기 | 카카오엔터테인먼트 FE 기술블로그 (kakaoent.com)

React Children 과 친해지기 | 카카오엔터테인먼트 FE 기술블로그