REACT_FRONT_END 의 폴더구성

REACT 프로젝트를 진행 할 때 각 구성을잘 짜임새 있게 정리하는것이 중요하다.

핵심 구성 요소는

• Components : View에서 필요한 요소들의 파일을 관리하는 폴더이다.
• Containers: Controller의 성격을 띄는 파일을 관리하는 폴더이다.(각각의 Components에 비동기적 처리)
• Lib : 특별한 기능(DB연동, Auth처리...)의 파일을 관리하는 폴더이다.
• Page : Containers와 Component을 불러와서 라우팅된 페이지를 구성하는 폴더이다.
• Store : redux와 관련된 파일을 관리하는 폴더이다.
• Styles : 스타일을 담당하는 파일로 자주 쓰이는 스타일들을 관리하는 폴더이다.

 

Components

• App.js

  • Components 하위에 App.js를 파일을 통하여 각각의 Component을 불러오는 경로를 만들어준다.

• Switch, Route, react-router-dom

  • React-router-dom을 라이브러리를 통하여 해당 경로를 설정해준다.
  • 참고: https://reacttraining.com/react-router/web/api/Hooks

• common

  • header, footer, button, input 과 같은 공통요소들을 관리하는 폴더이다.

• 나머지 폴더

Editor 를 구성할 때 Header, Pane, Preview, Template 등 다양하게 구성할 수 있다. 그리고 handle 메서드를 이용하여 필요한 비동기 처리에 필요한 이벤트들을 설정해 줄 수 있다.

 

Containers

Containers는 Components와 거의 비슷한 구조로 되어 있어, Components에서 일어나는 비동기적 처리를 담당한다. 위 스샷처럼 componentDidMount()처럼 랜더링되는 시점이나 refresh되는 시점을 제어하여 화면에 호출되는 데이터들을 변경해 줄 수 있다. 주로 리덕스를 호출하여 데이터를 다룬다.

 

• connect

  • 이 함수는 리덕스의 store와 밀접한 관계를 맺고 있으면 bindActionCreator 메서드를 통하여 Redux에 저장된 내용을 불러오고 dispatch를 한다.

 

Lib

DB 연동과 RESTFUL API 호출을 메서드를 정의하는 것처럼 특별한 기능들의 파일을 관리하는 폴더이다.

Axios를 통하여 DB를 연동하였습니다.(자세한 내용은 따로 정리하겠습니다.)

 

pages

각각의 실제 단일 페이지를 구성하는 파일들을 관리하는 폴더입니다.

 

기능적인 구현보다는 단일 페이지에 구성되는 Component와 Containers을 조합하여 화면을 나타내는 것에 중점을 두고 파일들을 작성합니다.

 

Store

Redux에 동작에 필요한 파일들을 관리하는 폴더입니다.

base.js는 Session에 필요한 redux를 다루고 있습니다. 즉, 주로 Header와 Footer 처럼 모든 화면에 구성되는 부분을 담당합니다.

• redux의 핵심요소

  • Action types

    • 'list/GET_POST_LIST'와 같이 액션의 타입을 정의합니다. 주로 대문자로 사용합니다.

  • action creators

    • createAction 을 이용하여 해당 액션을 생성합니다. 생성할 때 reducer을 통하여 초기 설정 및 필요한 데이터들을 세팅합니다.

  • reducer

    • Pender 는 action 생성자를 편리하게 이용하기 위한 라이브러리함수입니다.
    • Action.payload를 통하여 API 호출된 데이터들을 가져옵니다.
    • 그밖에 fromJS, Map 등은 immutable.js를 이용하여 json을 보다 편리하게 이용하는 라이브러리 함수입니다.
    • initialState는 state의 초기값을 설정합니다.

 

Styles

 

스타일을 담당합니다.