react-native 프로젝트를 진행하면서 다른 프론트엔드 개발자(경력자)분들의 코드를 보는 기회가 많이 있다.
그러던 와중 궁금한 점이 발생되어 작성하는 오늘의 주제는
components folder와 view folder에 대한 고찰
발단. 프론트개발자가 2명인데, 구조가 2개?
우리 프로젝트는 나를 포함하여 프론트엔드 개발자가 3명인 있는 규모가 꽤 있는 프로젝트이다. 그리고 페이지 개발은 각 개발자가 파트를 나누어 진행하고 있다. 그러다보니 페이지의 일관성을 해치는 경우가 더러 발생하고 있는데, 그 중 한 가지에 대한 의문이 발생하게 된다.
case1 A개발자는 각 컴포넌트를 components에 넣고 index.js에 담아서 export 시키고, view폴더에서는 컴포넌트의 출력만을 보여준다.
case2 B개발자는 각 컴포넌트를 view에 componentNameView의 이름으로 넣고 components에서는 common component만 넣어둔다.
전개. C 개발자의 폴더구조는?
일단 C개발자인 나는 B개발자의 폴더구조를 따라서 코딩을 진행하고 있다. 이유는 B개발자와 협업을 통하여 같은 기능을 나누어 제작하고 있었기 때문이다. 그런데 두 방식에 따른 차이와, 어느방향이 좋을지에 대한 고찰이 필요한 시점인 듯 싶었다.
위기. 폴더 구조 파악하기
_tests_
테스트 코드 폴더
api
api와 관련 된 로직을 정의해놓은 폴더
assets
프로젝트에 사용되는 이미지, 폰트 등이 들어가 있는 폴더
components
기능적 요소를 담당하는 폴더
하위에 각 페이지별 이름으로 나누어서 구성되어있음
screen
페이지를 모아주는 역할을 하는 폴더
하위에 view, router폴더로 구성되어 있음
stores
전역상태 라이브러리인 zustand를 정의해놓은 폴더
type
별도의 타입이 필요한 경우 타입을 정의해놓은 폴더
절정. 어떤 구성이 더 좋은건데? - 각각의 장단점
case1
장점. 각 컴포넌트들이 한 가지의 기능을 하고 index.js를 통해 export하고 있으므로 필요한 컴포넌트를 꺼내쓰기 편리함
단점. 컴포넌트의 재사용이 가능한지 여부를 찾아서 common으로 관리가 필요해보임.
case2
장점. 공통 기능의 컴포넌트가 components폴더에 모여있어 필요 시 import해서 사용할 수 있음.
단점. 그 외의 단일페이지 컴포넌트가 view라는 이름으로 view폴더에 모여있어서 기능적인 부분을 재사용 할 때 중복코드가 발생할 수 있음.
결말. 우리는 components/common 이 필요해
이렇게 폴더 구조를 뜯어보니 우리는 통일이 필요하다는 생각이 들었다.
components/common 를 만들어서 기능적인 부분을 원자화 한 다음에 재사용성을 늘리면 프로젝트의 완성도가 올라갈 것 같다.
react 공식문서에 파일구조에 대한 이야기가 있다.
https://ko.legacy.reactjs.org/docs/faq-structure.html
결론
너무 깊게 생각하지 마세요
그래 일단, 코드를 구성하고 common폴더를 추가하자는 의견을 내보자.
