React 시작하기: 첫 React 앱 설정하기.

작성일 : 2024-07-04

React 시작하기: 첫 React 앱 설정하기

React는 Facebook에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하는 데 사용됩니다. 모던 웹 개발에서 가장 인기 있는 도구 중 하나이며, 컴포넌트 기반 아키텍처를 통해 복잡한 애플리케이션을 효율적으로 구성할 수 있습니다. 이번 글에서는 첫 React 앱을 설정하는 방법에 대해 알아보겠습니다.

React란 무엇인가?

React는 컴포넌트를 중심으로 동작하는 라이브러리입니다. 컴포넌트는 독립적이고 재사용 가능한 UI 조각으로 생각할 수 있습니다. 이 컴포넌트들은 자바스크립트 함수 또는 클래스로 정의할 수 있으며, props와 state라는 개념을 통해 데이터와 상태를 관리합니다.

React의 장점 중 하나는 가상 DOM(Virtual DOM)을 사용한다는 점입니다. 가상 DOM은 실제 DOM보다 훨씬 빠르게 변경 사항을 반영할 수 있어, UI 업데이트 성능이 뛰어납니다. 또한, React는 단방향 데이터 흐름을 채택하여 데이터가 예측 가능하게 관리됩니다.

개발 환경 준비

React 앱을 개발하기 위해서는 몇 가지 필수 도구가 필요합니다. 다음은 React 개발에 필요한 기본적인 도구들입니다.

Node.js: Node.js는 React 앱을 실행하고 빌드하는 데 필요한 런타임입니다. 🔗 Node.js 공식 웹사이트에서 최신 버전을 다운로드하고 설치합니다.
npm 또는 yarn: Node.js에는 기본적으로 npm이 포함되어 있으며, 이는 패키지 매니저 역할을 합니다. yarn은 npm의 대안으로, 좀 더 빠르고 안정적인 패키지 관리를 제공합니다. 🔗 Yarn 공식 웹사이트에서 설치 방법을 참고하세요.
텍스트 에디터: 코드를 작성하기 위해서는 텍스트 에디터가 필요합니다. Visual Studio Code, Atom, Sublime Text 등이 인기 있는 에디터입니다.

첫 React 앱 생성하기

React 앱을 생성하는 가장 간단한 방법은 Create React App이라는 공식 CLI 도구를 사용하는 것입니다. 이 도구는 복잡한 설정 없이도 바로 React 프로젝트를 시작할 수 있도록 도와줍니다.

Create React App 설치

Create React App을 전역적으로 설치하려면 다음 명령어를 터미널에 입력합니다.

npm install -g create-react-app

프로젝트 생성

설치가 완료되면, 새로운 React 프로젝트를 생성할 수 있습니다. 프로젝트를 생성할 디렉토리로 이동한 후, 다음 명령어를 입력합니다.

create-react-app my-first-react-app

이 명령어는 my-first-react-app이라는 디렉토리를 만들고, 기본 설정이 완료된 React 프로젝트를 생성합니다.

프로젝트 실행

프로젝트가 생성되면, 해당 디렉토리로 이동하여 개발 서버를 시작합니다.

cd my-first-react-app
npm start

위 명령어를 실행하면 로컬 개발 서버가 실행되고, 웹 브라우저에서 http://localhost:3000 주소로 접속하면 기본 React 앱이 보이는 것을 확인할 수 있습니다.

첫 번째 컴포넌트 작성하기

이제 간단한 컴포넌트를 작성해보겠습니다. src 디렉토리 안에 App.js 파일을 열어 기본 코드를 수정해봅시다.


javascript
import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React!</h1>
      </header>
    </div>
  );
}

export default App;

위 예제는 간단한 App 컴포넌트를 작성하는 코드입니다. h1 태그를 사용하여