React 시작하기

이 장에서는 React 개발에 필요한 도구를 갖추고, Vite로 첫 프로젝트를 만들어 개발 서버에서 실행하는 과정까지 다룹니다. 편집기를 어떻게 설정하면 좋은지도 함께 살펴봅니다.

준비물: Node.js

React 자체는 브라우저에서 실행되는 라이브러리이지만, 프로젝트를 만들고 빌드하는 도구는 모두 Node.js 위에서 동작합니다. nodejs.org에서 LTS(장기 지원) 버전을 설치한 뒤 새 터미널에서 버전을 확인합니다.

node --version
npm --version

Node.js를 설치하면 패키지 관리자 npm이 함께 설치됩니다. pnpm, Yarn, Bun 같은 다른 패키지 관리자를 써도 되지만, 이 안내서는 npm 명령으로 설명합니다.

프로젝트를 시작하는 두 가지 길

React 공식 문서는 새 앱을 만들 때 Next.js, React Router(프레임워크 모드), Expo(모바일) 같은 프레임워크로 시작하기를 권합니다. 프레임워크는 라우팅, 데이터 불러오기, 서버 렌더링, 코드 분할을 함께 제공하기 때문입니다. 반면 React의 핵심 개념을 익히거나 서버 없이 동작하는 단일 페이지 앱을 만들 때는 빌드 도구 Vite로 시작하는 편이 구조가 단순해 이해하기 쉽습니다.

이 안내서는 React 자체에 집중하기 위해 Vite 프로젝트를 기준으로 설명합니다. 여기서 익힌 컴포넌트, 훅, 상태 관리는 어느 프레임워크에서나 그대로 쓰입니다.

Vite로 프로젝트 만들기

npm create vite는 Vite의 프로젝트 생성 도구를 내려받아 실행합니다. --template react-ts를 주면 TypeScript를 쓰는 React 템플릿이 만들어집니다. JavaScript만 쓰려면 react 템플릿을 고릅니다.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

npm으로 실행할 때는 템플릿 옵션 앞에 --를 붙여야 npm이 아닌 생성 도구에 옵션이 전달됩니다. 템플릿을 생략하면 프레임워크와 언어를 고르는 질문이 차례로 나옵니다. 다른 패키지 관리자에서는 다음처럼 씁니다.

pnpm create vite my-app --template react-ts
yarn create vite my-app --template react-ts
bun create vite my-app --template react-ts

개발 서버와 즉시 반영

npm run dev를 실행하면 Vite 개발 서버가 시작되고 터미널에 http://localhost:5173 같은 주소가 표시됩니다. 브라우저에서 이 주소를 열어 두고 src/App.tsx를 고쳐 저장하면, 페이지를 새로 고치지 않아도 바뀐 부분이 곧바로 반영됩니다. React용 Vite 플러그인이 제공하는 Fast Refresh 덕분에 컴포넌트의 상태도 대부분 유지됩니다.

src/App.tsx의 내용을 다음처럼 바꿔 보세요.

function Greeting({ name }: { name: string }) {
  return <p>안녕하세요, {name}님!</p>;
}

export default function App() {
  return (
    <main>
      <h1>나의 첫 React 앱</h1>
      <Greeting name="React" />
      <Greeting name="Vite" />
    </main>
  );
}

Greeting과 App은 모두 JSX를 반환하는 함수, 즉 컴포넌트입니다. 컴포넌트 이름은 대문자로 시작해야 React가 HTML 태그와 구분합니다. 포트를 바꾸거나 같은 네트워크의 휴대폰에서 접속해 보려면 옵션을 넘깁니다.

npm run dev -- --port 3000 --open
npm run dev -- --host

편집기 설정

Visual Studio Code는 TypeScript와 JSX를 기본으로 지원해 자동 완성, 타입 오류 표시, 이름 바꾸기를 바로 쓸 수 있습니다. 여기에 다음을 더하면 편합니다.

• ESLint 확장: Vite 템플릿에 들어 있는 eslint.config.js를 읽어 훅 규칙 위반 같은 문제를 편집기에서 바로 표시합니다.
• Prettier 확장: 저장할 때 코드 서식을 자동으로 맞춥니다. npm install -D prettier로 프로젝트에도 설치해 두면 팀 전체가 같은 버전을 씁니다.
• React Developer Tools: Chrome · Firefox · Edge용 브라우저 확장으로, 컴포넌트 트리와 props · 상태를 살펴보고 렌더링 성능을 측정합니다.

프로젝트에 .vscode/settings.json을 두면 저장할 때 서식 정리와 ESLint 자동 수정을 함께 실행할 수 있습니다.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

개발 중에 컴포넌트가 두 번 렌더링되거나 Effect가 두 번 실행되는 것을 보고 놀랄 수 있습니다. 이는 src/main.tsx의 <StrictMode>가 정리(cleanup) 누락 같은 버그를 일찍 드러내려고 개발 모드에서만 일부러 하는 동작이며, 프로덕션 빌드에서는 일어나지 않습니다.

정리

• React 개발 도구는 Node.js 위에서 동작하므로 먼저 LTS 버전을 설치합니다.
• 공식 문서는 새 앱에 프레임워크를 권하지만, 학습과 클라이언트 전용 앱에는 Vite가 단순합니다.
• npm create vite@latest my-app -- --template react-ts로 만들고 npm run dev로 실행합니다.
• Fast Refresh로 저장 즉시 화면이 바뀌며, StrictMode의 이중 실행은 개발 모드 전용입니다.
• VS Code에 ESLint · Prettier를, 브라우저에 React Developer Tools를 설치해 두면 편합니다.