(React) React 폴더 구조와 export default & export

React의 폴더 역할을 자주 쓰이는 범위에서 알아본다.

 

1. assets : 에셋, 이미지, font 등의 파일들
2. common
   1. utils : 자주 쓰이는 함수들
   2. axios : axios 설정 ( 서버 통신용. 헤더 설정 등 )
3. components : 자주 쓰이는 공용 컴포넌트, 페이지 내의 컴포넌트 등 컴포넌트의 집합
4. config : 설정 파일을 넣어놓습니다. ( firebase 등 ) .env로 환경변수를 만드시는 것도 좋은 선택입니다.
5. pages : 라우트에 할당되는 페이지 컴포넌트들의 집합입니다.
6. routes : 라우터를 담아놓습니다. 로그인 전처리, 로딩 등을 쉽게 접근할 수 있습니다.
7. styles : 전역 스타일, 자주 쓰이는 스타일 등을 담아놓을 수 있습니다.
8. tests : 테스트를 담아놓는 입니다. 기본인 Jest를 사용할 수도, storybook 같은 다른 모듈도 가능합니다.

프로젝트를 진행하면서 componets와 pages의 정확한 차이를 파악하기 어려워서 늘 의구심이었다.

컴포넌트가 여러 개 일 수도 있고 그 컴포넌트를 pages에서 더 큰 구조로 엮어서 화면에 출력해 주는 역할을 하는 거 같다.

그런데 단순하게 pages가 컴포넌트의 여러개의 구성이라고 생각한다면 components 파일들 자체도 여러개의 컴포넌트로 구성이 될 수 있기 때문에 차이가 불명확해 보일 수 있다.

 

하지만 pages에서는 단순히 컴포넌트들을 모아놓은 것이 아니라.

{ Switch, Route } 와 같은 리액트 라우터 돔의 컴포넌트를 사용해서 컴포넌트를 브라우저 페이지 별로 분기하는 역할을 하는 것을 알 수 있다.

 

import와 export의 양식 또한 늘 궁금했던 부분이다.

import 할 때 어떤 경우에는 {   } 안에 넣어서 받고 그냥 변수 하나로 받는 경우도 있다.

 

자주 쓰는 방식은 아래와 같다.

 

export const 컴포넌트 = ( ) => { return <></>}

import { 객체 } from 위치

 

그 밖에 경우는 아래와 같다.

 

export { 객체 }

import { 객체 } from 위치

 

export default 객체

import { default as 객체 } from 위치

import 객체 from 위치 (만일 export default가 아닌 export 객체 이면 import 객체 from 위치로 임포트 하면 에러 발생)

 

 

 

참고: https://hyogeun-android.tistory.com/entry/7-React-파일-구조-import-export