React 기초 다지기 - 2편 - (React 프로젝트 생성 및 구동)

지난시간에는 React를 배우기에 앞서 어떤 선행학습이 필요했고,

어떤 도구를 사용하며 React를 배우기에 유용한 사이트들을 소개하였습니다.

 

아래 URL을 클릭하면 1편 내용으로 이동합니다.

2024.07.09 - [IT 일기/React] - React 기초 다지기 - 1편 - (React 시작하기)

 

오늘은 React 프로젝트를 생성하고 node.js를 구동시켜 화면이 켜지는 것 까지 진행해보겠습니다.

 

---

1. 개발 환경 설정 (Windows)

먼저 React 프로젝트를 만들기 위해 필요한 개발 환경을 설정해야 합니다. 여기에는 Node.js와 npm을 설치하는 과정이 포함됩니다.

Node.js 및 npm 설치:

1. Node.js 공식 사이트에 접속하여 LTS(Long Term Support) 버전을 다운로드하고 설치합니다. Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다.
2. 설치가 완료되면 명령 프롬프트(Command Prompt) 또는 PowerShell을 열고 다음 명령어를 입력하여 설치가 잘 되었는지 확인합니다:
   
   

node -v
npm -v

이 명령어를 통해 Node.js와 npm의 버전을 확인할 수 있습니다.

 

---

2. Create React App으로 새로운 프로젝트 생성

Create React App은 React 애플리케이션을 쉽게 생성할 수 있는 공식 도구입니다.

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

1. 명령 프롬프트 또는 PowerShell을 열고 프로젝트를 생성할 디렉토리로 이동합니다. 예를 들어, C:\Projects 폴더로 이동합니다
   

   cd C:\Projects

   
   
   
2. 다음 명령어를 입력하여 Create React App을 사용해 새로운 프로젝트를 생성합니다:여기서 my-first-react-app은 프로젝트의 이름입니다. 원하는 이름으로 변경할 수 있습니다.

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

3. Create React App이 프로젝트를 설정하는 데 몇 분 정도 걸릴 수 있습니다. 설정이 완료되면 프로젝트 디렉토리로 이동합니다

cd my-first-react-app

 

---

 

3. React 프로젝트 구조 이해하기

 

프로젝트 디렉토리에 생성된 기본 구조를 이해하는 것이 중요합니다. 주요 폴더와 파일은 다음과 같습니다

 

• public: 정적 파일들이 위치하는 곳입니다. index.html 파일이 포함되어 있습니다.
  
  
• src: 소스 코드가 위치하는 곳입니다. 주로 이 폴더에서 작업하게 됩니다.
  • index.js: React 애플리케이션의 진입점입니다.
  • App.js: 기본 컴포넌트 파일입니다. 이 파일을 수정하여 애플리케이션을 개발할 수 있습니다.

 

---

 

4. 개발 서버 실행 및 기본 페이지 확인

Create React App은 기본적으로 개발 서버를 설정해줍니다. 개발 서버를 실행하면 애플리케이션을 실시간으로 확인할 수 있습니다.

개발 서버 실행:

1. 명령 프롬프트 또는 PowerShell에서 프로젝트 디렉토리에 위치해 있는지 확인한 후 다음 명령어를 입력합니다: 

2. npm start

3. 명령어를 실행하면 개발 서버가 시작되고, 브라우저가 자동으로 열리면서 http://localhost:3000에서 애플리케이션이 실행됩니다.
   

   

---

 

5. React 컴포넌트 생성 및 수정

기본 페이지가 잘 실행되는 것을 확인한 후, React 컴포넌트를 생성하고 수정해보겠습니다.

 

기본 컴포넌트 수정

1. src/App.js 파일을 열고 기본 컴포넌트 코드를 수정합니다. 예를 들어, 다음과 같이 변경할 수 있습니다: 

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My First React App!</h1>
        <p>
          This is a simple React application.
        </p>
      </header>
    </div>
  );
}

export default App;

새로운 컴포넌트 생성

1. src 폴더 안에 새로운 파일 MyComponent.js를 생성합니다.
   
   
2. 다음과 같이 새로운 컴포넌트를 정의합니다:
   
    

   import React from 'react';
   
   function MyComponent() {
     return (
       <div>
         <h2>This is my custom component!</h2>
         <p>Hello, React!</p>
       </div>
     );
   }
   
   export default MyComponent;

   
   
   
   
3. App.js 파일에서 새로운 컴포넌트를 임포트하고 사용합니다

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My First React App!</h1>
        <p>
          This is a simple React application.
        </p>
        <MyComponent />
      </header>
    </div>
  );
}

export default App;

 

---

 

6. CSS 스타일링 추가

React 프로젝트에서 CSS 파일을 사용하여 스타일을 추가할 수 있습니다. App.css 파일을 열고 다음과 같이 스타일을 추가합니다:

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1.25rem;
}

h2 {
  color: #61dafb;
}

 

 

이제 브라우저에서 변경된 스타일을 확인할 수 있습니다.

 

---

 

결론

위 과정을 통해 Windows 환경에서 React 프로젝트를 처음부터 생성하고, 실행하며, 간단한 컴포넌트를 작성하고 스타일을 추가하는 방법을 배웠습니다.

 

React는 매우 강력한 라이브러리로, 이를 통해 복잡한 사용자 인터페이스를 효율적으로 구축할 수 있습니다. 더 깊이 있는 학습을 위해 다양한 튜토리얼과 공식 문서를 참고하면서 실습해보세요. React를 배우는 과정에서 많은 성취감을 느낄 수 있을 것입니다.