services vs hooks 용어 차이점
- services : 어디에서도 쓸 수 있는 기능 (리액트 컴포넌트 내에서, 일반 함수 내에서 등등)
- hooks : 리액트 함수형 컴포넌트 내에서만 사용될 수 있는 기능- https://medium.com/@techwithmuskan/best-folder-structure-for-react-native-project-c6d7dd6dd494 ← i18n 디렉토리가 특이함 * https://velog.io/@youngjjjjj/i18n과-l10n에-대해서
내가 생각하기에 가장 좋다고 생각하는 구조를 만들어 보았고, 아직까진 가장 만족도가 높았다.
navigatior → screen → components 순으로 논리적으로 쉽게 내가 찾고자하는 컴포넌트를 찾아갈 수도 있고, 관련 컴포넌트들이 상위 디렉토리를 통해 찢어져있지 않고 모여있기 때문에 로직/뷰 모두 한 폴더 내에 담겨있어서 수정도 편하다.
보기에도 깔끔하게 보임
src utils navigator screen 스크린명 스크린명 스크린명 UserMain.tsx index.tsx // import { BodyConditionList, AppHeader } from 'components/UserMain'; 하고 컴포넌트 조합하여 스크린 구성함. // 컴포넌트 간의 스타일은 스크린 컴포넌트에서 한다. components common Home userMain.tsx index.tsx use use compo compo screen명 screen명 index.tsx // export all components 컴포넌트1 index.tsx hooks index.ts useHook1.ts useHook2.ts subComponent1 subComponent2 subComponent3 컴포넌트2 컴포넌트3 UserMain index.tsx BodyConditionList index.tsx hooks Condition Group AppHeader 컴포넌트3
src utils navigator components // 글로벌로 공유되는 컴포넌트들 screens sharedThings // 애매하게 한두군데에서 겹치는 컴포넌트&훅 모음 components hooks utils 스크린명 index.tsx // 스크린 구현 컴포넌트1 index.tsx // 컴포넌트 구현 hooks utils // 해당 스크린에 종속되는 유틸들 constants.ts function1.ts function2.ts 컴포넌트2 index.tsx 컴포넌트3 index.tsx