WeniVooks

검색
북마크 이동

React 베이스캠프

첫 번째 React 프로젝트

1. 첫 번째 React 프로젝트

이제 React 개발 환경이 준비되었으니 첫 번째 프로젝트를 만들고 실행해보겠습니다. 터미널을 열고 다음 단계를 따라 해보세요.

1.1 Vite란 무엇인가요?

Vite(비트, "빠르다"는 뜻의 프랑스어)는 Evan You(Vue.js 창시자)가 개발한 차세대 프론트엔드 빌드 도구입니다.

1.1.1 Vite의 특징
빠른 개발 서버
  • 즉시 시작: 서버 시작 시간이 매우 빠릅니다
  • 빠른 HMR(Hot Module Replacement): 코드 변경 시 즉시 브라우저에 반영
  • 네이티브 ES 모듈 활용: 브라우저의 ES 모듈을 직접 활용하여 번들링 없이 개발
효율적인 빌드
  • Rollup 기반: 프로덕션 빌드 시 Rollup을 사용하여 최적화된 번들 생성
  • 트리 쉐이킹: 사용하지 않는 코드 자동 제거
  • 코드 분할: 자동으로 코드를 분할하여 로딩 성능 향상
기존 도구와의 비교
특징Create React AppVite
서버 시작 속도느림 (10-30초)빠름 (1-2초)
HMR 속도보통매우 빠름
빌드 속도보통빠름
설정의 복잡성간단 (숨겨짐)간단하면서 유연
최신 기술 지원보수적적극적
1.1.2 왜 Vite를 사용하나요?
  1. 개발 생산성 향상: 빠른 서버 시작과 즉시 반영되는 변경사항
  2. 최신 웹 표준: ES 모듈, TypeScript, CSS Preprocessor 등 기본 지원
  3. 확장성: 플러그인 시스템으로 다양한 도구 통합 가능
  4. 미래 지향적: 웹 표준을 적극 활용하는 현대적 접근 방식
1.2 Vite로 React 프로젝트 생성하기
1.2.1 프로젝트 생성

터미널에서 다음 명령어를 실행합니다:

npm create vite@latest my-first-react-app -- --template react
npm create vite@latest my-first-react-app -- --template react

이 명령어는 몇 분 정도 시간이 걸릴 수 있습니다. 완료되면 my-first-react-app이라는 이름의 폴더가 생성됩니다.

1.2.2 프로젝트 폴더로 이동
cd my-first-react-app
cd my-first-react-app
1.2.3 의존성 설치
npm install
npm install
1.2.4 개발 서버 실행
npm run dev
npm run dev

명령어를 실행하면 브라우저가 자동으로 열리고 http://localhost:5173에서 React 앱이 실행됩니다.

React 기본 화면

위와 같은 화면이 보이면 성공입니다! React 로고가 돌아가는 것을 확인할 수 있습니다.

1.3 프로젝트 구조 살펴보기

생성된 프로젝트의 폴더 구조를 살펴보겠습니다:

my-first-react-app/
├── node_modules/          # 프로젝트 의존성 패키지들
├── public/               # 정적 파일들
│   ├── index.html       # 메인 HTML 파일
│   └── favicon.ico      # 파비콘
├── src/                 # 소스 코드
│   ├── App.js          # 메인 컴포넌트
│   ├── App.css         # App 컴포넌트 스타일
│   ├── index.js        # 진입점 파일
│   └── index.css       # 전역 스타일
├── package.json         # 프로젝트 설정 및 의존성 정보
└── README.md           # 프로젝트 설명서
my-first-react-app/
├── node_modules/          # 프로젝트 의존성 패키지들
├── public/               # 정적 파일들
│   ├── index.html       # 메인 HTML 파일
│   └── favicon.ico      # 파비콘
├── src/                 # 소스 코드
│   ├── App.js          # 메인 컴포넌트
│   ├── App.css         # App 컴포넌트 스타일
│   ├── index.js        # 진입점 파일
│   └── index.css       # 전역 스타일
├── package.json         # 프로젝트 설정 및 의존성 정보
└── README.md           # 프로젝트 설명서
1.3.1 주요 파일 설명
1.3.1.1 public/index.html

React 앱이 렌더링될 HTML 파일입니다. <div id="root"></div>가 React 앱의 진입점입니다.

1.3.1.2 src/index.js

