첫 번째 React 애플리케이션 만들기

공개 노트 검색

리액트 사용법 완벽 가이드

3. 새 리액트 애플리케이션 만들기

이 장에서는 새 리액트 애플리케이션을 만드는 방법에 대해 알아보겠습니다. 리액트를 배우는 과정에서 실제 애플리케이션을 만들어보는 것은 매우 중요합니다. 이를 통해 리액트의 핵심 개념과 기본적인 사용법을 습득할 수 있습니다.

새로운 리액트 애플리케이션을 시작하기 전에 사전에 필요한 소프트웨어와 도구들을 준비합니다. 아래는 주요 요구 사항입니다:

Node.js 설치 리액트는 Node.js 환경과 함께 작동합니다. 먼저 Node.js 웹사이트에서 Node.js를 다운로드하고 설치합니다. 설치하면 npm(Node Package Manager)도 자동으로 설치됩니다.
코드 편집기 설치 코드를 작성하기 위한 편집기로는 Visual Studio Code가 추천됩니다. Visual Studio Code 다운로드에서 다운로드하고 설치합니다.

개발 환경이 준비되었으면 리액트 애플리케이션을 생성할 준비가 되었습니다. 다음은 단계별 진행 방법입니다:

Create React App 실행하기 아래 명령어를 실행하여 새 리액트 프로젝트를 생성할 수 있습니다:
```
npx create-react-app my-app
cd my-app
npm start
```
- npx create-react-app my-app 명령은 create-react-app 패키지를 활용해 새 리액트 애플리케이션을 만듭니다.
- cd my-app는 방금 생성한 프로젝트 디렉토리로 이동합니다.
- npm start 명령은 프로젝트를 실행하여 웹 브라우저에서 애플리케이션을 확인 가능하게 합니다.
프로젝트 구조 이해하기 생성된 애플리케이션의 폴더 구조를 확인하면 다음과 같은 디렉토리와 파일들을 볼 수 있습니다:
- src: 여기서 주요 개발이 이루어집니다. App.js파일이 주요 시작 지점입니다.
- public: 공개 리소스들이 저장됩니다. index.html은 애플리케이션의 기본 진입점입니다.

일단 애플리케이션이 성공적으로 실행되었으면, src/App.js를 열어 첫 리액트 코드를 살짝 수정해볼 수 있습니다.

function App() {
  return (
    <div className="App">
      <h1>Welcome to My First React Application!</h1>
    </div>
  );
}

export default App;

위와 같이 변경한 후 브라우저를 새로 고침하면 화면에 "Welcome to My First React Application!" 메시지가 표시됩니다.

새 리액트 애플리케이션을 만드는 과정은 간단합니다. 주어진 명령어를 따라한다면 여러분도 몇 분 안에 리액트 개발을 시작할 수 있습니다. 앞으로의 장에서는 이 기본 프로젝트를 확장하고 다양한 리액트 기능을 탐구할 것입니다.