[React🍇] 폴더 구조, 자주 쓰는 폴더명

 

이 포스팅에서는 React 폴더 구조 형식에서 대표적인 방법 두 가지, 자주 사용하는 폴더명, 실제 서비스 폴더 구조 예시 등을 대해 다룹니다.

💡 요약

1. 리액트 공식문서에서는 정확한 가이드를 제시하지 않는다.
2. 권장 사항은 딱 두개이다. 3번 혹은 4번 이상의 중첩을 피하기. 너무 깊게 생각하지 않기.
3. 사용되는 폴더 구조 중 인기있는 방법은 두 가지가 존재한다. 기능이나 라우트에 의한 분류와 유형에 의한 분류이다. 인기는 후자가 더 많다.

기능이나 라우트(페이지)에 따른 분류

라우트로 구분된 페이지 폴더 안에 같이 두는 방법이다. 페이지에 필요한 테스트 파일과 UI를 제작하여 한 폴더에 넣는다.

역할에 따른 분류

 

페이지가 아닌 역할에 따라 컴포넌트를 분리하는 것이다. 이 경우에는 컴포넌트 자체는 로직이 들어가있지 않은 UI 껍데기에 불과하다.

 

자주 쓰는 폴더 이름

 

 

• componets
  렌더링되는 페이지에서 사용되는 공통된 컴포넌트를 여기서 관리한다
  ex) Header, Footer, Nav

• page
  라우팅되는 실제 페이지이다.

• asset
  프로젝트에 사용할 이미지, 폰트, json 파일을 모어두는 곳이다.

• helper, utils
  자주 사용하는 로직을 재활용할 수 있도록 만든 Libary이다.

• hook
  React에서 자주 사용하는 로직을 재활용할 수 있도록 만든 Libary이다. 내부의 함수는 모드 이름 앞에 ‘use’를 붙이는 것이 특징이다

'

• api
  api 관련된 로직을 모두 모아둔 폴더다.

helper랑 hook은 왜 굳이 나눠서 쓸까?

helper은 옛날부터 어떤 프로젝트에서 암묵적으로 사용하는 방식이고 hook은 react에서 권장하는 방식이다.이고 정확히 react 공식 문서에서 Hook이라는 폴더를 만드세요! 라고 하지 않는다. 대신 공통된 로직을 뽑아서 자신만의 custom-hooks를 만드는 방법을 제시한다. custom-hook을 보관할 폴더가 필요하니 자연스럽게 hook이라는 폴더명이 굳어지게 된 것이이다

유명 사이트 폴더구조

리액트 공식문서 사이트다. 기본적으로 역할에 따라 폴더 분류했다. asset을 따로 두지 않고 image와 icons로 분리해서 관리하고 있다.

css 프레임워크인 tailwind 공식문서 사이트 폴더구조다. 이것도 기본적으로 역할에 따라 폴더를 분류했다. 다른 것보다 navs만 따로 폴더가 존재하는 게 특이하다.

velog 사이트 폴더구조이다. 이것도 역할에 따라 폴더를 분류했고 아토믹 디자인을 적용했다. atoms→ molecules→ organisms 구조가 components → modules → containers 와 비슷하다.

너무 깊게 생각하지 마세요

이제 막 프로젝트를 시작하는 단계라면 파일 구조를 선택하는 것에 있어서 5분 이상 시간을 투자하지 마세요. 앞서 살펴본 접근법 중에 아무거나 선택하고(혹은 자신만의 방법을 찾아내세요) 코드를 우선 작성해보세요.
-react 공식문서-

Analysis paralysis란 직역하면 분석 마비. 즉 과도하게 분석하고 생각해서 실제 일은 진행되지 않는 것을 뜻한다. 폴더 구조에 정답은 없다. 공식문서는 일단 프로젝트 시작부터하고 그 다음에 수정하는 것을 권장한다.