React.js 설치 및 개발 환경 설정 create-react-app 사용법

React.js 설치 및 개발 환경 설정: create-react-app으로 시작하는 안내

서론

React.js는 현대적인 웹 애플리케이션 개발을 위한 강력한 JavaScript 라이브러리입니다. 이 글에서는 React.js를 처음 시작하는 분들을 위해 설치 과정부터 개발 환경 설정, 그리고 create-react-app의 사용법까지 상세하게 다루겠습니다.

1. Node.js와 npm 설치

React.js 개발을 위해서는 Node.js와 npm(Node Package Manager)이 필요합니다. Node.js 공식 홈페이지([유효하지 않은 URL 삭제됨] 자신의 운영체제에 맞는 버전을 다운로드하여 설치해주세요. 설치가 완료되면 터미널이나 명령 프롬프트에서 node -v와 npm -v 명령어를 실행하여 버전이 정상적으로 출력되는지 확인합니다.

2. create-react-app 설치

create-react-app은 React 애플리케이션을 빠르게 시작할 수 있도록 도와주는 공식 도구입니다. 터미널에서 다음 명령어를 실행하여 전역으로 설치합니다.

npm install -g create-react-app

 

3. 새 React 프로젝트 생성

원하는 디렉토리로 이동한 후 다음 명령어를 실행하여 새로운 React 프로젝트를 생성합니다.

npx create-react-app my-app

 

my-app 부분은 원하는 프로젝트 이름으로 변경할 수 있습니다.

728x90

4. 프로젝트 실행

생성된 프로젝트 디렉토리로 이동한 후 다음 명령어를 실행하여 개발 서버를 시작합니다.

cd my-app
npm start

 

브라우저에서 http://localhost:3000/ 주소로 접속하면 생성된 React 애플리케이션을 확인할 수 있습니다.

5. 프로젝트 구조

create-react-app으로 생성된 프로젝트는 다음과 같은 기본적인 구조를 가집니다.

• public: 정적 파일 (index.html, favicon 등)이 저장되는 폴더
• src: 실제 React 컴포넌트와 로직을 작성하는 폴더
• package.json: 프로젝트에 필요한 의존성을 관리하는 파일

6. 컴포넌트 작성

src 폴더 내에 새로운 컴포넌트 파일을 생성하고 JSX 문법을 사용하여 UI를 구성합니다. 예를 들어, App.js 파일을 다음과 같이 수정할 수 있습니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

7. 컴포넌트 간 데이터 전달

props를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있습니다. state를 사용하여 컴포넌트 내부의 데이터를 관리하고 변경할 수 있습니다.

8. 프로젝트 배포

개발이 완료된 후에는 다음 명령어를 실행하여 프로젝트를 빌드합니다.

npm run build

 

빌드된 파일들은 build 폴더에 생성됩니다. 이 파일들을 서버에 배포하여 사용자에게 제공할 수 있습니다.

결론

create-react-app을 사용하면 번거로운 설정 없이 빠르게 React 개발 환경을 구축하고 생산성을 높일 수 있습니다. 이 글에서 다룬 내용을 바탕으로 React 개발을 시작하고 다양한 기능을 구현해보세요.