React-native 프로젝트 구성

계획은 AWS와 기본 네트워크에 대한 글을 첫 글로 작성하려 하였으나

지금의 업무가 React-Native 코드를 개발하고 있고 당장의 업무를 글로 남기는게 좋을듯하여

 

React-native 프로젝트 폴더 구성에 대해서 작성해보려 한다.

 

가장 좋은 방법은 이미 상용화 되어 있는 오픈소스 앱 여러개를 참고해서 나만의 구조를 만드는 것이다.

 

각 프로젝트들도 상황에 맞는 구조를 사용한것이며 정답이라기 보단 정답에 근접한 여러 케이스들을 볼 수 있다.

 

그 다음으로는 Common한 구조들을 몇가지 소개하는 글을 보고 따라 만들 수 있다.

 

https://www.reactnative.express/app/project_structure

 

이 글에서는 프로젝트 사이즈를 판단하고 거기에 맞는 몇가지 구조를 제시해 준다.

 

소규모 사이즈에서는 단일 폴더에서 컴포넌트 별로 관리를 한다. ( root 폴더에 두지 않는 것보단 낮지만 관리를 하고 있다고 생각하지 않는다)

 

하지만 hook, api, nav 가 붙는 프로젝트라면 미디움 사이즈 폴더 구조를 채택하는것이 관리, 디버깅에 좋아 보인다.

( 하나의 소스에 길게 늘어져 있으면 문제되는 지점을 찾기도 어렵고 한 가지의 기능만을 수행하는 식으로 함수를 만들면 그 해당하는 부분에 대해서만 확인하면 되기 때문이다.)

API : api 요청하는 소스들을 포함한다

Assets : 앱에서 사용하는 이미지 , 파일

Hooks : custom hook

reducer : 간단하게 말하자면 모든 컴포넌트에서 적합한 절차를 걸쳐 사용하는 전역변수이다.

Theme : 공유되는 색상이나 폰트

Utils : 문자열 포맷이나 기타 도구들

Screens : 한 화면을 통째로 가지는 컴포넌트

Components : 재사용성이 있는 컴포넌트 ( screens 에 있는것도 재사용이 아예 불가능한건 아닐수도 있다)

 

필자는 저 사진의 구조를 최대한 쓰되 screen 파일에 Css 를 넣어서 관리하는걸 별로 좋아하는 편이 아니여서

따로 styles 폴더를 빼서 CSS 전용으로 관리를 한다.

 

그리고 Cotianer Component , presantational component  두 가지에 대해서 설명을 하는데

Contianer 는 비즈니스 로직이 들어가고 , presantational 은 들어가지 않는 차이를 가지고 있다.

 

이는 확실히 구별 되어야 한다.

 

Container 에서 여러가지 처리를 거친 후 ex) TextInput

Props 로 presantational Components 에 던져주기 때문에 presantational Component는 독립적이여서 다른 곳에서도 사용을 할수가 있다.

 

오늘의 글은 이것으로 끝을 마치고 다음에는 Component 왜 재사용을 하는가에 대해서 적어보려 합니다.