[React] 컴포넌트 속성에 컴포넌트 전달하기

🎯 React에서 children을 활용한 유연한 컴포넌트 만들기

React에서 컴포넌트를 만들다 보면, 내부에 어떤 내용이 들어올지 모르는 컨테이너 역할의 컴포넌트를 만들 일이 많다. 예를 들어, Sidebar, Dialog, Card 같은 컴포넌트들은 내부에 들어갈 요소가 정해져 있지 않다.

이럴 때 React의 children prop을 활용하면 꽤 유연하게 컴포넌트를 만들 수 있다. 하지만 children 외에도 특정 prop으로 컴포넌트를 직접 전달하는 방식도 있는데, 이 방법을 활용하면 더 구조적으로 UI를 구성할 수도 있다.

이번에 children과 특정 prop을 활용해 재사용 가능한 컴포넌트를 어떻게 만들고 활용할 수 있는지 직접 예제를 통해 정리해 보자.

---

children prop이란?

children은 컴포넌트가 감싸고 있는 내용을 그대로 전달해주는 특별한 prop이다. 부모 컴포넌트가 자식 요소를 렌더링할 때, 해당 요소를 동적으로 전달하는 데 사용된다.

💡 예제: 기본적인 children 사용법

const Box = ({ children }) => {
  return <div className="box">{children}</div>;
};

const App = () => {
  return (
    <Box>
      <p>이 내용이 children으로 전달됩니다!</p>
    </Box>
  );
};

📌 Box 컴포넌트 내부에서 {children}을 사용해서, 부모가 전달한 요소를 그대로 렌더링할 수 있도록 했다.

---

children을 활용한 유연한 컴포넌트 만들기

예를 들어, 여러 개의 콘텐츠 블록(이미지, 표, 텍스트, 버튼 등)을 표시해야 한다고 해보자.

각 블록은 제목을 가지고 있고, 내부에는 다양한 요소가 들어갈 수 있다. 이럴 때 Section 컴포넌트를 만들어서 재사용하면 좋다.

1. Section 컴포넌트 구현

const Section = ({ title, children }) => {
  return (
    <section className="box">
      <h2 className="title">{title}</h2>
      <div>{children}</div>  {/* children을 활용하여 다양한 요소를 삽입 가능 */}
    </section>
  );
};

📌 Section 컴포넌트는 title과 children을 props로 받아, 제목을 표시하고 내부에 어떤 내용이든 들어갈 수 있도록 {children}을 활용했다.

---

 

2. Section 컴포넌트 활용

이제 Section을 사용해서 **네 가지 다른 섹션(이미지, 표, 텍스트, 버튼)**을 만들어 보자.

const App = () => {
  return (
    <div className="grid">
      <Section title="이미지">
        <img src="https://via.placeholder.com/150" alt="샘플 이미지" className="img" />
      </Section>

      <Section title="표">
        <table className="table">
          <thead>
            <tr>
              <th>항목</th>
              <th>값</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>A</td>
              <td>100</td>
            </tr>
            <tr>
              <td>B</td>
              <td>200</td>
            </tr>
          </tbody>
        </table>
      </Section>

      <Section title="텍스트">
        <p className="text">이것은 샘플 텍스트입니다.</p>
      </Section>

      <Section title="버튼">
        <button className="btn">클릭</button>
      </Section>
    </

 

 

---

 

3. children을 사용하면 어떤 점이 좋을까?

✅ 재사용 가능 → Section 컴포넌트는 내부 콘텐츠에 구애받지 않고 여러 곳에서 사용 가능

✅ 유연성 → children을 활용하면 다양한 요소(이미지, 표, 버튼 등)를 자유롭게 삽입 가능

✅ 가독성 향상 → 코드가 모듈화되어 유지보수가 쉬워짐

---

 

🎯 특정 prop을 활용하여 컴포넌트 전달하기

children 외에도 특정 prop을 사용해서 컴포넌트를 직접 전달할 수 있다.

이 방식은 Vue의 Named Slots과 비슷하게 활용할 수 있으며, 특정 역할을 명확하게 나눠야 할 때 더 유용하다. 예를 들어, Card 컴포넌트에서 헤더와 푸터를 따로 지정하고 싶다면 특정 prop을 활용할 수 있다.

1. 특정 prop을 활용한 Card 컴포넌트

const Card = ({ header, content, footer }) => {
  return (
    <div className="card">
      {header && <div className="card-header">{header}</div>}
      <div className="card-content">{content}</div>
      {footer && <div className="card-footer">{footer}</div>}
    </div>
  );
};

📌 header, content, footer를 prop으로 받아서 명확하게 역할을 분리했다.

---

 

2. Card 컴포넌트 활용

const App = () => {
  return (
    <div className="p-6 space-y-4">
      <Card
        header={<h2>📌 카드 제목</h2>}
        content={<p>이것은 카드의 내용입니다.</p>}
        footer={<button className="btn-primary">확인</button>}
      />

      <Card
        header={<h2>📊 데이터 카드</h2>}
        content={
          <table className="table">
            <thead>
              <tr>
                <th>항목</th>
                <th>값</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>A</td>
                <td>100</td>
              </tr>
            </tbody>
          </table>
        }
        footer={<span>업데이트: 2025-03-18</span>}
      />
    </div>
  );
};

✅ 여기서 핵심은 header, content, footer에 컴포넌트를 직접 전달했다는 점이다.

🔥 children vs. 특정 prop 선택 기준

선택 기준 children 사용 특정 prop 사용

단순한 컨텐츠 삽입	✅	❌
여러 개의 영역이 필요한 경우	❌	✅
명확한 구조 분리가 필요한 경우	❌	✅
유연한 콘텐츠 삽입이 필요한 경우	✅	✅

👉한 개의 콘텐츠만 받는다면 children이 더 간단하고,

👉여러 개의 영역을 나눠야 한다면 특정 prop을 활용하는 것이 좋다!