🧋props.children 이란?

props.children 이란?

React에서 부모 컴포넌트가 자식 컴포넌트에게 전달할 수 있는 특별한 prop입니다.
이를 통해 부모 컴포넌트는 자식 컴포넌트의 태그 사이에 위치한 모든 JSX나 다른 컴포넌트들을 포함할 수 있습니다.
다시 말해서, props.children은 부모 컴포넌트의 오프닝 태그와 클로징 태그 사이에 삽입된 모든 것을 자동으로 받아서 사용할 수 있게 해주는 prop입니다.

props.children의 사용 예

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h1>Hello, World!</h1>
      <p>This is inside the card.</p>
    </Card>
  );
}

여기서 Card 컴포넌트는 {children}을 사용하여 내부에 포함된 모든 요소를 출력합니다. App 컴포넌트에서 Card 컴포넌트 사이에 위치한 <h1>과 <p> 태그는 Card 컴포넌트의 children으로 처리됩니다.

props.children의 장점

• 유연성: 컴포넌트가 받을 자식 요소의 구조를 미리 정의하지 않고, 사용하는 측에서 자유롭게 내용을 구성할 수 있습니다.
• 재사용성: 같은 컴포넌트를 다양한 내용으로 재사용할 수 있어서 코드 중복을 줄일 수 있습니다.
• 컴포넌트 합성: 복잡한 UI를 간결하게 구성할 수 있도록 도와줍니다. 컴포넌트를 서로 겹치거나 포함하는 방식으로 구성할 수 있습니다.

📂 Modal 예시

모달(dialog) 컴포넌트를 만들 때 props.children의 유용성을 볼 수 있습니다.

function Modal({ children }) {
  return (
    <div className="modal-background">
      <div className="modal-content">{children}</div>
    </div>
  );
}

function App() {
  return (
    <Modal>
      <h2>Confirm Your Action</h2>
      <p>Are you sure you want to delete this item?</p>
      <button>Confirm</button>
    </Modal>
  );
}

여기서 Modal 컴포넌트는 헤더, 내용, 버튼 등 어떠한 내용이든 포함할 수 있습니다. 이러한 유연성은 props.children 덕분에 가능합니다.

props.children을 사용하면 컴포넌트를 만들 때 그 내부에 들어갈 내용을 예측하지 않고도 범용적으로 사용할 수 있습니다. 이는 컴포넌트의 재사용성을 높이고, 코드의 중복을 줄이며, 다양한 상황에서 동일한 컴포넌트를 활용할 수 있게 해 줍니다.

❓ Modal 에 내용을 Prop으로 전달하는 방법

function Modal({ header, body, footer }) {
  return (
    <div className="modal-background">
      <div className="modal-header">{header}</div>
      <div className="modal-body">{body}</div>
      <div className="modal-footer">{footer}</div>
    </div>
  );
}

function App() {
  return (
    <Modal
      header={<h2>Confirm Your Action</h2>}
      body={<p>Are you sure you want to delete this item?</p>}
      footer={<button>Confirm</button>}
    />
  );
}

장점

• 명확성: 각 Prop이 무엇을 나타내는지 명확하므로, 컴포넌트의 사용법을 이해하기가 더 쉽습니다.
• 유지보수: 컴포넌트의 내부 구조가 변경되어도 외부 API는 변하지 않기 때문에, 사용자가 이 컴포넌트를 사용하는 방법은 동일하게 유지될 수 있습니다.
• 타입 검사 용이: TypeScript와 같은 정적 타입 시스템을 사용할 때, 각 Prop의 타입을 명확하게 정의할 수 있어, 버그를 줄이는 데 도움이 됩니다.

단점

• 유연성 제한: props.children을 사용하는 것에 비해, 모달 컴포넌트가 어떤 형태의 자식도 받을 수 있는 것에 비해, prop으로 내용을 전달하면, 컴포넌트의 사용성이 제한됩니다. 예를 들어, 추가적인 섹션을 모달에 넣고 싶을 때 각 섹션을 위한 새로운 prop을 만들어야 할 수 있습니다.
• 복잡성 증가: 여러 종류의 내용을 전달해야 할 때, 관련된 모든 prop을 관리하고 기억해야 하므로 관리가 복잡해질 수 있습니다.