[React 적용] create-react-app으로 첫 프로젝트 생성

개요

간단하게 React에 대해 알아봤고, 이제 하나하나씩 적용해보면서 어떻게 웹페이지를 만들어야 하는지에 대해 알아볼 것이다.

리액트를 사용해 프로젝트를 시작하는 방법은 다양한데, 오늘은 create-react-app을 통해 만드는 것을 정리해보겠다.

 

앞으로의 학습은

현장에서 바로 써먹는 리액트 with 타입스크립트

이 도서를 중점으로 해서 할 계획이다.

 

1. create-react-app

React 애플리케이션을 쉽고 빠르게 설정할 수 있도록 도와주는 페이스북에서 만든 CLI 툴이다.

Webpack이나 Babel 등의 설정 없이 즉시 React 프로젝트를 생성할 수 있고, 개발 서버, 빌드 시스템, ESLint, Jest 등의 도구가 기본적으로 포함되어 있다.

 

* Webpack

-> JavaScript 애플리케이션의 모듈 번들러로, 여러 개의 파일을 하나의 번들로 묶어주는 역할을 한다.

-> 코드 분할, 이미지 및 CSS 처리 등 다양한 최적화 기능을 활용할 수 있다.

 

* Babel

-> 최신 JavaScript(ES6+) 코드를 구형 브라우저에서도 실행할 수 있도록 변환하는 트랜스파일러이다.

-> JSX 문법을 일반 JavaScript로 변환하는 기능도 포함하고 있다.

 

즉, create-react-app을 통해 우리는 Webpack과 Babel을 별도로 구성할 필요가 없다!

 

2. 설치 및 프로젝트 실행

2-1. create-react-app 설치

VS Code 터미널에 다음과 같이 입력해 create-react-app을 설치한다.

npm install -g create-react-app

 

2-2. 프로젝트 생성

npx create-react-app my-app

 

위와 같이 입력하게 되면 my-app 이라는 프로젝트가 생성된다.

 

* npx란?

-> npm 패키지를 일시적으로 실행할 수 있는 도구이다.

-> npm = 패키지 설치

-> npx = npm을 통해 설치한 패키지를 실행할 때 사용

 

2-3. 프로젝트 실행

다음으로 프로젝트를 실행해준다.

cd my-app
npm start

 

 

 

그럼 브라우저에 다음과 같은 웹사이트 화면이 나타나게 된다.

이때, 기본적으로 http://localhost:3000 에서 애플리케이션이 실행된다.

 

2-4. 타입스크립트 템플릿 사용하기(선택)

npx create-react-app my-app --template typescript

 

3. 프로젝트 폴더 구조

 

my-app/
├── node_modules/   # 프로젝트 의존성 패키지
├── public/         # 정적 파일 (index.html 등)
├── src/            # 주요 React 코드 (컴포넌트, 스타일 등)
│   ├── App.css
│   ├── App.js      # 메인 React 컴포넌트
│   ├── App.test.js
│   ├── reportWebvitals.js
│   ├── setupTests.js
│   ├── index.js    # React 진입점
│   ├── App.css     # 기본 스타일 파일
│   ├── index.css   # 전역 스타일 파일
├── .gitignore      # Git에 포함되지 않을 파일 목록
├── package.json    # 프로젝트 메타 정보 및 의존성 목록
├── README.md       # 프로젝트 설명
└── yarn.lock or package-lock.json # 패키지 버전 관리 파일

 

위와 같은 구조가 나오게 된다!

 

: public

-> HTML 파일과 favicon 등 정적인 파일이 담겨 있다.

-> index.html의 경우 기본적인 html

 

: src

-> 자바스크립트 파일들을 보관하고 있다.

 

# index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

index.js에 위의 코드와 같은 내용이 있는데

저 root라는 id를 가진 <div> 태그가 index.html에 있고, 그 안에 리액트 애플리케이션을 삽입하는 코드이다.

 

1) 즉, document.getElementById('root')를 통해 HTML의 요소를 찾는다.

2) ReactDOM.createRoot를 통해 리액트 프로젝트를 생성한다.

3) render 함수를 통해 root 요소에 <App />이라는 컴포넌트를 표시한다.

 

# reportWebVitals.js

-> 리액트의 성능을 측정하기 위해 제공되는 파일이다.

 

# setupTest.js

-> 리액트 프로젝트를 테스트하는 데 필요한 설정 파일이다.

 

: package.json

-> 리액트 애플리케이션 개발에 필요한 라이브러리들이나 프로젝트에서 사용하는 명령어 스크립트 등을 관리하는 파일이다.