React 컴포넌트 설계에 대해..

컴포넌트의 개념

시스템을 구성하는 요소 중 하나의 단위로써, 공통되는 부분을 모듈화하여 재사용할 수 있는 단위, 데이터를 보여주기 위한 UI 요소이다.

 

설계를 위한 원칙

• 확장성
• 재사용성
• 관심사에 따른 코드 분리
• 단일 책임 원칙
• 의존성을 컴포넌트가 직접 참조하지 않고 외부로부터 주입
• 역할은 드러내고 구현은 감추기 - 순수함수

 

선언형 프로그래밍

무엇을 할 것인가에 초점을 두고 결과만 기술하여 어떻게 해야하는지는 기술하지 않는 프로그래밍 기법

의도에 집중한 프로그래밍 방법 / 단방향 데이터 바인딩 처리

명령형 프로그래밍

무엇을 어떻게 할 것인가

 

리액트의 공식문서 상 선언형 프로그래밍 된다고 기재됨
설계를 잘하면 리액트는 데이터가 변경될 때 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다.

ex. React.lazy() 와 Suspense, ErrorBoundary, 상속이 아닌 합성을 통한 구현 - children, ReactNode 등을 통하여 개발자의 입장에서 넣어줄 수 있도록 위임 등

 

리액트의 컴포넌트 패턴

1. Presentation & Container

가장 기본적인 패턴으로 데이터 로직을 수행하는 Container 컴포넌트와 데이터를 출력하는 Presentation 컴포넌트를 분리하여 구현하는 디자인 패턴이다.

• 역할별 컴포넌트 분리로 명확한 기능과 책임을 가짐
• 하나의 컴포넌트에 로직과 View가 모두 있으면, 재사용이 어렵고 컴포넌트 의존도가 높아짐

Container 컴포넌트

API 호출, State 관리, 이벤트 처리 등 담당

변경된 값을 props를 통하여 Presentation 컴포넌트로 전달

Presentation 컴포넌트

UI를 표시하는 컴포넌트

직접 상태값을 관리하지 않고 Container가 전달해준 props를 받아 보여준다

 

2. Custom hooks

기존의 Presentation&Container 패턴의 대체형으로 Container에서 공통 로직이 발생했을 때 다른 Container 컴포넌트로 로직을 넘겨주게 하기 위해 hooks로 로직을 관리

hook을 사용하여 UI와 로직까지 재활용이 가능해진다. 로직이 필요한 컴포넌트에서 hook을 불러오면 로직을 사용할 수 있음.

로직과 렌더링이 분리되어있으므로 컴포넌트 동작 방식에 대한 이해가 필요하나, 여러 컴포넌트에서 동일한 로직을 공유할 수 있으며 컴포넌트의 제어가 쉬워지고 사용자가 더 많은 통제권을 가질 수 있다는 이점이 존재

 

Atom - Molecule - Organism - Template - Page

3. Atomic 구조

리액트 컴포넌트를 가장 작은 단위의 컴포넌트인 Atom 단위로 설계하는 방식

• UI 재사용성이 뛰어나지만 로직, state 들을 낮은 단위의 컴포넌트에서 다루지 못하고 page 단위에서 props로 내려줘야하는 단점이 존재
• 디자인과 기획이 자주 변경되는 환경에선 비추천

 

1. Atom : HTML 태그와 같은 가장 작은 단위의 컴포넌트
2. Molecule : atom을 여러 개 조합한 컴포넌트
3. Organism : Molecule과 Atom을 조합하여 만든 컴포넌트
4. Template : 컴포넌트들을 넣을 레이아웃 컴포넌트
5. Page : Template 위에 만든 컴포넌트를 다 넣어준 컴포넌트

장점	단점
컴포넌트 재사용성의 극대화	page부터 atom까지 많은 props drilling이 발생 -> 복잡한 상태관리로 개발 피로도 증가 ex. 전달하는 props 자료형이 변경되면 모든 컴포넌트의 매개변수 자료형을 변경해줘야 함
컴포넌트의 계층 구조를 알아보기 쉬우므로 설계 변경이 필요할 때 빠른 대처가 가능	컴포넌트가 적절하게 분리되지 않으면 컴포넌트의 복잡도가 높아져 유지보수가 어려움
디자인 요소가 재사용될 컴포넌트에 일괄로 적용되므로 style 적용 및 변경이 용이

 

여러 컴포넌트 설계론을 찾아보면서 현재 기획단계인 프로젝트에는 기획 및 디자인이 언제든 바뀔 수 있기 때문에  1단계와 2단계를 적절히 섞어서 만드는 것이 좋다고 판단되었다.