React 프로젝트 설정: Vite 로 첫 앱 생성 및 실행하기

소개

첫 번째 React 실습에 오신 것을 환영합니다! React 는 동적이고 인터랙티브한 사용자 인터페이스를 구축하기 위한 강력한 JavaScript 라이브러리입니다. React 개발을 시작하려면 먼저 적절한 개발 환경을 설정해야 합니다.

이 실습에서는 최신 빌드 도구인 Vite 를 사용하여 새 프로젝트를 부트스트랩할 것입니다. 프로젝트 구조 탐색, 종속성 설치, 개발 서버 시작, 기존 컴포넌트 수정 및 새 컴포넌트 생성 과정을 안내해 드립니다. 이 실습이 끝나면 React 프로젝트 설정에 대한 기본적인 이해를 갖추고 자신만의 컴포넌트를 구축할 준비가 될 것입니다.

프로젝트 탐색 및 종속성 설치

설정 프로세스를 통해 Vite 를 사용하여 my-app이라는 디렉토리에 새로운 React 프로젝트가 이미 생성되었습니다. 먼저 개발 환경에 필요한 도구인 Node.js 와 npm 이 있는지 확인해 보겠습니다.

터미널을 열고 다음 명령어를 실행하여 버전을 확인하세요.

node -v

Node.js 버전을 나타내는 출력이 표시될 것입니다. 예를 들면 다음과 같습니다.

v22.19.0

다음으로 npm 버전을 확인합니다.

npm -v

npm 버전도 유사한 출력이 표시될 것입니다.

10.9.3

Node 및 npm 버전 확인 출력

이제 프로젝트 디렉토리로 이동합니다. 이후의 모든 명령어는 이 디렉토리 안에서 실행해야 합니다.

cd my-app

React 애플리케이션이 작동하려면 package.json 파일에 나열된 여러 패키지가 필요합니다. npm 을 사용하여 이러한 종속성을 설치해야 합니다.

다음 명령어를 실행하세요.

중요: 보안상의 이유로 무료 사용자는 인터넷에 연결할 수 없으므로 npm 패키지를 설치할 수 없습니다. 계속해서 문서를 읽거나 다른 Web Development Labs를 체험하거나 Pro 사용자 업그레이드를 고려해 보세요.

npm install

이 명령어는 package.json 파일을 읽고 프로젝트 내의 node_modules 폴더에 필요한 모든 라이브러리를 다운로드합니다. 패키지가 설치되는 동안 진행률 표시줄과 몇 가지 메시지가 표시됩니다.

개발 서버 시작

React 애플리케이션을 실행하려면 개발 서버를 시작해야 합니다. 이미 my-app 디렉토리 안에 있으므로 Vite 에서 제공하는 스크립트를 사용할 수 있습니다.

포트 8080 에서 서버를 시작하려면 다음 명령어를 실행하세요.

npm run dev -- --host 0.0.0.0 --port 8080

이 명령어는 서버를 시작하고 터미널을 차지하며 앱이 실행되는 로컬 URL 을 표시합니다. 이 터미널을 계속 실행 상태로 두세요. 잠시 후 서버가 준비되었음을 알리는 메시지가 표시됩니다.

애플리케이션을 보려면 인터페이스 상단의 Web 8080 탭을 클릭하세요. 기본 Vite 및 React 환영 페이지가 표시됩니다.

Vite React 환영 페이지 표시

참고: 애플리케이션이 보이지 않으면 Web 8080 탭의 주소 표시줄 왼쪽에 있는 새로고침 버튼을 클릭해 보세요.

첫 번째 컴포넌트 수정

Vite 개발 서버는 Hot Module Replacement (HMR) 기능을 제공하여 파일 변경 사항을 저장하면 브라우저에서 애플리케이션이 즉시 업데이트됩니다. 이를 직접 확인해 보겠습니다.

왼쪽 파일 탐색기에서 my-app -> src로 이동한 후 App.jsx 파일을 클릭하여 편집기에서 엽니다. 이 파일은 메인 App 컴포넌트를 정의합니다.

return 문 안에는 HTML 과 유사한 코드 블록이 있습니다. 이것은 JSX 로, JavaScript 의 구문 확장으로 익숙한 방식으로 UI 구조를 작성할 수 있게 해줍니다.

return (...) 안의 전체 내용을 간단한 제목으로 교체하세요. App.jsx 파일은 다음과 같이 보여야 합니다.

import "./App.css";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
    </>
  );
}

export default App;

Appjsx 파일 내용에 H1 제목 포함

Ctrl+S (Mac 에서는 Cmd+S) 를 눌러 파일을 저장하세요. 이제 Web 8080 탭으로 다시 전환합니다. 페이지가 즉시 업데이트되어 새로운 "Hello, LabEx!" 제목이 표시되는 것을 볼 수 있습니다.

브라우저에 업데이트된 제목 표시

새 컴포넌트 생성

React 의 핵심 원칙 중 하나는 컴포넌트라고 불리는 작고 재사용 가능한 조각들로 UI 를 구축하는 것입니다. 새로운 컴포넌트를 만들어 봅시다.

왼쪽 파일 탐색기에서 my-app 안의 src 디렉토리를 마우스 오른쪽 버튼으로 클릭합니다.
"새 파일 (New File)"을 선택하고 이름을 Welcome.jsx로 지정합니다.
새로 생성된 Welcome.jsx 파일을 열고 다음 코드를 추가합니다.

import React from "react";

function Welcome() {
  return <h2>Welcome to my first React App!</h2>;
}

export default Welcome;

이 코드를 살펴보겠습니다.

import React from 'react';: 이 줄은 JSX 를 사용하는 모든 파일에 필요합니다.
function Welcome() { ... }: Welcome이라는 간단한 함수형 컴포넌트를 정의합니다.
return <h2>...</h2>;: 컴포넌트는 화면에 렌더링될 JSX 요소를 반환합니다.
export default Welcome;: 이 줄은 Welcome 컴포넌트를 다른 파일에서 사용할 수 있도록 합니다.

파일을 저장합니다 (Ctrl+S). 아직 브라우저에는 아무런 변화가 없을 것입니다. 왜냐하면 이 새로운 컴포넌트를 아직 사용하지 않았기 때문입니다.

새 컴포넌트 사용하기

Welcome 컴포넌트를 생성했으니, 이제 메인 App 컴포넌트 안에서 사용해 보겠습니다. 이것을 컴포넌트 합성 (component composition) 이라고 합니다.

my-app/src/App.jsx 파일을 다시 엽니다.
파일 상단에 새로운 컴포넌트를 가져오기 위한 import 문을 추가합니다.

import Welcome from "./Welcome.jsx";

다음으로, App 컴포넌트의 return 문 안에 새로운 컴포넌트를 배치합니다. 컴포넌트를 렌더링하기 위해 <h1> 태그 아래에 <Welcome />을 추가합니다. App.jsx의 최종 코드는 다음과 같아야 합니다.

import "./App.css";
import Welcome from "./Welcome.jsx";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
      <Welcome />
    </>
  );
}

export default App;