React – JSX와 렌더링 – 컴포넌트 렌더링 – 3 – children과 slot 개념

작성자 wooah
React – JSX와 렌더링 – 컴포넌트 렌더링 – 3 – children과 slot 개념

React – JSX와 렌더링 – 컴포넌트 렌더링 – 3 – children과 slot 개념

안녕하세요 여러분! 😊
이번 시간에는 React에서 컴포넌트의 유연함을 극대화할 수 있는 기능인
바로 children과 슬롯(slot) 개념에 대해 배워볼게요.

이 개념은 마치 빈 상자에 어떤 선물이 들어올지 모를 때,
그 상자를 열어보는 느낌이에요.
즉, 컴포넌트 내부에 외부에서 전달된 JSX 요소를 꽂아 넣는 구조를 이해하는 것이 핵심입니다!

1. children이란 무엇인가요?

children은 컴포넌트 태그 사이에 들어가는 내용을 의미해요.

<Card>
  <p>이것은 카드 안에 들어가는 콘텐츠입니다.</p>
</Card>

이때 <Card> 컴포넌트는 태그 사이의 내용을 **props.children**으로 받을 수 있어요!

2. 기본적인 children 사용 예시

✅ Card.js

function Card({ children }) {
  return (
    <div style={{ border: '2px solid gray', padding: '20px', borderRadius: '8px' }}>
      {children}
    </div>
  );
}

export default Card;

✅ App.js

import Card from './Card';

function App() {
  return (
    <Card>
      <h2>👋 안녕하세요!</h2>
      <p>이것은 카드 안에 들어가는 내용이에요.</p>
    </Card>
  );
}

➡️ 결과적으로 <Card> 컴포넌트는 전달된 내용을 내부에 표시하는 그릇처럼 작동해요.

3. 왜 children이 필요한가요?

재사용성과 유연성을 위해서예요!

예를 들어 Card 컴포넌트 안에 제목, 본문, 버튼 등 다양한 콘텐츠를 삽입하고 싶을 때,
props만으로는 너무 경직된 구조가 됩니다.

children을 쓰면 컴포넌트의 구조는 고정하되, 내용은 유동적으로 변경할 수 있어요.

4. children 없이 만들면 불편한 구조

function AlertBox({ message }) {
  return <div className="alert">{message}</div>;
}
<AlertBox message="경고! 작업을 저장하세요!" />

➡️ 이렇게 하면 문자열만 전달할 수 있고, 내부 콘텐츠를 HTML처럼 꾸미기 어렵죠.

✅ 반대로 children을 쓰면!

function AlertBox({ children }) {
  return <div className="alert">{children}</div>;
}
<AlertBox>
  <strong>경고!</strong> 작업을 저장하세요!
</AlertBox>

➡️ 구조와 스타일은 고정되어 있고, 내부 콘텐츠는 얼마든지 바꿔 쓸 수 있게 됩니다!

5. children + props 조합하기

function Layout({ title, children }) {
  return (
    <div className="layout">
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
}
<Layout title="공지사항">
  <ul>
    <li>업데이트 안내</li>
    <li>이벤트 소식</li>
  </ul>
</Layout>

➡️ 제목은 props.title로 받고, 본문은 children으로 받는 식이죠!

6. Slot 개념이란?

React에는 공식적으로 Vue의 slot과 같은 개념이 직접적으론 없지만,
props로 컴포넌트를 넘겨서 특정 위치에 표시하는 방식으로 구현할 수 있어요.

✅ 예: 여러 영역을 나눠서 children처럼 사용하기

function Modal({ header, body, footer }) {
  return (
    <div className="modal">
      <div className="modal-header">{header}</div>
      <div className="modal-body">{body}</div>
      <div className="modal-footer">{footer}</div>
    </div>
  );
}
<Modal
  header={<h2>회원가입</h2>}
  body={<form>...</form>}
  footer={<button>닫기</button>}
/>

➡️ 이처럼 “슬롯 자리”에 들어갈 JSX를 props로 넘겨서 배치하는 구조를 통해
React에서도 유사한 slot 기능을 구현할 수 있어요!

7. React의 공식적인 children 사용 방식

  • React에서 모든 컴포넌트는 props.children을 기본으로 포함합니다.
  • 전달된 children이 문자열, 엘리먼트, 배열, 함수, 컴포넌트 모두 가능해요.

8. 실전 패턴: 고차 컴포넌트 만들기

function WithBorder({ children }) {
  return <div style={{ border: '2px dashed pink' }}>{children}</div>;
}
<WithBorder>
  <h3>타이틀입니다</h3>
  <p>본문입니다</p>
</WithBorder>

➡️ children 덕분에 다양한 내용을 감싸는 컨테이너형 컴포넌트를 만들 수 있어요.

9. children이 없는 경우를 대비한 처리

function Box({ children }) {
  return <div>{children || '기본 콘텐츠가 없습니다.'}</div>;
}

➡️ children이 없을 경우에도 기본 메시지나 대체 내용을 보여줄 수 있는 처리가 필요해요.

주의할 점 정리

항목 주의사항
children은 JSX 태그 사이에 작성됨 <Comp>내용</Comp> 형식
props.children은 읽기 전용 자식 컴포넌트 안에서 수정 불가
JSX 표현식 전달 가능 <Modal header={<h2>제목</h2>} /> 등
조건부 children 처리 필요 `children | | ‘기본값’` 같은 fallback 처리 추천
너무 많은 slot은 복잡함 영역이 2~3개를 넘으면 컴포넌트 구조 재검토 필요

마무리하며

props.children은 React 컴포넌트를 더 유연하고 강력하게 만들어주는 도구입니다.
slot 개념을 활용하면 마치 템플릿 엔진처럼 컴포넌트를 조립하듯 설계할 수 있어서
디자인 시스템, 공통 UI 컴포넌트 구성에도 아주 유용해요!

다음 글에서는 이런 컴포넌트를 조건에 따라 다르게 렌더링하는 방법,
즉 조건부 렌더링과 컴포넌트 분기 처리에 대해 깊이 들어가볼게요.
함께 한 단계 더 올라가봐요! 🚀💪

답글 남기기