JavaScript 진입점 파일로, React 앱을 DOM에 렌더링합니다:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
1.3.1.3 src/App.js

메인 React 컴포넌트입니다. 여기서부터 앱 개발을 시작합니다:

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;
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;
1.4 첫 번째 수정해보기

이제 코드를 수정해봅시다. src/App.js 파일을 열고 다음과 같이 간단하게 수정해보세요:

function App() {
  return (
    <div className="App">
      <h1>안녕하세요, React!</h1>
      <p>첫 번째 React 프로젝트에 오신 것을 환영합니다.</p>
    </div>
  );
}
 
export default App;
function App() {
  return (
    <div className="App">
      <h1>안녕하세요, React!</h1>
      <p>첫 번째 React 프로젝트에 오신 것을 환영합니다.</p>
    </div>
  );
}
 
export default App;

파일을 저장하면 브라우저가 자동으로 새로고침되고 변경사항이 바로 반영됩니다. 이를 **Hot Module Replacement(HMR)**라고 합니다.

수정된 화면
1.5 유용한 npm 명령어들

React 프로젝트에서 자주 사용하는 명령어들을 알아봅시다:

1.5.1 개발 서버 실행
npm run dev
npm run dev

개발 모드로 앱을 실행합니다. 파일을 수정하면 자동으로 새로고침됩니다.

1.5.2 프로덕션 빌드
npm run build
npm run build

배포용으로 최적화된 파일들을 생성합니다. build 폴더에 결과물이 생성됩니다.

1.5.3 테스트 실행
npm test
npm test

테스트 파일들을 실행합니다.

1.5.4 설정 파일 추출 (주의!)
npm run eject
npm run eject

⚠️ 주의: 이 명령어는 되돌릴 수 없습니다. Create React App의 설정을 직접 수정하고 싶을 때만 사용하세요.

1.6 VS Code에서 React 개발하기

Visual Studio Code에서 React 프로젝트를 열어봅시다:

  1. VS Code를 열고 File → Open Folder 선택
  2. my-first-react-app 폴더를 선택
  3. 프로젝트가 열리면 src/App.js 파일을 열어보세요
1.6.1 유용한 VS Code 확장 프로그램

React 개발을 더 편하게 해주는 확장 프로그램들을 설치해보세요:

  • ES7+ React/Redux/React-Native snippets: React 코드 조각 제공
  • Prettier - Code formatter: 코드 자동 정렬
  • Auto Rename Tag: HTML/JSX 태그 자동 수정
  • Bracket Pair Colorizer: 괄호 색상 구분
1.7 프로젝트 정리하기

기본으로 생성된 파일들을 정리해서 더 깔끔하게 만들어봅시다.

1.7.1 불필요한 파일 삭제

다음 파일들을 삭제해도 됩니다:

  • src/logo.svg
  • src/App.test.js
  • src/reportWebVitals.js
  • src/setupTests.js
1.7.2 App.css 수정

src/App.css 파일을 다음과 같이 간단하게 수정합니다:

.App {
  text-align: center;
  padding: 20px;
}
 
.App h1 {
  color: #61dafb;
  margin-bottom: 20px;
}
 
.App p {
  font-size: 18px;
  color: #333;
}
.App {
  text-align: center;
  padding: 20px;
}
 
.App h1 {
  color: #61dafb;
  margin-bottom: 20px;
}
 
.App p {
  font-size: 18px;
  color: #333;
}
1.7.3 수정된 App.js
import './App.css';
 
function App() {
  return (
    <div className="App">
      <h1>React 베이스캠프에 오신 것을 환영합니다!</h1>
      <p>이제 React 개발을 시작해봅시다.</p>
    </div>
  );
}
 
export default App;
import './App.css';
 
function App() {
  return (
    <div className="App">
      <h1>React 베이스캠프에 오신 것을 환영합니다!</h1>
      <p>이제 React 개발을 시작해봅시다.</p>
    </div>
  );
}
 
export default App;
1.8 정리

첫 번째 React 프로젝트 생성을 완료했습니다! 지금까지 배운 내용:

  1. Create React App으로 React 프로젝트 생성
  2. 프로젝트 구조 이해
  3. 개발 서버 실행과 Hot Module Replacement
  4. 기본 코드 수정해보기
  5. npm 명령어들 활용

다음 장에서는 React의 핵심인 JSX 문법에 대해 자세히 알아보겠습니다.

1.2 개발 환경 설정하기1.4 JSX 기초