올해 첫 업무 분담을 했는데 일부 컴포넌트에 컴파운드 패턴 적용하는 걸 하기로 했다! 리액트도 두 달 정도 만에 사용하고, 컴파운드 패턴을 적용해본 적은 없어서 리액트 컴파운드 패턴을 알아봤다. 그리고 끄적끄적.. 메모를 남긴다.
- '요구되는 기능을 수행하기 위해 두 개 이상의 컴포넌트가 협력하는 형태' (https://so-so.dev/react/design-system-decision-record/ 중 )
- 만약 같은 기능을 하나의 컴포넌트로 해결한다면? 그 한 컴포넌트에 prop을 모두 넘겨야 하고, 복잡해질 수 있다.
- 이 패턴을 사용하면? 실제 prop이 사용되는 컴포넌트에 전달해서 동작을 예측하기 쉽고, 코드도 이해하기 쉽다.
- select 안에 option을 사용하는 예시를 생각하면 된다.
- UI 프레임워크(예- material UI) 에서도 종종 사용된다.
예시) 메뉴 컴포넌트 안에 메뉴 아이템이 들어감.
- 컴포넌트 간 상태를 공유한다. 전체적으로 상태가 공유되어야 한다면 context api를 사용할 수 있다.
참고 자료 🔖
https://im-developer.tistory.com/238
[리액트 디자인 패턴] Compound Component Pattern (합성 컴포넌트 패턴) 알아보기
이 글은 Compound Pattern과 관련된 글의 한글 번역입니다. 원문 링크: https://www.patterns.dev/posts/compound-pattern/ Compound Pattern Create multiple components that work together to perform a single task www.patterns.dev Compound Patter
im-developer.tistory.com
리액트로 컴파운드 패턴의 컴포넌트를 구현한 예시가 있다!
https://www.youtube.com/watch?v=Xh2HPpc0xNw
영어이기는 하지만 알아들을 수 있다. ㅎㅎ 영어 자막이 정확하다~
리액트 컴파운트 패턴으로 아코디언을 만드는 예시가 나온다. 사실 위 블로그 예시와 비슷하기는 한데, 하나하나 설명하면서 코드를 작성해서 친절하다..ㅎㅎ 그리고 useMemo, useCallback 등을 사용하는 것도 나온다..!
https://so-so.dev/react/design-system-decision-record/
Design System Decision Record
이 글은 FEConf2022 디자인 시스템, 형태를 넘어서 발표에서 다루지 않은 linear라는 Design System에 대한 고민과 결정에 대한 글입니다. Table of Contents Principle Problem from Principle Interface Compound Component Headl
so-so.dev
linear라는 디자인 시스템을 만들 때 고민하셨던 점들이 담긴 글이다!!! 여기에 컴파운드 컴포넌트에 대해서도 나온다!
'프론트엔드💛' 카테고리의 다른 글
| [error] [eslint] Failed to load parser '@typescript-eslint/parser' (0) | 2023.02.21 |
|---|---|
| TypeScript 챌린지로 공부해야지! (0) | 2023.01.03 |
| click, drag 구분하기(with vue) 😯😊 (0) | 2022.12.16 |
| [A.C] 1, 2일차 - react 앱 생성 (0) | 2022.11.09 |
| 헷갈리기 쉬운 javascript, css 몇 가지.. (0) | 2022.10.25 |