Personal-Study/UI Component Patterns8 [UI Component] Design Patterns - Compound Compound - 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 함 - 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해줌 - 컴포넌트의 Static property로 만듦 - 컴포넌트 라이브러리 만들 때 유용하게 사용 가능 ex) Semantic UI library - 자식 컴포넌트 순회 처리하는데도 Compound 패턴 사용 가능 - React.cloneElement 사용하여 자식 컴포넌트 복제하여 각각 prop 넘길 수 있음 (Context API 사용 X) - 장점 - 추상화가 잘됨 - 자식 컴포넌트들을 일일히 import할 필요 없음 - 단점 - 내부에서 React.children.map을 사용하고 있어서 사용하는 쪽에서 자식 컴포넌트를 사전 정의된 형태로 넘겨야 하는 제약 발.. 2023. 11. 6. [UI Component] Design Patterns - Hooks Hooks - 앱 전체에서 함수를 통해 상태를 가진 로직을 여러 컴포넌트들에서 사용함 - React 16.8 버전에 Hooks라는 기능이 추가됨 - React의 상태와 생명 주기 함수들을 ES6 클래스를 사용하지 않고 쓸 수 있게 해줌 - 클래스 컴포넌트 단점 (Legacy) - 옛날에는 생명 주기 메서드들을 사용하려면 함수형 -> 클래스형 컴포넌트로 리팩토링이 필요했음 - 그래서 여러 컴포넌트에서 코드 공유 위해 HOC나 Render Prop 패턴을 사용했음 -> Wrapper Hell 발생 가능 - 컴포넌트 로직이 복잡해지고 나중에는 디버깅과 성능 최적화를 어렵게 만듦 - 생명 주기 메서드들은 꽤 많은 코드의 중복을 발생시킴 - React Hooks는 컴포넌트의 상태와 라이프사이클 메서드를 관리할 수.. 2023. 11. 6. [UI Component] Design Patterns - Render Props Render Props - JSX 엘리먼트를 props를 통해 컴포넌트에게 전달함 - HOC와 같이 컴포넌트를 재사용하는 또 다른 방법 - prop을 받는 컴포넌트가 재사용성이 좋아짐 - render prop 함수를 호출할 때 인자를 전달할 수 있음 - 상태를 부모 컴포넌트로 올리기 - 규모가 큰 앱에서 컴포넌트가 여러 자식 컴포넌트를 가지고 있는 경우 까다로울 수 있음 - 상태의 변경은 모든 자식 컴포넌트의 리렌더링 유발 가능 - 앱의 전체적인 성능이 떨어질 수 있음 - render prop을 넘기는 대신 자식 컴포넌트를 함수로 넘길 수 있음 - 몇몇 상황에서 hooks로 대체될 수 있음 - 장점 - 몇몇 컴포넌트 간 데이터 공유가 간단함 - children prop을 활용하는 것으로 해당 컴포넌트 재.. 2023. 11. 6. [UI Component] Design Patterns - HOC HOC - 앱 전반적으로 재사용 가능한 로직을 prop으로 컴포넌트에게 제공함 - ex) 컴포넌트 스타일 시트 설정, 권한 요청, 전역 상태 추가 등 - 고차 컴포넌트: 다른 컴포넌트를 받는 컴포넌트 - Composing - 여러 HOC 조합 - HOC 사용하는 유명 오픈소스 라이브러리 -> recompose - 몇몇 상황에서는 Hooks로 대체 가능 - 일반적으로 React의 훅은 HOC 패턴을 완전 대체할 수 없음 - 대부분의 경우에서 React의 훅은 트리가 깊어지는 상황을 줄일 수 있음 - 훅은 컴포넌트 내부에서 특정한 동작을 추가할 수 있게 해주지만, HOC에 비해 버그 발생 확률 높음 - HOC 여러번 조합해서 사용하면 모든 prop이 안에서 병합되므로 어떤 HOC가 어떤 props에 관련 있.. 2023. 11. 3. 이전 1 2 다음 반응형