리팩터링 2

[REACT] 컴파운드(조합) 컴포넌트

컴파운드 컴포넌트란?하나의 큰 컴포넌트(자이언트 컴포넌트)를 세부 요소로 쪼개놓고, Root에 assign 하는 형태로 합성하는 것입니다.prop을 사용하지 않고 내부에서 데이터를 처리할 수 있고, 비슷한 디자인의 컴포넌트가 필요할 때 새로운 컴포넌트를 만들지 않고 사용할 수 있습니다. 컴파운드 컴포넌트?? 용어부터 어렵잖아....? 그래서 왜 사용하는데?내가 처음 게시한 블로그 글에 "단단한 컴포넌트 부수기"라는 내용을 언급을 했는데 인제 하나씩 알아가 보자고!유연한 UI 구성부모 컴포넌트의 상태와 로직을 기반으로 자식 컴포넌트를 조합하여 다양한 UI를 유연하게 설계할 수 있습니다재사용성로직과 UI를 분리해 여러 곳에서 재사용 가능하며, 다른 조합 방식으로 새로운 기능을 쉽게 추가할 수 있습니다.컴포넌..

[REACT] 재사용성 컴포넌트

재사용성 컴포넌트 정의중복되는 코드를 함수(컴포넌트)로 지정하여 사용하는 곳에 이름을 호출하여 사용한다고 생각한다재사용 가능한 컴포넌트를 사용하는 목적반복되는 코드가 100만 개 있다고 가정해 보자! "프코님, 버튼 오늘까지 수정해 주세요"라고 요청받았는데, 그 해당 버튼은 이곳저곳 100만 개가 사용된다고 생각해 보자.하나씩 고치다 보면 절대 시간 안에 못 끝낸다이러한 문제점을 하나의 함수로 정의하여 사용했더라면? 그 함수만 수정하면 사용되는 부분도 자동으로 수정되는 거 아닌가? ※ 이러한 문제들이 발생하여 궁극적으로는 재사용이 가능한 컴포넌트를 사용하는 이유는 추후 유지보수에 편리하기 위해 사용한다고 나는 정의할 수 있다. 아래의 코드를 살펴보자export default function Home() ..

frontend 2025.01.20