React

[React] 초기 설정하는 방법

dev.trams 2024. 6. 17. 04:52
반응형

안녕하세요, 여러분! 오늘은 많은 개발자들이 사용하는 JavaScript 라이브러리인 React의 초기 설정 방법에 대해 알아보겠습니다. React는 사용자 인터페이스를 구축하는 데 매우 유용한 도구입니다. 이 글에서는 React를 처음 설치하고 설정하는 과정을 단계별로 설명드리겠습니다.

1. Node.js 및 npm 설치

React를 사용하려면 먼저 Node.js와 npm(Node Package Manager)을 설치해야 합니다. Node.js는 JavaScript 런타임 환경이며, npm은 패키지 관리 도구입니다. Node.js 공식 웹사이트에서 최신 LTS 버전을 다운로드하여 설치합니다. 설치 후에는 터미널(혹은 명령 프롬프트)을 열어 다음 명령어를 입력해 설치가 제대로 되었는지 확인합니다.

node -v
npm -v

위 명령어를 입력하면 각각 Node.js와 npm의 버전이 출력됩니다. 설치가 완료되었음을 의미합니다.

2. React 프로젝트 생성

Node.js와 npm이 설치되었으니, 이제 React 프로젝트를 생성해보겠습니다. 가장 간단한 방법은 Facebook에서 제공하는 Create React App 도구를 사용하는 것입니다. Create React App은 초기 설정을 자동으로 처리해주어 매우 편리합니다. 터미널에서 다음 명령어를 실행합니다.

npx create-react-app my-app

위 명령어에서 my-app은 프로젝트 이름입니다. 원하는 이름으로 변경하셔도 됩니다. 명령어가 실행되면 필요한 파일들이 다운로드되고 기본 구조가 생성됩니다.

3. 프로젝트 디렉토리로 이동

프로젝트가 생성되면 해당 디렉토리로 이동하여 개발 서버를 시작할 수 있습니다. 터미널에서 다음 명령어를 입력하세요.

cd my-app
npm start

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

4. 디렉토리 구조 이해하기

이제 프로젝트의 디렉토리 구조를 이해해봅시다. Create React App이 생성한 기본 디렉토리 구조는 다음과 같습니다.

  • public/: 정적 파일이 위치하는 폴더입니다. 주로 index.html 파일이 있습니다.
  • src/: 실제 개발을 진행하는 폴더로, React 컴포넌트와 자바스크립트 파일이 위치합니다.
  • node_modules/: 프로젝트에 필요한 모든 npm 패키지가 설치되는 폴더입니다.
  • package.json: 프로젝트 설정과 의존성 목록이 포함된 파일입니다.

각 폴더와 파일의 역할을 이해하면 프로젝트를 관리하는 데 도움이 됩니다.

5. 첫 번째 React 컴포넌트 만들기

이제 첫 번째 React 컴포넌트를 만들어보겠습니다. src 폴더 내에 components 폴더를 생성하고, 그 안에 MyComponent.js 파일을 추가합니다. 다음은 기본 컴포넌트 코드입니다.

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is my first component.</p>
    </div>
  );
}

export default MyComponent;

그 다음, src/App.js 파일을 열어 MyComponent를 불러와서 사용합니다.

import React from 'react';
import MyComponent from './components/MyComponent';

function App() {
  return (
    <div className="App">
      <MyComponent />
    </div>
  );
}

export default App;

이제 브라우저를 새로고침하면 "Hello, React!"라는 메시지가 표시되는 것을 확인할 수 있습니다.

6. 결론

React의 초기 설정은 간단하면서도 강력합니다. Node.js와 npm을 설치하고 Create React App을 사용하여 프로젝트를 생성하면 대부분의 초기 설정은 자동으로 처리됩니다. 이후에는 컴포넌트를 추가하고 스타일링을 적용하며 자신만의 React 앱을 구축할 수 있습니다. 이번 가이드가 여러분의 React 개발 여정에 도움이 되길 바랍니다.

반응형