[React] 폴더구조는 항상 고민..

dv_jamie 2023. 1. 6. 18:05

React를 시작할 때마다 항상 폴더 구조가 고민이다

새로운 프로젝트를 시작했는데, 역시나 또 여기서부터 막혔다

물론 이전 프로젝트들 그대로 해도 되지만 좀 더 편하고, 효율적인 방향으로 하고 싶었고,
다른 사람들은 어떻게 하는지 궁금하기도 했다

정답은 없다고 하지만, 누가 봐도 아 이런 폴더구나 알아볼 수 있는 정석적인 방법이 있지 않을까 싶었다

위와 같이 컴포넌트를 많이 쪼개지 않았다

src 폴더 아래 components, pages 2가지 폴더를 만들어서
pages 폴더에는 템플릿 용도로 파일들을 넣고, 모두 components 폴더에 넣었다

이렇게 하니 파일을 찾는 것 자체도 어려웠고, 한 파일에 코드도 길어져서 보기가 힘들었다

쪼갤 수 있는 부분을 더 쪼갰다!

src - page, components 까지는 동일했는데, components 폴더를 더 나누었다

그리고 이미지 같은 소스들을 담을 assets 폴더를 만들었다

components 폴더 내에 루트 단위로 폴더를 또 나누었고,
common 폴더에는 header, footer 같이 모든 페이지에서 공통으로 사용하는 것들을 넣었다

card UI 같은 작은 단위, card를 모아둔 container 단위가 한 폴더에 들어가는 것이 썩 맘에 들진 않았다

지금 프로젝트에서는 카드UI를 재사용할 일이 많을 것 같아서 컴포넌트를 더 쪼개고,
컴포넌트 위의 크기별로 폴더를 나누고 싶어서 여러 글들을 찾아봤다

아토믹(Atomic) 컴포넌트 디자인 개발 패턴

대형 프로젝트를 위한 코드 재사용 최적화 컴포넌트 관리법 | 대형 프로젝트에서는 최적화된 코드 재사용이 필수입니다. 이를 위해서 대두된 코드 디자인 패턴 중 하나는 바로 아토믹(Atomic) 디

brunch.co.kr

아토믹 디자인 패턴은 많이 찾아봤지만 와닿지 않았었는데 이 블로그가 예시 이미지까지 있어 이해가 가장 잘 됐다

components : Atoms(원자) < 분자(Molecules) < Organisms(유기체) < Templetes(템플릿)

알파벳 순서대로 딱 보기 좋게 정렬된다!

하지만 이렇게 나눌만큼 큰 프로젝트는 아니고, 많이 쪼갤수록 오히려 헷갈리고, 구현도 힘들어질 것 같았다

최종적으로는 이렇게 적용했다

위와 같이 처리하니 데이터를 받아오는 곳을 어디에서 처리해야하나 고민이 생겼다

필요한 파일마다 모두 데이터를 요청하고 받아오게 되면 디버깅 과정에서 혼란이 있을 것 같았고,
재사용성도 떨어지지 않을까..?

그래서 데이터 상태관리를 하는 부분은 pages 부분에서 처리하기로 했는데,
이렇게 하니 pages에서 하위 컴포넌트로 계속 props를 전달해야 했다
(pages -> template -> molecules -> ...)

이렇게 역할을 구분하는 게 혼선이 덜 해서 작업이 용이할 것 같긴 하지만,
계속해서 props를 내려주는 과정에서 문제가 있을 경우는 없을까 고민을 했다

다른 사람들은 어떤 식으로 적용했는지 찾아봤는데 아래 글이 유용했다

Atomic Design for React

리액트의 재사용가능한 컴포넌트를 위한 아키텍쳐

medium.com

이 팀에서도 모두 pages에서 관리하고 props로 전달을 해주는 방식을 사용했는데,
나와 같이 props를 내려주는 과정에서 실수가 있을 경우의 수를 고려하였다

이 문제는 typescript를 도입하여 props 타입을 강제함으로써 해결하였다고 한다

나는 시간적인 문제 때문에 지금 상황에서 ts를 도입하기 어려워서
위와 같은 방법은 적용하되, 그대로 js를 사용하기로 했다

나중엔 react로 개발할 때도 typescript를 사용해보아야겠다