React 02. CRA (Create-React-App) 및 폴더 구조

윤태현·2023년 6월 27일

React

REACT

목록 보기

2/20

📑 CRA

CRA (Create-React-App) 이란?

리액트 개발 환경을 쉽게 설정할 수 있도록 도와주는 도구
Babel, Webpack 등의 복잡한 설정 없이도 바로 리액트 프로젝트를 시작할 수 있음

📑 CRA 프로젝트 생성

1. create-react-app

npx create-react-app my-app

터미널에서 위의 명령어 실행
'my-app'이라는 이름의 새로운 리액트 프로젝트가 생성되고, 필요한 모든 종속성이 자동으로 설치

2. 프로젝트 시작

'my-app'이라는 이름의 폴더로 접근 cd my-app
로컬 서버 실행 npm start

3. 프로젝트 구조

3-1. 기본 폴더 구성

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
├── package.json
├── package-lock.json
├── README.md

'node_modules/' : 프로젝트에 필요한 npm 패키지들이 저장되는 디렉토리
'public/' : 정적 파일들이 위치하는 곳, index.html 파일은 전체 리액트 앱의 템플릿 역할을 함
'src/' : 리액트 앱의 실제 소스 코드가 저장되는 곳, 컴포넌트, 유틸리티 함수, 테스트 코드 등을 작성
'package.json' : 프로젝트에 대한 정보와 사용 중인 npm 패키지에 대한 정보를 담고 있음 package.json 파일만 있으면 터미널에서 npm install 시 node_module이 자동으로 설치 됨

3-2. 기타 폴더 구성

아래는 폴더 구조를 예시로 만든 것이다.

src/
├── components/
│   ├── Button.js
│   ├── InputField.js
│   └── Card.js
├── pages/
│   ├── Home.js
│   ├── About.js
│   └── Contact.js
├── assets/
│   ├── images/
│   ├── fonts/
│   └── icons/
├── styles/
│   ├── global.css
│   ├── home.css
│   └── about.css
├── hooks/
│   ├── useCustomHook1.js
│   └── useCustomHook2.js
├── utils/
│   ├── formatDate.js
│   ├── parseData.js
│   └── api.js
├── App.js
└── index.js

components/

재사용할 가능성이 있는 모든 리액트 컴포넌트를 저장

컴포넌트들은 대개 함수 형태를 가지며, 레이아웃, 버튼, 카드, 리스트 항목 등 다양한 UI 요소를 나타냄

각 컴포넌트는 재사용 가능해야 하므로, 내부의 상태를 최소화하고 props를 통해 데이터를 전달하는 것이 좋음

pages/

애플리케이션의 각 라우트 또는 페이지를 나타내는 컴포넌트를 저장하는 곳

각각의 페이지 레이아웃을 담당하며 종종 다른 컴포넌트들을 구성하고 조직하는 역할을 함

assets/

애플리케이션에서 사용하는 모든 정적 리소스를 저장

이미지, 아이콘, 로고, 폰트 등

각각의 리소스 유형에 따라 하위 폴더를 만들어서 리소스를 더욱 체계적으로 관리할 수 있음

이미지 파일들을 public에 직접 넣는 경우도 있지만 차이점은 컴파일 시에 필요한지 여부이다.

public 폴더 : favicon 등과 같이 index.html 내부에서 직접 사용하여 컴파일 시에 필요하지 않는 파일들을 넣음

assets 폴더 : 컴포넌트 내부에서 사용하는 이미지 파일 등을 넣음