늙은 병아리의 리액트 네이티브 어플리케이션 클라이언트 설계 도전 기록

이승훈·2023년 6월 3일

늙은 병아리인 이유는 나이는 늙었는데 개발 경력은 병아리 이기 때문이지.
뭘 안다고 설계를 하겠냐만은 일단 그래도 해야하니깐 한다.
어차피 해야할 일 열심히 해보고 뚜까 맞아보면서 배우련다.
주니어 프론트엔드 개발자 두명이서 진행하는 우당탕탕 설계 도전기

0. 들어가기 전에

스크린 구조 규칙

하나의 화면을 담당하는 OOScreen.js는 다수의 OOArea.js라는 영역을 담당하는 컴포넌트들로 구성되어 있다.
OOArea.js안에는 각각의 구성을 담당하는 OOSection.js라는 컴포넌트들로 구성되어 있다.
OOSection.js안에는 반복적으로 사용되는 컴포넌트들이 있거나 단일로 사용되는 컴포넌트들로 구성되어 있다.
각각의 OOScreen.js는 동일한 이름의 디렉토리안에 존재하며 해해당 스크린에서 필요한 Section과 util함수 및 hook들은 각각의 Screen을 담당하는 디렉토리안에 Hooks, Utils, Sections라는 이름의 디렉토리에 존재한다.
Sections 디렉토리안에는 OOSection.js 파일이 존재하며 Sections을 구성하는 각각의 컴포넌트들을 담당하는 디렉토리들이 존재한다.
이상적인 OOScreen.js 코드의 모습은 아래와 같으며 한눈에 보아도 스크린의 구조가 이해될 수 있는것을 목표로 한다.

  const OOScreen = () => {

  return(
	<View>
	    <Header />
    	<OneSection />
    	<TwoSection />
	    <ThreeSection />
	    <FourSection />
    </View>
  )
}

기타 규칙

모든 데이터 패칭은 useGetOO 이라는 형식의 이름으로 된 커스텀 훅 안에서 진행된다.
모든 데이터 뮤테이션은 usePostOO 이라는 형식의 이름으로 된 커스텀훅 안에서 진행된다.
스크린 중앙에서 발생해야하는 모달창은 useModal() 이라는 이름의 커스텀훅을 사용하며 useModal의 인자로 들어가는 컴포넌트가 스크린의 중앙에 위치하게 된다.

1. 일단 손으로 컴포넌트 구조 그려보기

전달받은 피그마 디자인을 사용하여 각각의 스크린에 대해 섹션을 구분하고 섹션안에 들어갈 컴포넌트들을 분리 하였다.

초록색으로 보이는 부분은 각각의 컴포넌트들이 받을 Props들을 사전에 정의해준 부분이다.

공통적으로 쓰이는 컴포넌트들은 빨간색으로 표시하여 추 후 알아보기 쉽도록 강조해주었다.

해당 단계에서는 데이터 패칭 혹은 커스텀훅을 어떤 파일에서 사용할지 (스크린에서 받아서 섹션으로 줄 지 아니면 그냥 컴포넌트 자체에서 데이터 패칭을 진행할 지) 같은 로지컬한 부분과 각각의 컴포넌트명 같은 상세한 부분에 대해서는 깊게 고려하지 않았으며 화면의 구성을 어떻게 나눌지에 대해서만 고민하고 작성하였다.

다행히 함께 진행하는 동료도 맥 유저였기에 Freeform을 사용하여 편리하게 작업물을 공유하고 의견을 주고받을 수 있었다.