React를 배우려면 일단 프로젝트를 만들어야겠죠? 예전에는 Create React App(CRA)을 많이 썼는데, 요즘은 Vite를 씁니다. 왜냐면 엄청 빠르거든요. CRA로 프로젝트 만들면 1-2분 걸리는데 Vite는 10초면 끝나요.

사전 준비: Node.js 설치

React 프로젝트를 만들려면 Node.js가 필요해요.

Node.js 설치 방법

1. Node.js 공식 사이트 접속
2. LTS 버전 다운로드 (안정적인 버전)
3. 설치 파일 실행 후 Next만 계속 누르면 됨

설치 확인은 터미널에서:

node -v
# v20.10.0 같은 버전이 나오면 성공

npm -v
# 10.2.3 같은 버전이 나오면 성공

실행 결과:

npm은 Node.js 설치하면 자동으로 같이 설치됩니다.

1단계: React 프로젝트 생성

VS Code를 열고 터미널을 켜세요. (단축키: Ctrl + J 또는 Cmd + J)

프로젝트를 만들 폴더로 이동한 다음:

npm create vite@latest

이 명령어를 치면 몇 가지 질문이 나와요.

질문 1: Project name

? Project name: › my-react-app

프로젝트 이름을 입력하세요. 영어 소문자와 하이픈만 쓰는 게 좋아요.

질문 2: Select a framework

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

화살표 키로 React 선택하고 Enter!

질문 3: Select a variant

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC

처음 배우는 거라면 JavaScript 선택하세요. TypeScript는 나중에 배우면 됩니다.

SWC가 뭐냐면, 빌드를 더 빠르게 해주는 도구예요. 붙어있는 걸 선택해도 상관없어요.

2단계: 라이브러리 설치

프로젝트가 생성됐으면 해당 폴더로 이동해서 필요한 라이브러리를 설치해야 해요.

# 프로젝트 폴더로 이동
cd my-react-app

# 라이브러리 설치
npm install

npm install (또는 줄여서 npm i)을 실행하면 node_modules 폴더가 생겨요. 여기에 React 실행에 필요한 모든 라이브러리가 들어갑니다.

이 폴더는 용량이 크니까 git에 올리면 안 돼요. .gitignore 파일에 이미 등록되어 있으니 걱정 마세요.

3단계: 프로젝트 실행

npm run dev

이 명령어를 치면:

  VITE v5.0.0  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

브라우저에서 http://localhost:5173 열면 React 앱이 실행됩니다!

Vite + React 로고가 보이고 카운터 버튼이 있는 페이지가 나오면 성공이에요.

프로젝트 폴더 구조 이해하기

생성된 프로젝트 폴더를 열어보면 이런 구조예요:

my-react-app/
  node_modules/     # 설치된 라이브러리들
  public/           # 정적 파일 (이미지, 폰트 등)
  src/              # 소스 코드
    assets/         # 이미지 등 리소스
    App.css         # App 컴포넌트 스타일
    App.jsx         # 메인 컴포넌트
    index.css       # 전역 스타일
    main.jsx        # 진입점
  .gitignore        # git 제외 파일
  index.html        # HTML 템플릿
  package.json      # 프로젝트 설정
  vite.config.js    # Vite 설정

주요 파일 설명

package.json

프로젝트의 설정 파일이에요. 여기서 중요한 부분:

{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

• type: "module": ES Module 시스템 사용
• scripts: 터미널에서 npm run 명령어로 실행할 수 있는 명령어들
• dependencies: 설치된 라이브러리 목록

src/main.jsx

앱의 시작점이에요:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

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

index.html의 root div에 React 앱을 렌더링하는 코드입니다.

src/App.jsx

메인 컴포넌트예요. 우리가 주로 수정할 파일이죠:

function App() {
  return (
    <div>
      <h1>Hello React!</h1>
    </div>
  )
}

export default App

ESLint 설정 (선택사항)

코드 품질을 위해 ESLint 규칙을 조금 수정하면 편해요.

eslint.config.js 파일에서 rules 부분을 찾아서:

rules: {
  // 사용하지 않는 변수 경고 끄기
  'no-unused-vars': 'off',
  // prop-types 검사 끄기 (TypeScript 쓸 거면 필요 없음)
  'react/prop-types': 'off',
}

이 두 옵션을 끄면 개발할 때 불필요한 경고가 안 떠서 편합니다.

첫 번째 수정해보기

App.jsx 파일을 열어서 내용을 바꿔보세요:

function App() {
  return (
    <div>
      <h1>나의 첫 React 앱!</h1>
      <p>드디어 React를 시작했다!</p>
    </div>
  )
}

export default App

실행 결과:

저장하면 브라우저가 자동으로 새로고침되면서 바뀐 내용이 보여요. 이게 **Hot Module Replacement(HMR)**이라는 기능인데, Vite가 알아서 해줍니다.

유용한 명령어 정리

# 개발 서버 실행
npm run dev

# 프로덕션 빌드
npm run build

# 빌드 결과물 미리보기
npm run preview

npm run build를 하면 dist 폴더가 생기는데, 이 폴더를 서버에 올리면 배포 완료예요.

다음 단계

프로젝트 생성은 끝났어요! 다음 글에서는 React의 핵심인 컴포넌트에 대해 자세히 다뤄보겠습니다.

컴포넌트만 제대로 이해하면 React의 절반은 끝난 거예요. 기대하세요!

---

React 시리즈 탐색:

• 이전: React 소개 - 왜 React를 배워야 할까?
• 다음: React 컴포넌트 완벽 이해하기

← 블로그 목록으로