재사용성을 위한 컴포넌트 구조

일단 앱 정보를 저장하는 AppContext와 테마 정보를 저장하는 ThemeContext로 분리했고 react-query로 요청받은 각각의 페이지들의 정보는 PageContext에 기록되게끔 짜고 있다. 

 

재사용이 가능한 components는 그 용도과 규모에 따라 atoms, modules, pages로 나눴다. 개별 state를 가지지 않고 표현 위주의 컴포넌트는 atoms, (예를들면 Button, Image, Icon, Input, Link 등등), atoms끼리 결합하고 개별 state를 가지는 컴포넌트는 modules (Form, TabBar, NavBar, InputField 등등) 그외 하나의 페이지를 담당하는 컴포넌트는 pages 폴더로 구분했다.

 

각각의 컴포넌트는 별개의 폴더를 가진다. 각각의 캄포넌트는 각각 자신의 template.js를 가지도록 구성해서 로직을 담당하는 코드와 뷰를 담당하는 코드를 구분했다. (test 코드 파일이나 storybook 파일 역시 여기에 넣을 예정이다.) 만약 해당 컴포넌트가 자신만의 자식 컴포넌트를 가진다면 이는 하위 components 폴더 안에 배치된다. 만약 해당 컴포넌트가 여러개의 구분되는 용도를 가진다면 이는 variants 폴더 안에 배치된다.

 

모든 공용 컴포넌트는 재사용을 위한 것으로 특정 앱에 종속되지 않도록 네이밍하며 만약 특정 앱에 종속되는 기능이 필요할 경우  apps 내 각 앱 내 폴더 내에 작성되어야 한다.