Create React App 사용법 가이드
1. Create React App 소개
안녕하세요! 이번 장에서는 Create React App을 사용하여 React 애플리케이션을 만드는 방법을 배워보겠습니다. Create React App은 React.js 애플리케이션을 만드는 가장 효율적인 방법입니다.
이전에는 React 스크립트를 직접 가져와서 모든 설정을 수동으로 해야 했지만, Create React App을 사용하면 이 과정이 훨씬 간단해집니다.
Create React App의 주요 장점:
- 사전 구성된 개발 환경: 많은 스크립트와 설정이 미리 준비되어 있음
- 개발 서버: 로컬에서 앱을 쉽게 테스트할 수 있는 개발 서버 제공
- 자동 새로고침(Hot Reload): 코드 변경 시 자동으로 브라우저 새로고침
- CSS 지원: CSS 파일을 바로 임포트하여 사용 가능
- 배포 최적화:
npm run build명령으로 배포용 최적화된 코드 생성
이러한 이유로 대부분의 React 개발자들이 새 프로젝트를 시작할 때 Create React App을 사용합니다.
2. 필요한 설치
Create React App을 사용하기 위해서는 몇 가지 사전 준비가 필요합니다:
Node.js 설치
먼저 Node.js를 설치해야 합니다:
- nodejs.org 웹사이트에 접속
- 운영체제에 맞는 LTS 버전(권장 버전) 다운로드
- 설치 마법사에 따라 설치 완료
- 설치 확인을 위해 명령 프롬프트(또는 터미널)에서 다음 명령어 실행:
버전 번호가 출력되면 정상적으로 설치된 것입니다.node -v
npx 설치 확인
Node.js를 설치하면 일반적으로 npm(Node Package Manager)과 함께 npx도 자동으로 설치됩니다:
npx --version버전 정보가 표시되면 준비 완료입니다!
3. 새 React 프로젝트 생성하기
이제 Create React App을 사용하여 첫 번째 React 프로젝트를 만들어 보겠습니다:
프로젝트 생성 명령어
npx create-react-app 프로젝트이름예를 들어, '리액트-입문' 이라는 이름의 프로젝트를 생성하려면:
npx create-react-app 리액트-입문
주의사항: 프로젝트를 생성할 폴더 이름이 이미 존재하면 안 됩니다. 같은 이름의 폴더가 있다면 먼저 삭제하거나 다른 이름을 사용하세요.
명령어를 실행하면 다음과 같은 과정이 진행됩니다:
- React 관련 패키지 다운로드
- 프로젝트 구조 생성
- 필요한 모듈 설치
- 초기 설정 완료
설치가 완료되면 다음과 같은 메시지가 표시됩니다:
Success! Created 리액트-입문 at C:\Users\사용자명\리액트-입문
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd 리액트-입문
npm start
Happy hacking!4. 프로젝트 실행하기
이제 생성된 프로젝트를 VS Code에서 열고 실행해 보겠습니다:
VS Code에서 프로젝트 열기
- Visual Studio Code 실행
- '파일 > 폴더 열기'로 생성된 프로젝트 폴더(예: 리액트-입문) 선택
package.json 살펴보기
프로젝트의 package.json 파일에는 프로젝트 설정과 사용 가능한 스크립트 명령이 포함되어 있습니다:
{
"name": "리액트-입문",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}주요 스크립트:
npm start: 개발 서버 실행npm run build: 배포용 빌드 생성npm test: 테스트 실행npm run eject: CRA 설정 추출(주의: 되돌릴 수 없음)
개발 서버 실행
VS Code에서 터미널을 열고 다음 명령어 실행:
npm start이 명령어는 로컬 개발 서버를 시작하고, 자동으로 기본 브라우저를 열어 http://localhost:3000 주소에서 앱을 보여줍니다.
5. 프로젝트 구조 이해하기
Create React App으로 생성된 프로젝트의 기본 구조를 살펴보겠습니다:
리액트-입문/
├── node_modules/ # 프로젝트 의존성 패키지들
├── public/ # 정적 파일 폴더
│ ├── favicon.ico # 페이지 아이콘
│ ├── index.html # 메인 HTML 파일
│ └── ... # 기타 정적 파일
├── src/ # 소스 코드 폴더
│ ├── App.css # App 컴포넌트 스타일
│ ├── App.js # App 컴포넌트
│ ├── App.test.js # App 컴포넌트 테스트
│ ├── index.css # 전역 스타일
│ ├── index.js # JavaScript 진입점
│ ├── logo.svg # React 로고
│ └── ... # 기타 파일
├── .gitignore # Git 무시 설정
├── package.json # 프로젝트 메타데이터
├── package-lock.json# 패키지 버전 잠금
└── README.md # 프로젝트 문서src 폴더
src 폴더는 모든 React 코드가 위치하는 곳입니다. 주요 파일:
index.js
애플리케이션의 진입점으로, React DOM을 사용하여 App 컴포넌트를 렌더링합니다:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();App.js
메인 컴포넌트로, 애플리케이션의 기본 UI를 정의합니다:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;public/index.html
public/index.html은 React 애플리케이션이 마운트되는 HTML 파일입니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- React 앱이 여기에 마운트됩니다 -->
</body>
</html><div id="root"></div> 요소가 React 앱이 렌더링되는 위치입니다. Create React App은 자동으로 src/index.js의 코드를 이 위치에 주입합니다.
6. 자동 새로고침 (Hot Reload) 기능
Create React App의 가장 유용한 기능 중 하나는 코드를 수정하면 자동으로 브라우저가 새로고침된다는 것입니다.
예를 들어, src/App.js 파일을 다음과 같이 수정해 보세요:
function App() {
return (
<div className="App">
<h1>안녕하세요, React!</h1>
<p>Create React App으로 만든 첫 번째 앱입니다.</p>
</div>
);
}
export default App;코드를 저장하는 즉시 브라우저가 자동으로 새로고침되어 변경 사항이 표시됩니다.
7. 프로젝트 정리하기
Create React App은 많은 기본 파일과 설정을 제공하지만, 처음 배울 때는 더 간단하게 시작하는 것이 좋습니다.
불필요한 파일 제거
다음 파일들을 삭제하여 프로젝트를 정리할 수 있습니다:
src/App.css
src/App.test.js
src/index.css
src/logo.svg
src/reportWebVitals.js
src/setupTests.jsindex.js 정리
src/index.js 파일을 다음과 같이 간소화합니다:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);App.js 정리
src/App.js 파일도 간소화합니다:
import React from 'react';
function App() {
return (
<div>
<h1>React를 배워봅시다!</h1>
</div>
);
}
export default App;8. 컴포넌트 작성 예시
React의 핵심은 컴포넌트입니다. 이제 간단한 컴포넌트를 몇 개 만들어 보겠습니다.
Header 컴포넌트
src/components 폴더를 생성하고 그 안에 Header.js 파일을 만듭니다:
import React from 'react';
function Header() {
return (
<header style={{ backgroundColor: '#282c34', padding: '20px', color: 'white' }}>
<h1>리액트 입문 강의</h1>
<nav>
<ul style={{ display: 'flex', listStyle: 'none', gap: '15px' }}>
<li>홈</li>
<li>소개</li>
<li>연락처</li>
</ul>
</nav>
</header>
);
}
export default Header;Button 컴포넌트
같은 폴더에 Button.js 파일을 만듭니다:
import React, { useState } from 'react';
function Button({ text, onClick }) {
const [isHovered, setIsHovered] = useState(false);
const buttonStyle = {
backgroundColor: isHovered ? '#0056b3' : '#007bff',
color: 'white',
border: 'none',
borderRadius: '4px',
padding: '10px 15px',
cursor: 'pointer',
transition: 'background-color 0.3s'
};
return (
<button
style={buttonStyle}
onClick={onClick}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{text}
</button>
);
}
export default Button;App.js에서 컴포넌트 사용하기
이제 만든 컴포넌트를 App.js에서 사용해 봅시다:
import React, { useState } from 'react';
import Header from './components/Header';
import Button from './components/Button';
function App() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<Header />
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>간단한 카운터 예제</h2>
<p>현재 카운트: {count}</p>
<Button text="증가" onClick={incrementCount} />
</div>
</div>
);
}
export default App;9. 배포 준비하기
개발이 완료되면 배포용 빌드를 생성할 수 있습니다:
npm run build이 명령은 프로젝트의 최적화된 버전을 build 폴더에 생성합니다. 이 폴더의 내용을 웹 서버에 업로드하면 애플리케이션을 배포할 수 있습니다.
빌드된 파일은 다음과 같은 특징이 있습니다:
- 코드 최소화(Minification)
- 번들링(Bundling)
- 불필요한 코드 제거
- 정적 파일 최적화
요약
Create React App은 React 애플리케이션 개발을 쉽게 시작할 수 있는 강력한 도구입니다:
- 간편한 설정: 복잡한 웹팩, 바벨 설정 없이 바로 개발 시작
- 개발 서버: 핫 리로딩 기능을 갖춘 로컬 개발 환경 제공
- 프로젝트 구조: 체계적인 파일 구조로 개발 편의성 향상
- 빌드 도구: 최적화된 배포 버전 생성 기능 제공
기본 명령어만 기억하세요:
- 프로젝트 생성:
npx create-react-app 프로젝트이름 - 개발 서버 실행:
npm start - 배포용 빌드:
npm run build
이제 여러분은 Create React App을 사용하여 React 애플리케이션을 쉽게 만들고 개발할 준비가 되었습니다. 즐거운 React 개발 되세요!