create-react-app을 통한 React 설치 및 첫 페이지 만들기: 프로젝트 구조 파악과 첫 컴포넌트 작성 방법.

작성일 : 2024-06-26

Create-React-App을 통한 React 설치 및 첫 페이지 만들기: 프로젝트 구조 파악과 첫 컴포넌트 작성 방법

React는 현대 웹 개발에서 가장 인기 있는 JavaScript 라이브러리 중 하나로, 컴포넌트 기반의 개발 방식을 제공합니다. 이 글에서는 create-react-app 도구를 사용하여 새로운 React 프로젝트를 설정하고, 기본 프로젝트 구조를 살펴본 후, 첫 컴포넌트를 작성하는 방법을 알아보겠습니다.

Create-React-App 설치 및 프로젝트 생성

create-react-app은 React 애플리케이션을 설정하고 시작하기 위한 간편한 도구입니다. 최신 React 개발 환경을 자동으로 설정해주기 때문에 복잡한 설정을 신경 쓸 필요 없이 바로 개발에 집중할 수 있습니다.

Create-React-App 설치하기

먼저, create-react-app을 설치해야 합니다. 이를 위해 터미널을 열고 다음 명령어를 실행합니다:


sh
npx create-react-app my-app

위 명령어는 npx 도구를 사용하여 create-react-app 패키지를 설치하고, 새 React 프로젝트를 생성합니다. 여기서 my-app은 여러분의 프로젝트 이름으로, 원하는 이름으로 변경할 수 있습니다.

프로젝트 구조 살펴보기

프로젝트가 생성되면 my-app 디렉토리로 이동하여 생성된 파일과 디렉토리를 확인할 수 있습니다:


sh
cd my-app
ls

기본적인 프로젝트 구조는 다음과 같습니다:

my-app/
|-- node_modules/
|-- public/
|   |-- index.html
|-- src/
|   |-- App.css
|   |-- App.js
|   |-- App.test.js
|   |-- index.css
|   |-- index.js
|-- .gitignore
|-- package.json
|-- README.md

이제 각 디렉토리와 파일의 역할을 간략히 살펴보겠습니다:

node_modules/: 프로젝트에 필요한 외부 패키지가 설치되는 디렉토리입니다.
public/: 정적 파일을 저장하는 디렉토리입니다. index.html 파일을 포함하여 React 애플리케이션의 진입점 역할을 합니다.
src/: 소스 코드가 위치한 디렉토리입니다. 주요 React 컴포넌트와 스타일링 파일이 여기에 포함됩니다.
.gitignore: Git에서 추적하지 않을 파일과 디렉토리를 지정합니다.
package.json: 프로젝트 메타데이터와 종속성을 관리합니다.
README.md: 프로젝트에 대한 기본 정보를 담습니다.

첫 React 컴포넌트 작성하기

React는 컴포넌트 기반으로 구성됩니다. 각 컴포넌트는 독립적이고, 재사용 가능한 코드 블록을 의미합니다. 이제 첫 번째 React 컴포넌트를 작성해보겠습니다.

App 컴포넌트 수정하기

기본적으로 생성되는 App.js 파일을 열어보면 기본 템플릿이 포함되어 있습니다. 이 파일을 수정하여 여러분의 첫 번째 컴포넌트를 작성할 수 있습니다:


js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React!</h1>
        <p>이것이 첫 번째 리액트 컴포넌트입니다.</p>
      </header>
    </div>
  );
}

export default App;

위 코드는 간단한 React 컴포넌트를 정의합니다. function App()는 새로운 컴포넌트를 생성하며, return 문 안에 JSX(JavaScript XML)를 포함하여 렌더링할 내용을 지정합니다. 여기서는 Hello, React!라는 제목과 간단한 문장을 포함하였습니다.

새로운 컴포넌트 작성하기

필요에 따라 새로운 컴포넌트를 추가하여 애플리케이션을 확장할 수 있습니다. 예를 들어, src 디렉토리에 새로운 파일 MyComponent.js를 생성합니다. 그리고 다음과 같이 작성합니다:


js
import React from 'react';
import './MyComponent.css';

function MyComponent() {
  return (
    <div className="MyComponent">
      <h2>Welcome to My Component!</h2>
      <p>이것은 나만의 새로운 컴포넌트입니다.</p>
    </div>
  );
}

export default MyComponent;

이제 App.js 파일에서 새로운 컴포넌트를 임포트하고 사용해봅니다:


js
import React from 'react';
import './App.css';
import MyComponent from './MyComponent';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React!</h1>
        <p>이것이 첫 번째 리액트 컴포넌트입니다.</p>
        <MyComponent />
      </header>
    </div>
  );
}

export default App;

이제 애플리케이션을 실행하면 새로운 컴포넌트가 포함된 페이지를 볼 수 있습니다. 터미널에서 다음 명령어를 실행하여 개발 서버를 시작하세요:


sh
npm start

브라우저에서 http://localhost:3000 URL로 접속하면 여러분의 첫 React 애플리케이션이 표시됩니다.

요약

이 글에서는 create-react-app을 사용하여 React 프로젝트를 시작하는 방법과 기본 프로젝트 구조를 살펴보았습니다. 또한 첫 번째 컴포넌트를 작성하고, 새로운 컴포넌트를 추가하여 애플리케이션을 확장하는 방법에 대해서도 배웠습니다. 이제 이 기초를 바탕으로 더 복잡한 React 애플리케이션을 개발할 수 있을 것입니다.