728x90 300x250 SMALL Containment2 Containment + Specialization 패턴 활용법 Containment와 Specialization을 함께 활용하면, 보다 유연하고 확장 가능한 컴포넌트 설계가 가능하다.예를 들어, Containment를 사용하여 컨텐츠를 감싸는 역할을 수행하고, Specialization을 통해 해당 컨텐츠에 특수한 기능을 부여할 수 있다. 추천 예제카드(Card) 컴포넌트 + 버튼 (Containment로 컨텐츠를 포함하고, Specialization으로 다양한 카드 스타일 제공)다이얼로그(Dialog)컴포넌트 + 확인/취소 버튼(Containment로 내부 컨텐츠 포함, Specialization으로 버튼 종류 변경)레이아웃 컴포넌트 + 특정 페이지 적용(Containment로 레이아웃을 감싸고, Specialization으로 특정 페이지 디자인 차별화)예제 코드.. 2025. 2. 15. React에서 children을 활용한 Containment 패턴 이해하기 React에서 Containment 패턴은 컴포넌트 내부에 다른 컴포넌트를 포함하는 방식으로, 재사용성을 높이고 컴포넌트 간 결합도를 낮출 수 있는 방법이다. 일반적으로 리액트 컴포넌트 props에 기본적으로 들어있는 children 속성을 사용하여 구현한다. props.children 속성을 사용하면 해당 컴포넌트의 하위 컴포넌트가 모두 children으로 들어오게 된다. 앞에서 createElement()함수에 대해 배울 때 아래와 같은 형태로 호출 했는데React.createElement( type, [props], [...children]) 세번째 파라미터에 children을 사용한다. 추천 예제모달 컴포넌트카드(Card) UI 컴포넌트레이아웃 컴포넌트(예: 사이드바 + 컨텐츠 영역)리스트 컴포넌.. 2025. 2. 13. 이전 1 다음 728x90 반응형 LIST