React 시작하기: 환경 구축 & 첫 컴포넌트 만들기

React 시작하기: 환경 구축 & 첫 컴포넌트 만들기

이 글에서는 Node.js 설치 후 Create React App 또는 Vite를 이용해 React 프로젝트를 생성하고, 첫 컴포넌트인 HelloWorld를 작성·렌더링하는 과정을 단계별로 알아봅니다. 이를 통해 React 개발 환경 구축부터 간단한 컴포넌트 실행까지 빠르게 이해할 수 있습니다.

1. 환경 요구사항

React 개발을 시작하려면 아래 소프트웨어가 필요합니다.

▶ 이전 게시물 참고 : Node.js 소개 및 윈도우에 설치하는 방법

2. 새로운 React 프로젝트 생성

2.1 Create React App 사용

Create React App(CRA)은 React 프로젝트를 빠르게 시작할 수 있게 도와주는 도구입니다. 터미널에서 다음 명령을 실행하세요.

npx create-react-app my-react-app
cd my-react-app
Create React App 사용하여 React 프로젝트를 생성한 예시

※ 여기서 .은 “현재 디렉터리”를 가리킵니다. 즉, 명령어를 실행하는 폴더(예: react-app) 내부에 프로젝트 파일이 바로 생성됩니다.

2.2 Vite 사용 (선택 사항)

더 가볍고 빠른 빌드를 원한다면 Vite를 사용할 수도 있습니다.

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

3. 생성된 파일 구조 설명

Create React App 실행 후, 주요 파일과 폴더는 아래와 같습니다.

  • public/index.html: 앱의 HTML 템플릿. <div id="root">에 React 컴포넌트를 마운트합니다.
  • public/favicon.ico: 브라우저 탭에 표시될 아이콘
  • public/manifest.json & public/robots.txt: PWA 설정 및 크롤러 제어용 파일
  • src/index.js: 애플리케이션 진입점. ReactDOM.createRoot().render()가 실행됩니다.
  • src/App.js: 기본 React 컴포넌트
  • src/App.css: App.js 전용 스타일시트
  • src/index.css: 전역 스타일시트
  • src/logo.svg 등: 기본 로고 이미지 파일
  • src/reportWebVitals.js: 웹 성능 지표 측정용 스크립트
  • src/setupTests.js & src/App.test.js: Jest 기반 테스트 설정 및 예제
  • package.json: 프로젝트 메타정보, 의존성, npm 스크립트를 정의
  • package-lock.json: 설치된 의존성 버전 고정 파일
  • .gitignore: Git 추적 제외 파일 목록
  • README.md: 프로젝트 개요 및 시작 가이드

4. 첫 컴포넌트 작성

프로젝트가 생성되면 src/App.js 파일을 열고, 기본 코드를 아래와 같이 변경하세요.

import React from 'react';

function App() {
  return (
    <div>
      <h2>Hello, React!</h2>
      <p>첫 번째 React 컴포넌트입니다.</p>
    </div>
  );
}

export default App;

그리고 src/index.js 에서는 그대로 import App from './App'; 로 두시면, 브라우저에서 “Hello, React!”만 표시됩니다.

5. 개발 서버 실행 및 확인

아래 명령어로 개발 서버를 실행한 후, 브라우저에서 http://localhost:3000에 접속해 보세요.

npm start

“Hello, React!” 문구가 보이면 성공적으로 환경이 구성된 것입니다.

Create React App 실행 화면

6. 공식 문서 & 참고 링크

함께 보면 좋은 게시글

이 글이 도움이 되셨다면 공유 부탁 드립니다.

동일 카테고리 게시글

위로 스크롤