✏️ React의 컴포넌트 폴더 구성은 어떻게 해야할까?

 

 

React를 공부하면서 컴포넌트 파일 구조는 어떻게 구성해야하는지 나름대로 정리를 해보았다.

내가 정리하는 것이 답은 아니고, 회사에서 어떻게 파일구조를 구성하느냐에 따라 다를 수 있지만

현재 공부하는 입장에서 어떻게 구상하고, 어떻게 정리해야하는지 나름대로 정리를 해보았다.

물론 꼭 이렇게 해야한다! 라고 하는 정답은 아니다!!

 

 

 

---

 

컴포넌트의 파일 구조

 

`components`: 공용 컴포넌트, 페이지 내 컴포넌트

`pages`: 라우팅 할당하는 페이지 컴포넌트 모아둔 곳

`assets`: 폴더에 쓰일 font, img 폴더가 들어간다.

`hooks`: 나를 포함한 팀원들이 만든 custon hook을 담아놓는 폴더, react-query를 사용한 hook은 따로 분리해서 모아 두어야 한다.

`utils`: 유틸함수들을 모아둔 폴더

`store`: redux를 정의해둔 폴더 / context를 사용중이면 context라고 해도 된다.

`lib`: assets, utils를 모아두는 용도 api

`routes`: 라우터 내용을 담아둔다.

`styles`: 전역스타일, 자주쓰이는 스타일을 담아둔다.

 

 

 

 

import * as 이름 from 파일경로명

 

`as`문법을 통해 이름을 임의로 설정할 수 있다.

이 내용은 이전 포스팅에 자세하게 볼 수 있다!!

 

 

---

 

 

이전 포스팅

✏️ export vs export-default