[React] 컴포넌트 합성과 children

지금까지는 컴포넌트를 주로 이런 식으로 사용했다.

<TodoItem todo={todo} />

Props를 전달하고 컴포넌트가 UI를 만드는 방식이다.

 

그런데 React에서는 이런 형태도 매우 많이 사용한다.

<Card>
  <h2>홍길동</h2>
  <p>프론트엔드 개발자</p>
</Card>

처음 보면 Card 안에 다른 JSX 코드가 들어가 있다.

이와 같이 컴포넌트의 여는 태그(<Card>)와 닫는 태그(</Card>) 사이에 작성된 모든 내용을 받는 특별한 Props가 바로 children이다.

 

Step 1. 아주 간단한 children 코드 작성해보기

src/App.jsx

function Box({ children }) {
  return (
    <div>
      {children}
    </div>
  );
}

function App() {
  return (
    <Box>
      <h1>Hello React</h1>
    </Box>
  );
}

export default App;

여기서

<Box>
  <h1>Hello React</h1>
</Box>

안에 들어있는

<h1>Hello React</h1>

가 children으로 전달된다.

 

Step 2. children도 그냥 Props다

function Box({ children }) { ... }

에서 children은 React가 Box 컴포넌트에게 자동으로 전달해주는 Props일 뿐이다.

 

예를 들어

<Box>
  <p>안녕하세요</p>
</Box>

라고 하면 children은

<p>안녕하세요</p>

가 된다.

 

그러므로

function Box({ children }) {
  return <div>{children}</div>;
}

으로 화면에 표시될 수 있다.

 

Step 3. 왜 children이 필요할까?

예를 들어 카드 UI가 있다고 해보자.

function Card({ children }) {
  return (
    <section>
      {children}
    </section>
  );
}

그러면 카드 UI에 다양한 내용을 넣을 수 있다.

<Card>
  <h2>사용자 정보</h2>
  <p>홍길동</p>
</Card>

 

또 Card 컴포넌트 입장에서는 안에 어떤 내용이 들어갈지 몰라도 되며 단순히

 

"내 안에 들어오는 다양한 UI 조각들을 하나의 공통 UI 구조로 감싸겠다."

 

라는 역할만 한다.

 

Step 4. Props 방식과 children 방식 비교

Props만 사용한다면

function Card({ title, description }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

<Card
  title="React"
  description="프론트엔드 라이브러리"
/>

 

위와 같은 구조도 좋지만 

내용의 구조가 다양하다면 children이 더 자연스럽다.

function Card({ children }) {
  return (
    <div>
      {children}
    </div>
  );
}

<Card>
  <h2>React</h2>
  <p>프론트엔드 라이브러리</p>
  <button>자세히 보기</button>
</Card>

즉,

• 정해진 데이터 전달 → 일반 Props
• 자유로운 UI 전달 → children

정도로 생각할 수 있다.

 

Step 5. 직접 실습 — Panel 컴포넌트

src/Panel.jsx를 만들어보자.

function Panel({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>

      <div>{children}</div>
    </section>
  );
}

export default Panel;

그리고

 

src/App.jsx

import Panel from "./Panel";

function App() {
  return (
    <div>
      <h1>마이페이지</h1>

      <Panel title="프로필">
        <p>이름: 홍길동</p>
        <p>직업: 개발자</p>
      </Panel>

      <Panel title="설정">
        <button>비밀번호 변경</button>
        <button>로그아웃</button>
      </Panel>
    </div>
  );
}

export default App;

 

여기서 두 Panel 컴포넌트는 같은 Panel 컴포넌트이지만 내부 내용은 완전히 다르다.

Panel
├─ 프로필 UI

Panel
├─ 설정 UI

이것이 컴포넌트 합성(composition)이다.

 

Step 6. React에서의 중요한 사고방식

React에서는 큰 UI를 만들 때

거대한 컴포넌트 하나

보다

작은 컴포넌트들을 조립

하는 방식을 사용한다.

 

예를 들어

function App() {
  return (
    <Layout>
      <Header />

      <Main>
        <Profile />
        <TodoList />
      </Main>

      <Footer />
    </Layout>
  );
}

는 개념적으로

App
│
├─ Layout
│  ├─ Header
│  ├─ Main
│  │  ├─ Profile
│  │  └─ TodoList
│  └─ Footer

처럼 UI를 조립한다.

 

Step 7. children을 너무 남용하지는 말자

그렇다고 모든 Props를 children으로 바꿀 필요는 없다.
이런 데이터는 일반 Props가 자연스럽다.

<User
  name="홍길동"
  age={25}
/>

 

반면 UI 구조 자체를 넣을 때는

<Card>
  <User />
</Card>

처럼 children이 자연스럽다.

 

현재 학습 단계에서는

• 데이터 → Props
• UI 조각 → children

정도로 구분하면 충분하다.

 

실습

다음 구조를 만들어보자.

Dashboard

[사용자]
홍길동
프론트엔드 개발자

[오늘 할 일]
React 공부하기
운동하기

여기서 공통 UI는 Section 컴포넌트로 만든다.

 

Section.jsx

function Section({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>
      {children}
    </section>
  );
}

export default Section;

 

App.jsx은 직접 작성해본다.

 

 

답안 예시

import Section from "./Section";

function App() {
  return (
    <div>
      <h1>Dashboard</h1>

      <Section title="사용자">
        <p>홍길동</p>
        <p>프론트엔드 개발자</p>
      </Section>

      <Section title="오늘 할 일">
        <ul>
          <li>React 공부하기</li>
          <li>운동하기</li>
        </ul>
      </Section>
    </div>
  );
}

export default App;