React | Compound-component

React

목차

시작하기 전에..

1. React Patterns
2. compound components pattern란?
3. 다른 patterns와 비교

시작하기 전에..

1. compound-component는 이번에 과제 발표(라고 하기엔 간단한 내용들이었다)를 하면서 처음 들은 사항이었다.

   • 대부분의 자료들이 하나의 게시물을 향한다고 볼 수 있었는데 여기가 해당하는 게시물의 링크 (하단에도 추가 예정)

   • 보는 것만으로 확실하게 비교할 수 있을 정도의 레벨이 아니다보니, 깃에 올라와있는 자료가 있어 받아서 어떠한 느낌인지 확인해봤다.

2. 클론받아서 직접 보면서 컴포넌트를 해결하려고 했는데,

   opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
   

   가 떠서 구글링해보니, 다운그레이드를 해봐라고 해서 npm 다운그레이드를 하고 해결했다.

   sudo npm install -g n
   sudo n 16.13.2
   

1. React Patterns

• 여러 경우에 적용할 수 있는 재사용한 컴포넌트
• 사용하기 쉽고 편리한 API를 제공하는 컴포넌트
• UI와 기능성의 측면에서 확장 가능한 컴포넌트

=> 를 만들기 위한 디자인 패턴으로 아래의 두가지 요소로 평가함

• Inversion of Control(=제어의 역전) : 컴포넌트 사용자에게 주어지는 유연성과 제어권
• Implementation complexity : 사용자와 개발자에 대해 그 패턴을 구현하는 난이도

2. compound components pattern란?

: 불필요한 프롭스 드릴링 없이 표현적(expressive)이고 선언적인(declarative) 컴포넌트를 만들 수 있음

• 컴포넌트에 선언적 서브 컴포넌트 API를 제공하는 방법
• 커스터마이징이 용이하고 관심사를 분리하여 이해가 쉬운 API를 갖춘 컴포넌트를 만들 때 유용함

1. 사용법(예시 1번을 베이스로 하여 예시 2번을 정리하면 사용방법에 대해 이해하기 쉽다.)

1. 내부 상태를 암시적으로 공유할 Context와 Context Provider 컴포넌트를 만듦
2. 해당 Context 내에서만 사용할 수 있는 useContext 훅 생성
3. 제공할 서브 컴포넌트들의 API들을 만듦

2. 장점

• API 복잡성 감소 : 프롭스 드릴링 대신에 각 prop은 가장 적합한 SubComponent에 연결되어 있음
• 유연한 마크업 구조 : 컴포넌트의 UI가 뛰어난 유연성을 가지고 있고, 하나의 컴포넌트로부터 다양한 케이스를 생성할 수 있음
  • 예시) 컴포넌트의 순서를 변경하거나 어떤 것을 표시할지 정할 수 있음
• 관심사의 분리 : 대부분의 로직은 기본 Counter 컴포넌트에 포함되며, React.Context는 모든 자식 컴포넌트의 states와 hander를 공유하는데 사용되기 때문에 책임 소재를 명확히 분리할 수 있음

3. 단점

• 과도한 UI 유연성 : 유연성이 높다는 것은 예기치 않은 동작을 유발할 가능성이 높아지고, 개발자 측에서 사용자가 어떻게 사용할지를 바라는지에 따라 유연성에 어느정도 제한을 주고 싶을수도 있음
• 무거운 jsx : 이 패턴을 적용할 시 JSX 행 수가 증가함
  • 특히 EsLint나 Prettier와 같은 코드 포맷터를 사용하는 경우 더욱 심각해짐(규모가 커질수록 위 문제는 두드러지게 됨)

4. 결론

• Inversion of Control 과 Integration complexity 측면에서는 좋지 않은 평
  • Inversion of Control : 1/4
  • Integration complexity : 1/4

3. 다른 patterns와 비교

: React patterns는 각각 더 유연하고 쉽게 적용할 수 있는 컴포넌트를 만드는 데에 도움을 주지만, 요구사항에 따라 알맞는 패턴을 사용하여 코드를 작성하는 것이 가장 중요.

나머지 parttern(이 부분은 추가로 더 공부하고 각각 정리 예정)

1. Control props pattern
   : 컴포넌트를 제어 컴포넌트로 변환하고 외부 상태는 사용자가 컴포넌트의 기본 동작을 변경하는 사용자 지정 로직을 삽입하도록 허용하는 “single source of truth”로 사용됨
   • Inversion of Control : 2/4
   • Integration complexity : 1/4
2. Custom hook pattern
   : 메인 로직이 사용자의 custom hook으로 전달되고 이 hook은 사용자가 접근할 수 있고, 여러 내부 로직(States, Handler)을 노출함으로써 컴포넌트의 제어를 쉬워지게 함
   • Inversion of Control : 2/4
   • Integration complexity : 2/4
3. Props getters pattern
   : 제어권 면에서는 강력하나 컴포넌트를 통합하기는 어려운 방식
   • 사용자는 props를 직접 다루고 스스로 로직을 다시 만들어야하는 복잡성을 감추기 위해 기본 props를 노출하는 대신 props getter의 목록을 제공함
   • 여기서 getter는 많은 props를 반환하는 함수이며 사용자가 올바른 JSX 요소에 쉽게 연결할 수 있도록 의미있는 이름을 제공함
     • Inversion of Control : 3/4
     • Integration complexity : 3/4
4. State reducer pattern
   : 사용자에게 컴포넌트 내부의 동작 방식을 변경할 수 있는 방법을 제공
   • Custom hook 패턴과 유사하나, 사용자가 훅에 전달하는 reducer를 정의하고 이 reducer는 컴포넌트 내부 행동을 오버로드함
     • Inversion of Control : 4/4
     • Integration complexity : 4/4

---

출처

리액트 디자인 패턴
리액트 디자인 패턴 - 한글버전
리액트 디자인 패턴 - 예시 1
리액트 디자인패턴 : Compound Components (컴파운드 컴포넌트 패턴) - 예시 2