React 디자인패턴

1. Data 관점

1. MVC

• 제작시기 : 1979.12.10
• 제작회사 : XEROX PARC
• 제작 목적 : MVC의 기본 목적은 사용자의 멘털 모델과 컴퓨터에 존재하는 디지털 모델 간의 차이를 연결하는 것입니다.
• 특징
  • ModelViewController로 구성됩니다.
  • Model : 순수 데이터 모음입니다.
  • View : 시각적 요소로 Model에 데이터를 요청합니다.
  • Controller : 사용자와의 상호작용을 담당합니다.

2. MVVM

• 제작시기 : 2005.10.08
• 제작회사 : Microsoft
• 제작 목적 : MVC를 현대 UI 개발 플랫폼에 맞게 제작됐습니다.
• 특징
  • ModelViewViewModel로 구성됩니다.
  • Model, View : MVC에서와 동일합니다.
  • ViewModel : Controller에서 좀 더 UI 측면으로 발전했습니다.

3. MVP

• 제작시기 : 2011.06.01
• 제작회사 : Taligent
• 제작 목적 : 기본 MVC 개념을 구성 요소로 분해하고 더욱 세분화하여 프로그래머가 보다 복잡한 애플리케이션을 개발하는 데 도움을 주어 이해하기 쉬운 설계 방법을 제공하기 위해 제작했습니다.
• 특징
  • ModelViewPresenter로 구성됩니다.
  • 데이터 관리
    • Model : 캡슐화된 데이터 읽기, 쓰기 및 액세스 방법입니다.
    • Selection : Model 데이터의 여러 하위 세트를 지정하기 위한 추상화 합니다.
    • Command : Model의 Selection에서 수행할 수 있는 작업을 나타내는 추상화 합니다.
  • 사용자 인터페이스
    • View : 데이터를 표시합니다.
    • Interactor : 이벤트에 따른 데이터의 변경 사항을 요청합니다.
    • Presenter : Interactor에 따른 적절한 Command를 매핑합니다.

4. Flux

• 제작시기 : 2014.04.30
• 제작회사 : Meta(Facebook)
• 제작 목적 : 대형 MVC 애플리케이션에서 나타나는 데이터 간의 의존성과 연쇄적인 갱신에서 발생되는 예측하기 힘든 데이터 흐름을 올바르게 다루기 위해 제작됐습니다.
• 특징
  • Actions, Dispatcher, Stores, Views로 구성되며 각 부분들은 단방향으로만 데이터가 흐르게 됩니다.
  • Action : 사용자의 상호작용과 서버 상호작용 등이 될 수 있으며 type 프로퍼티에 역할을 지정됩니다.
  • Dispatcher : 모든 Action을 받으며, Stores가 콜백들 등록할 수 있습니다.
  • Stores : 데이터와 비즈니스 로직을 담당하고 Views가 변경 감시를 할 수 있도록 제공합니다.
  • Controller-Views-Views 형태를 이루고, Store에게 데이터를 가져와 View를 갱신됩니다.

2. UI 관점

1. Presentation Component - Container Component

• 리액트에 있어 가장 기본적인 디자인 패턴입니다.
• Container Component : 데이터 처리를 담당합니다.
• Presentation Component : 데이터 출력을 담당합니다.
• 이 패턴을 사용할 경우 폴더 구조는 주로 아래와 같이 구성됩니다.
  - src
     |- components
     |- containers
• 지금은 거의 사용되지 않는 패턴입니다.

2. Custom hook

• 기존 Presentation Component - Container Component의 Container의 로직만 hooks로 관리하는 방법입니다.
• 이 방법의 장점은 UI와 로직으로 구분되기 때문에 UI, 로직 모두 재사용하기 유용해집니다.
• 이 패턴을 사용할 경우 폴더 구조는 아래와 같이 구성됩니다.
  - src
     |- components
     |- hooks
• 이 방법은 지금도 보편화되어 많이 사용되고 있는 방법입니다.

3. Atomic

• 기존 Components를 좀 더 세밀화해서 사용하는 방법입니다.
• Atoms : 가장 작은 단위의 컴포넌트입니다. (label, p, span 등)
• Molecule : Atom을 여러 개 조합한 컴포넌트입니다.
• Oraganisms : Molecule과 Atom들을 조합하여 만든 컴포넌트입니다.
• Templates : Molecule과 Atom들을 조합해 넣을 레이아웃 컴포넌트입니다.
• Pages : Templates에 Oraganisms, Molecule, Atom들을 조합한 컴포넌트입니다.
• UI의 재사용성이 압도적으로 뛰어나 협업 프로젝트에서 빠르게 UI를 개발할 수 있는 방식입니다.
• 단점
  • 초기 구축 시간이 많이 듭니다.
  • page 단위에서 state을 props로 내려줘야 되기 때문에 props의 깊이가 깊어집니다.
  • 디자인이 자주 변경되는 경우 안 하니만 못한 일이 될 수 있습니다.

3. 개인적 사용법

위의 방법들이 전통적으로 그리고 React적으로 많이 사용하는 디자인 패턴들입니다.

나의 경우에는 요즘 많이 사용하는 custom hooks와 flux, atomic방식을 조합해서 사용하는 편입니다.

 

외부 서버와의 연동의 경우 react-hook을 사용한 custom hook을 이용하고, global state의 경우 flux 패턴을 활용합니다. 그리고 UI의 경우 Atomic 구조를 모두 살리기는 과하다는 생각에 Atoms(가장 작은 단위), Components(Atoms 조합), Templates(공통으로 사용하는 레이아웃), Pages(실제 View UI) 정도만을 사용하고 있습니다.

 

대부분의 경우 필자처럼 어느 한 방법을 선택해서 사용하지 않고 다양한 방법을 조합해 사용하는 편이기 때문에 이 글을 읽는 사람들 역시 자신에게 맞는 또는 협업하는 팀에 맞는 방법으로 조합해서 사용하길 바랍니다.