[React] children 정말 쉽게 이해하기

 

 

왠지 모르게 이해가 잘 안되고 어려운 children에 대해서 이해 하기 쉽게 알아보자!

 

 

---

 

 

 

 1. "children" 이란? 

 

children은 리액트 컴포넌트의 특수한 props로, React element 객체들로 구성된 배열이다.

부모 컴포넌트의 태그 안에 작성된 모든 내용을 자식 컴포넌트가 props로써 받을 수 있게 해준다.

children을 통해 부모 컴포넌트가 자식 컴포넌트에 HTML이나 다른 컴포넌트를 중첩해 넣는 것이 가능해진다.

 

만약, props에 대해서 잘 모른다면 아래의 게시글을 봐주세요!

https://dev-ini.tistory.com/63

 

 

---

 

 

 2. children가 유용한 상황 

 

1) 공통 레이아웃 구성: 반복적으로 사용되는 레이아웃을 정의하면서, 그 안에 들어갈 내용을 동적으로 전달할 수 있다. 예를 들어, Modal, Layout 같은 컴포넌트에 children을 이용하여 다양한 내용을 넣을 수 있다.

2) 재사용성 높은 컴포넌트 구현: 버튼이나 카드처럼 다양한 내용을 담아야 하는 컴포넌트를 만들 때, children을 활용하여 내부 내용을 자유롭게 바꿀 수 있다.

 

 

 

---

 

 

 3.  children 개념을 비유로 이해해보기 

 

사진을 담을 수 있는 포토북이 있다고 해보자.
이 포토북은 레이아웃만 가지고 있어서 사진이 없으면 그냥 빈 페이지이다.
하지만 사진을 넣으면 페이지마다 사진이 보이게 된다.

 

 

 

이 포토북은 (children을 포함하는) 레이아웃 컴포넌트와 같다.

사진들은 레이아웃 컴포넌트 안에 넣을 다양한 컴포넌트들이고, 이 사진들이 children 역할을 한다.

포토북 안에 다양한 앨범을 넣을 수 있듯이, children을 이용해서 하나의 레이아웃 컴포넌트 안에 다른 컴포넌트를 넣을 수 있게 되는 것이다.

 

 

 

 

---

 

 

 4. 포토북 비유를 코드 예시로 이해해보기 

 

아래와 같은 간단한 예제를 만들어볼 것이다.

 

 

 

 1) <PhotoBook> 이라는 레이아웃 컴포넌트 만들기 

 

// PhotoBook.jsx
// 레이아웃 컴포넌트

export default function PhotoBook({ children }) {
  return (
    <div>
      <header>(PhotoBook 컴포넌트)</header>
      <div>{children}</div>
    </div>
  );
}

 

<PhotoBook> 컴포넌트를 만든다. 이 컴포넌트는 children을 받는다.

children 즉, 여러개의 사진 컴포넌트인 <Photo />가 뜨게 할 것이다.

 

 

<Photo> 컴포넌트는 다음과 같다.

// Photo.jsx

export default function Photo({ data }) {
  return (
    <div>
      (Photo 컴포넌트)
      <div>
        <h2>{data.title}</h2>
        <p>{data.content}</p>
      </div>
    </div>
  );
}

 

export const data = [
  {
    id: 1,
    title: "제목1",
    content: "사진1",
  },
  {
    id: 2,
    title: "제목2",
    content: "사진2",
  },
];

 

 

 2) <PhotoBook> 컴포넌트 사용하기 

 

Page.js (부모 컴포넌트)에서 <PhotoBook> 컴포넌트를 사용할 것이다.

<Photo> 컴포넌트에  가상 데이터를 뿌려서 리스트 렌더링을 하고, 
이것을 <PhotoBook>으로 감싼다.

 

// Page.js

import PhotoBook from "./PhotoBook"; // PhotoBook 컴포넌트를 import
import Photo from "./Photo"; // Photo 컴포넌트를 import
import { data } from "./data"; // Photo 컴포넌트에 뿌릴 데이터
import "./styles.css";

export default function Page() {
  return (
    <div className="container">
      <h1>페이지 </h1>

      <PhotoBook>
        {data.map((item) => (
          <Photo key={item.id} data={item} />
        ))}
      </PhotoBook>
    </div>
  );
}

 

// PhotoBook.jsx
// 레이아웃 컴포넌트

export default function PhotoBook({ children }) {
  return (
    <div>
      <header>(PhotoBook 컴포넌트)</header>
      <div>{children}</div>
    </div>
  );
}

 

여기서 children은 <PhotoBook> 컴포넌트가 감싸고 있는 <Photo /> 컴포넌트들이다.

즉, children은 아래와 같다.

[
  <Photo key={1} data={{ id: 1, title: "제목1", content: "사진1" }} />,
  <Photo key={2} data={{ id: 2, title: "제목2", content: "사진2" }} />
]

 

children을 콘솔로 출력하면, PhotoBook 컴포넌트 안에 포함된 모든 자식 요소들이 React 요소로 출력된다.

 

 

---

 

 

 5. children을 활용한 유연한 컴포넌트 설계의 장점 

 

그렇다면 children은 굳이 왜 쓰는걸까?

위 예시를 기준으로, 만약에 <PhotoBook>과 레이아웃이 동일한데, <Photo/> 대신에 다른 것을 넣고 싶다고 가정해보자.

여기서 children을 쓰지 않았다면, 컴포넌트에 들어갈 내용을 미리 고정(<Photo/>로 고정)해야 하고 재사용이 어려워진다.

children은 이런 제약을 없애고, 매번 다른 콘텐츠를 넣을 수 있게 함으로써, 컴포넌트의 재사용성을 극대화할 수 있도록 도와주는 것이다.

즉, 틀만 정의해서 레이아웃을 공통으로 유지하면서도, 내부에 들어갈 내용은 자유롭게 넣도록 설계있어 유연성이 생긴다는 장점이 있다.