[디자인 패턴] react-native 디자인 패턴

주연쓰·2022년 12월 12일

프로젝트 초기 세팅을 하며 디렉토리 구조를 고민하던 중, 디자인 패턴에 대해 공부한 내용과 현재 프로젝트에 맞게 두가지 패턴을 섞어서 구성한 디렉토리 구조에 대한 소개

요점

뷰, 뷰 로직 <-> 비즈니스 로직의 분리
뷰: React 컴포넌트에서 반환하는 JSX 및 기타 CSS 관련 코드
뷰 로직: isLoading, errorText와 같은 UI/UX 개선을 위한 코드
비즈니스 로직: API Call, 데이터 가공 및 저장 로직
재사용성에 중점을 두어 비즈니스 논리 / 뷰 + 뷰 논리 로 분리 --> customed hooks design
재사용성에 중점을 두어 최소단위들로 분리 --> atomic design

1장. 디자인 패턴

1. atomic design (아토믹 디자인)

(1) 설명

모든 것은 atom(원자)으로 구성되어있고 atom(원자)들이 서로 결합하여 molecule(분자)이 되고, molecule는 더 복잡한 organism(유기체)으로 결합하여 궁극적으로 모든 물질을 생성. 재사용성을 최대화

(2) 구조

<1> atom (원자)

더 이상 분해할 수 없는 기본 컴포넌트
앞으로 만들 상위 컴포넌트에 재사용해야 하기 때문에 가장 작고, 미니멀하게 제작
label, input, button과 같이 기본 HTML element 태그 혹은 글꼴, 애니메이션, 컬러 팔레트, 레이아웃과 같이 추상적인 요소도 포함될 수 있음
atom은 모든 기본 스타일을 한눈에 보여주므로 디자인 시스템을 개발할 때 유용하게 사용됨
이것을 단일 컴포넌트로 사용하기엔 어려운 경우가 있음. 들어 레이아웃과 같은 atom 그 자체로는 실제 페이지에서 바로 사용하기에 유용하지 않을 수 있음
atom을 다른 atom과 결합한 molecule 혹은 organism 단위에서 여러 단위와 결합하여 유용하게 사용될 수 있음

<2> molecule (분자)

여러 개의 atom을 결합하여 자신의 고유한 특성을 가짐
molecule의 중요한 점은 한 가지 기능을 하는 것
예를 들어, 버튼과 텍스트입력 원자를 결합해 '입력창' 분자를 만들 수 있음
입력 폼, 내비게이션, 카드 등

<3> organism (유기체)

앞 단계보다 좀 더 복잡하고, 서비스에서 표현될 수 있는 명확한 영역과 특정 컨텍스트를 가짐
특정 페이지에서만 사용 될 수도 있음
atom, molecule, organism으로 구성할 수 있음
atom, molecule에 비해 좀 더 구체적으로 표현되고 컨텍스트를 가지기 때문에 상대적으로 재사용성이 낮아지는 특성

<4> template (템플릿)

page를 만들 수 있도록 여러 개의 organism, molecule로 구성
실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임
실제 콘텐츠가 없는 page 수준의 스켈레톤

<5> pages (페이지)

유저가 볼 수 있는 실제 콘텐츠를 담고 있음
template의 인스턴스

(3) 장점

재사용성이 높아짐

(4) 단점

선형으로 진행되는 구조가 아니기 때문에, (필요에 따라 단계를 건너뛰거나 합치기도 함) 어느 파일에 위치하는지 헷갈릴 수 있음.

도메인 별로 구별하기가 어려움

(5) 현재 프로젝트에서의 해결법

어떤 도메인에서도 재사용 할 수 있는 atom 과 molecule은 각각 하나의 폴더로 관리한다. (모든 도메인의 atom, molecule을 하나의 파일에 둠)
orgamism과 template, pages 는 각 폴더 내에 도메인 별로 폴더를 하나씩 생성하여 해당 폴더 내의 컴포넌트들은 그 도메인에서만 사용될 수 있도록 한다.
서로 다른 도메인 간에 재사용되는 organism, template가 있다면 일단은 복사하여 해당 도메인폴더 내로 붙여넣기 (중복되는 컴포넌트가 너무 많은 경우 common 디렉토리 생성하여 그 안에 넣을 예정)

2. customed-hook (커스텀 훅 디자인)

(1) 설명

개발자가 스스로 디자인한 훅
코드 로직의 반복을 최소화하고 재사용을 극대화, 한눈에 보기 쉬운 코드를 만들기 위해
반드시 use로 시작해야 함 (useConnect, useInput 등..)
공식문서 참고 : https://reactjs.org/docs/hooks-custom.html

2장. 디렉토리 구조

|-api					>api 관련 파일들
|-assets				> 정적 요소들
	|-fonts
    |-icons
    |-images
|-utils					> 전역 함수들
	|-Colors.js			> 색상 정의 파일
    |- ...
--------여기부터 atomic 기반--------
--------비즈니스 로직과 뷰를 분리--------
--------최대한 스타일은 이전 단계에서 적용해놓기--------
|-atoms					> atom-design 원자
	|-buttons
    	|-MainButton.js
        |-SendButton.js
        |- ...
	|-texts
        |-Text16B.js
        |-Text16M.js
        |-Text32B.js
        |- ...
|-components			> atom-design 분자 + 유기체 (원자들로 구성 / 재사용이 높은 컴포넌트들 / 도메인별로 폴더 구분하지 않음)
	|-card
    	|-FeedCard.js
        |-LogCard.js
        |- ...
    |-input
    	|-NumberInput.js
        |- ...
    |-list
    	|-FeedList.js
        |- PlaceList.js
        |- ...
        
|-templates				> atom-design 템플릿 (비즈니스 로직 없는 UI 뷰만 표시 / 해당 도메인에서만 사용되는 작은 컴포넌트 들 또는 전체 페이지의 UI 구조)
	|-main				> 도메인별 폴더
    |-setting
    |-search
    	|- 
    |-feed
    |-visit
    | ...
|-pages					> atom-design 페이지 (템플릿 + 비즈니스 로직)
	|-main				> 도메인별 폴더
    |-setting
    |-search
    |-feed
    |-visit
    | ...
|-hooks					> 비즈니스 로직 중 hook들
	|-useAddLog.js		>도메인에 상관없이 개별 hook 파일들
    |-useDeleteLog.js
|-

참고 링크
https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/
https://brunch.co.kr/@skykamja24/580
https://blog.leehov.in/57?category=951478