리액트 컴포넌트 패턴

컴포넌트 설계 패턴

컴포넌트를 구현할 때 생각해봐야 할 점

• 다양한 사례에 적용할 수 있는 재사용 가능한 컴포넌트를 어떻게 개발할까?
• 사용하기 쉽고 심플한 API를 제공하는 컴포넌트는 어떻게 만들까?
• UI와 기능 모두에서 확장성 가능한 컴포넌트를 개발하려면 무엇이 필요할까?

방법

• 단일 책임
• 레이아웃 관련 스타일은 사용하는 측에서 적용
• 확장성 있게

props으로 컴포넌트를 확장하게 될 때의 문제점

변경사항이 많아질수록 props의 갯수와, 그에 맞는 로직이 내부에 추가되어 거대하고 복잡한
자이언트 컴포넌트가 된다.

• 해결책 1. 컴파운트 컴포넌트 패턴으로 작은 컴포넌트들을 조합해서 사용한다.
• 해결책 2. 도메인(다루는 데이터의 종류)를 기준으로 컴포넌트를 각각 구현한다.
  • 처음엔 같은 ui여도 나중에 가면 달라질 수 있기 때문

제어역전 패턴들

제어 역전은 컴포넌트 사용자(개발자)에게 유연성과 제어권을 주는 것이다.
이를 통해 컴포넌트의 확장성과 재사용성을 높일 수 있다.

1. Compound Component 패턴

한 컴포넌트를 props에 따라 잘게 나누어 조립해 사용하는 것.
props데이터 하나당 하나의 sub컴포넌트와 연결.
자신의 상태를 자신이 관리한다.

2. 제어 Props 패턴
부모의 상태를 변경하는 (setState)로직이 포함된 핸들러를 자식 컴포넌트의 props으로 내려주는 것
Compound Component 패턴과 다른 점은 상태를 외부(상위 컴포넌트)에서 관리한다는 것.

3. Custom Hook 패턴
상태 관련 로직을 외부 파일로 분리하는 것.

하지만 제어역전은 코드량이 많아지고 한 눈에 들어오지 않는다는 단점도 있다.
변경될 여지가 있는 컴포넌트에만 적용하는 것이 좋다.

---