React에서 children을 활용한 Containment 패턴 이해하기

React에서 Containment 패턴은 컴포넌트 내부에 다른 컴포넌트를 포함하는 방식으로, 재사용성을 높이고 컴포넌트 간 결합도를 낮출 수 있는 방법이다. 일반적으로 리액트 컴포넌트 props에 기본적으로 들어있는 children 속성을 사용하여 구현한다. props.children 속성을 사용하면 해당 컴포넌트의 하위 컴포넌트가 모두 children으로 들어오게 된다.

 

앞에서 createElement()함수에 대해 배울 때 아래와 같은 형태로 호출 했는데

React.createElement(
	type,
	[props],
	[...children]
)

 

세번째 파라미터에 children을 사용한다.

 

추천 예제

• 모달 컴포넌트
• 카드(Card) UI 컴포넌트
• 레이아웃 컴포넌트(예: 사이드바 + 컨텐츠 영역)
• 리스트 컴포넌트(예:<ul> 내부의 <li>요소들)

예제 코드

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

function App() {
  return (
    <Modal>
      <h2>알림</h2>
      <p>이것은 모달 안의 컨텐츠입니다.</p>
    </Modal>
  );
}

 

Modal 내부에 어떤 내용을 넣어도 모달이 재사용 가능해진다.