💎 개요
React 프로젝트를 시작함에 있어서 폴더의 구조들을 정리할 필요가 있다고 생각하였다. 이말은 내가 코드를 작성할때에 다양한 jsx 파일들과 css 파일들과 이미지, 폰트 파일 등 잡다 한 것이 src에 한번에 들어갔는데, 항상 코드는 재사용성을 고려하는 것이 좋기 때문이다!!
따라서 프로젝트를 구성할 때에 좀더 효과적인 폴더 구성 및 어떻게 하면 좀더 재사용성이 가능한 코드들을 불러오고 컴포넌트화 시킬 수 있을지 고민해보는 게시글이 될 것 같다.
🍫 참고자료
👉 리액트 공식 문서 (바로가기)
💎 React의 폴더 구조
🍫 기본 폴더 구조
처음 React 프로젝트를 생성하게 된다면 주로 다음과 같은 폴더 구조를 얻을 수 있을 것이다.
-build
-node_modules
-public
-src이러한 폴더 구조에서 우리는 코드를 작성하게 되고 주로 거의 src에서 코드를 작성한 후 이를 public 폴더의 html 파일로 화면에 렌더링을 시키는 것이다.
따라서 큰 틀에서는 이러한 폴더 구조이지만 우리가 코드를 src 내부에서 작성하기에 이 src 폴더 안에서 재사용성을 높이고 가독성을 높일 수 있는 컴포넌트들로 구성하여 코드를 작성해야한다.
🍫 components
공통으로 사용될 수 있는 componente들을 관리하는 폴더이다!
이 폴더에서는 우리가 공통적으로 사용하는 component들을 관리하면서 여러가지 페이지에 렌더링 될 수 있는 컴포넌트들을 재사용 가능하게 정리해둘 수 있다.
따라서 pages폴더와 마찬가지로 컴포넌트들의 가독성이 좋기 위해서는 반드시 잘 정리할 필요가 있는 폴더이다!!
- components
- Auth
- button.jsx
- header.jsx
- Todo
- button.jsx
- header.jsx
- input.jsx여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리하는 점을 잊지말고 잘 적용시키도록 해보자.
🍫 pages
페이지 단위의 컴포넌트를 폴더로 구성한다.
이는 우리가 프로젝트를 개발할 때에 screen들, 어떤 특정 화면에 위치하였을 때 렌더링 될 코드를 올려둔다.
- pages
- Login
- Login.jsx
- Login.module.css
- Main
- Main.jsx
- Main.module.css주의할 점은 가급적이면 특정 페이지에서만 사용되는 컴포넌트는 components 폴더로 분리하기 보다 그냥 해당 페이지 폴더의 하위 폴더에서 관리하는 것이 좋을 것 같다!
🍫 assets
앞서서는 코드를 작성하여 렌더링하기 위한 컴포넌트들을 정리하였다면, assets폴더에서는 말 그대로 프로젝트의 자산들을 관리하는 폴더이다.
이 안에는 폰트, 이미지, 동영상, json 등 다양한 파일들을 저장하여 프로젝트에서 사용할 수 있도록 저장시키는 폴더이다.
- assets
- font
- 폰트입니다.otf
- 폰트2입니다.ttf
- images
- guide
- guide1.svg
- guide2.svg
- guide3.svg🍫 apis
http 요청들을 관리하여 구분한 폴더이다.
우리가 get, post등의 요청을 보낼 때에 작성되는 코드들을 재사용가능하게 적용시킨 것이다! 주로 응답을 반환하도록 해두면 우리가 어떤 요청을 받았을 때에 그 값이 잘 저장될 수 있도록 적용할 수 있다!! 통신 과정이 불필요한 곳에서 사용되지 않았는지 점검하기에도 편리하기에 구분할 필요가 있는 폴더인 것 같다!
🍫 hooks
custom hook들을 담아 놓은 폴더이다.
useState, useEffect, useRef 등 다양한 react-hook의 기능들을 정리하여 컴포넌트 처럼 분리시킨 후 폴더에 정리해두는 것이다. 다만 내 생각에는 이게 너무 많아질 수 있다보니깐 각 페이지에 적절하게 나누어서 hooks의 하위 폴더를 만들어 두는 것이 좋을 것 같다고 생각이 든다.
🍫 store
context라고 폴더명을 바꿔서 사용해도 되는 context-api를 사용할때에 정리해두는 폴더이다.
주로 redux 같이 전역 상태 관리 라이브러리를 사용할 때에 파일들을 정리해보면 좋을 것 같다. 나는 아직 context-api를 제대로 쓴 경험이 없다보니...추후에 Next.js를 사용할 때에 같이 사용해보고 게시글로 정리해 볼 예정이다!!
💎 고민
이렇게 React 프로젝트를 생성하고 프로젝트를 공부하고 개발하는데에 있어서 어떤 식으로 폴더 구조를 짜야할지 고민해보았다. 사실 이외에도 다양하게 정리할 수 있을텐데 아직 부족해서 제대로 적용시켜보지 못한 폴더 구조가 많다... 좀더 가독성을 높일 수 있도록 해야할 것 같다!!
앞으로 React이외에 다른 프레임워크를 사용할때에도 이런 식으로 꼭 폴더 구조를 짜는 것은 중요할 것 같다. 하지만 더 중요한 것은 짜는 사람의 입장에서 먼저 폴더 구조를 잘 정립하는 것이라고 생각한다. 너무 복잡하게 생각하지 말구 차근차근 컴포넌트화시킨 후에 그 기능에 따라서 알맞은 폴더에서 불러와 화면에 배치할 수 있도록 하자!!
화이팅~~!!
