728x90 300x250 SMALL Front-end/React115 확장 가능한 컴포넌트 만들기 : Specialization 패턴 사용법 Specialization 패턴은 일반적인 컴포넌트를 만들고, 이를 확장하여 특정 역할을 수행하는 컴포넌트를 만드는 방식이다.일반적으로 props를 활용하여 특정 동작을 추가하거나, 기본 컴포넌트를 확장하여 특화된 기능을 제공한다. 추천 예제버튼 컴포넌트(기본 버튼 vs primary 버튼 vs danger버튼)입력 폼(기본 Input vs Password Input)알림 컴포넌트(일반 알림 vs. 경고 메시지 vs. 성공 메시지)예제 코드function Button({ type, children }) { const className = type === "primary" ? "btn-primary" : "btn-default"; return {children};}function App() { ret.. 2025. 2. 14. React에서 children을 활용한 Containment 패턴 이해하기 React에서 Containment 패턴은 컴포넌트 내부에 다른 컴포넌트를 포함하는 방식으로, 재사용성을 높이고 컴포넌트 간 결합도를 낮출 수 있는 방법이다. 일반적으로 리액트 컴포넌트 props에 기본적으로 들어있는 children 속성을 사용하여 구현한다. props.children 속성을 사용하면 해당 컴포넌트의 하위 컴포넌트가 모두 children으로 들어오게 된다. 앞에서 createElement()함수에 대해 배울 때 아래와 같은 형태로 호출 했는데React.createElement( type, [props], [...children]) 세번째 파라미터에 children을 사용한다. 추천 예제모달 컴포넌트카드(Card) UI 컴포넌트레이아웃 컴포넌트(예: 사이드바 + 컨텐츠 영역)리스트 컴포넌.. 2025. 2. 13. 리액트 합성(Composition)이란? 리액트 합성은 컴포넌트를 조합하여 더 큰 컴포넌트를 구성하는 방식이다.즉 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것이라고 할 수 있다.이를 통해 재사용성과 유연성을 높이며, 상속보다 구성 철학을 따른다.합성은 컴포넌트를 다른 컴포넌트의 자식이나 속성으로 전달하여 구조를 구성하는 것을 의미한다. 리액트 합성의 주요 패턴1. 자식 컴포넌트를 사용하는 합성컴포넌트 내부에서 props.children을 통해 하위 컴포넌트를 포함하는 방식이 패턴은 레이아웃 컴포넌트(예: 카드, 모달, 컨테이너 등)에서 자주 사용된다.function Card(props) { return {props.children};}// Card 컴포넌트 사용 예시function App() { return ( .. 2025. 2. 12. 섭씨온도 화씨온도 표시하기 - 비 보호되어 있는 글 입니다. 2025. 2. 11. 이전 1 ··· 3 4 5 6 7 8 9 ··· 29 다음 728x90 반응형 LIST