-
React-native 프로젝트 구성coding 2022. 8. 26. 00:12
계획은 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 왜 재사용을 하는가에 대해서 적어보려 합니다.
'coding' 카테고리의 다른 글
AWS Lambda에 라이브러리 올려서 사용하기 (0) 2022.09.05