React JS — Architecture + Folder Structure

해당글은 2021년 7월 15일에 작성되었으며, 개인 프로젝트를 위한 React의 전반적인 구조에 대한 글입니다. 이거처럼 하지 마세요!

그림-1 react Architecture 구성요소

 

리액트 아키텍처를 생각해보면 폴더구조, API 통신, 페이지 라우터, redux와 redux 미들웨어등을 어떻게 해야될지 고민하게 됩니다. 이번 글은 프로젝트 폴더 구조를 중점으로 3개의 섹션을 나누어 조사한것을 공유 합니다.

Section-1 프로젝트 환경 설정

다음 표는 제가 React를 개발하면서 이용한 개발 툴입니다. 개발툴 선택은 개인의 취향에 맞게 사용하면 되지만 React에서도 권장하는 사항이므로 추천합니다.

Section-2 프로젝트 구조

그림-2 react-clean-blog 폴더 구조

/src/assets

• 정적 데이터 관리 폴더

/src/components

• 공용 또는 전체적으로 사용되는 컴포넌트는 이곳에서 관리합니다.
• 목적에 맞는 폴더이름 생성후 index.js 파일을 만들어 자동으로 파일을 찾아가도록 합니다. ex) import Footer from “../components/Footer”;

/src/pages

• react-router의 path와 동일한 이름을 갖는 컴포넌트들을 관리합니다. page를 사용자 도메인에 맞춰서 관리하게 되면 전체적인 프로젝트 구조를 한눈에 알아보기 쉽고, 해당 페이지의 문제되는 코드까지 이동하는 시간을 단축 할 수 있습니다.
• 각 페이지의 스타일을 관리하는 css, style-component 해당 폴더에 넣어줍니다.

/src/redux

• react-redux와 관련 된것은 이곳에서 관리합니다. action과 reducer 코드는 분할하여 하위폴더인 actions와 reducers에서 관리할 예정입니다.. (현 프로젝트는 구분이 안되어있습니다.)

/src/router

• react-router와 관련된 코드를 관리합니다. 현재는 공용 라우터밖에 없지만 앞으로 인증라우터 처럼 다양한 접근 권한 처리를 관리할 것입니다.

/src/services (현재 미구현)

• http 통신 API를 관리 합니다. axios

/src/utils (현재 미구현)

• 공용으로 쓰이는 함수를 관리합니다. (formater, 끝 3자리 별표처리)

/src/hooks (현재 미구현)

• 커스텀 hook 을 관리합니다.

Section-3 프로젝트 규칙 제안

1. 단일 책임 원칙
   • 하나의 컴포넌트 또는 함수는 하나의 기능만 합니다.
   • 많은 코드 리뷰 필요
   • 중복 코드 제거
2. 팀원과 약속된 코드, 네이밍 규칙 생성 ( 좋은 사례로 에어앤비 react code style guide 있음 )
   
   • ex) 직접적인 DOM event 반응과 연관된 함수는 함수명 앞에 on을 붙힙니다.
   • ex) UI의 상태값을 체크하는 state 이름 앞에는 is를 붙힙니다.
   • ex) 컴포넌트의 앞 글자는 대문자로 시작합니다.
3. import 순서 정하기

느낀점

• Container-Presentational 패턴을 써야될까?react가 functional component가 강조되고 hook을 사용하게 되면서 Container에서 props와 state를 관리하고 Presentational은 Container에서 보낸 데이터를 사용자 화면에 매핑하는 방식이 의미가 없어졌습니다. 이 논점은 Dan abramov도 인정했습니다. 그래서 예시로 작성한 프로젝트 구조도 Container와 Presentation구분 없이 하나의 파일안에 redux, props, state를 hook으로 관리하고 DOM에 데이터를 매핑합니다.
• Container-Presentational 패턴을 쓰지 않는다면 어떻게 해야될까?아직까지는 해당 논점들만 거론되고 공식적인 글은 찾지 못했다. 하지만 2020 react structure best practices의 많은 블로그 글들을 읽어보면 예제 프로젝트의 구조 형태를 많이 추천하고 있습니다.
• 데이터 흐름을 어떻게 관리 해야될까?현 프로젝트에서는 임의로 목데이터를 이용해 페이지가 작동하게 되었지만 실무에서는 실제 데이터를 서버에서 받아올 것입니다. 서버에서 받아오는 데이터들을 react 라이프 사이클에 맞춰 사용 흐름에 거리낌 없는 프로젝트를 구사 하는것이 좋은 프로젝트의 요소중의 하나라고 생각합니다. 이러한 생각을 뒷받침한 탄력적인 리액트에 대한 Dan abramov의 글을 참조합니다.

참조 글

• https://www.robinwieruch.de/react-folder-structure (git 팔로워 5.7k, React Book, Redux Book 등 IT 도서 출간)
• https://github.com/airbnb/javascript/tree/master/react (에어엔비 공식 git)
• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0(리액트 공식 문서 저자)
• https://overreacted.io/writing-resilient-components/ (Dan abramov 탄력적인 리액트 )