React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(4)

React 개발 환경 구축: 설치부터 기본 컴포넌트 생성까지

이번 강의에서는 React 개발 환경을 구축하고, 기본적인 Create React App을 사용하여 프로젝트를 설정하는 방법을 다룹니다. 또한 JSX 문법을 이해하고, 간단한 컴포넌트를 생성하는 과정을 설명합니다.

설치부터 기본 컴포넌트 생성까지

---

1. React 설치 및 기본 프로젝트 설정

React는 사용자 인터페이스(UI)를 구축하는 데 사용되는 자바스크립트 라이브러리입니다. 이제 Create React App을 이용해 React 프로젝트를 쉽게 설정해보겠습니다.

1.1 Node.js 설치 확인

React를 사용하기 위해서는 Node.js가 시스템에 설치되어 있어야 합니다. 먼저 Node.js가 설치되어 있는지 확인하고, 설치되어 있지 않다면 설치하세요.

node -v
npm -v

 

1.2 Create React App 설치

Create React App은 React 프로젝트를 빠르게 시작할 수 있도록 도와주는 도구입니다. 이 도구를 사용하면 번거로운 설정 없이 간단한 명령어로 React 프로젝트를 초기화할 수 있습니다.

1. 프로젝트 폴더 생성(C:\ 에 생성):

npx create-react-app my-react-app

 

이 명령어는 my-react-app이라는 새로운 폴더에 React 프로젝트를 생성합니다. npx는 npm의 패키지 실행 도구로, Create React App을 설치 없이 바로 사용할 수 있게 해줍니다.

프로젝트 생성

프로젝트 생성 완료

1. 프로젝트 폴더로 이동:

cd my-react-app

1. React 개발 서버 실행:

npm start

 

이 명령어를 실행하면 기본 React 개발 서버가 열리며, 브라우저에서 http://localhost:3000에 접속하여 결과를 확인할 수 있습니다.

1.3 폴더 구조

Create React App을 사용하면 다음과 같은 폴더 구조가 자동으로 생성됩니다:

my-react-app/
│
├── public/        // 정적 파일 폴더
├── src/           // 실제 개발 소스 폴더
│   ├── App.js     // 메인 컴포넌트
│   ├── index.js   // 엔트리 파일
├── node_modules/  // 설치된 모듈 폴더
├── package.json   // 프로젝트 설정 파일
└── ...            // 기타 설정 파일들

---

2. 기본적인 컴포넌트 생성 및 JSX 문법 이해

이제 기본적인 React 컴포넌트를 생성하고, JSX 문법을 이해하는 방법을 배워봅니다.

2.1 JSX란?

JSX는 JavaScript XML의 약자로, JavaScript 코드 안에서 HTML 요소를 사용할 수 있도록 해주는 문법입니다. JSX는 React에서 UI를 만들 때 필수적인 요소입니다.

예시:

// App.js
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>이것은 JSX로 작성된 코드입니다.</p>
    </div>
  );
}

export default App;

이 코드는 React 컴포넌트에서 div와 같은 HTML 요소를 JSX를 사용하여 렌더링하는 간단한 예시입니다.

2.2 기본 컴포넌트 생성

React에서 컴포넌트는 UI의 재사용 가능한 조각입니다. 이제 새로운 컴포넌트를 만들어보겠습니다.

• 새로운 컴포넌트 파일 생성: src 폴더 안에 Greeting.js라는 파일을 만듭니다.

// Greeting.js
function Greeting() {
  return (
    <div>
      <h2>Welcome to My React App!</h2>
      <p>React 컴포넌트는 재사용 가능합니다.</p>
    </div>
  );
}

export default Greeting;

• 컴포넌트 사용: 생성한 Greeting 컴포넌트를 App.js에 추가합니다.

// App.js
import React from 'react';
import Greeting from './Greeting'; // Greeting 컴포넌트 불러오기

function App() {
  return (
    <div>
      <Greeting />
      <p>이것은 App 컴포넌트의 내용입니다.</p>
    </div>
  );
}

export default App;

컴포넌트 사용해서 실행한 결과

2.3 컴포넌트의 특징

• 컴포넌트 재사용성: 컴포넌트는 여러 곳에서 재사용할 수 있어, 유지보수가 용이합니다.
• Props를 통한 데이터 전달: 부모 컴포넌트에서 자식 컴포넌트로 Props를 통해 데이터를 전달할 수 있습니다.
• State를 통한 동적 데이터 처리: 컴포넌트의 상태를 이용하여 동적인 UI를 만들 수 있습니다.

---

3. React 개발 환경의 장점

React 개발 환경을 구축하면 다음과 같은 장점을 누릴 수 있습니다:

• 빠른 개발 서버: npm start 명령어를 통해 빠르게 개발 서버를 실행하고, 실시간으로 코드 변경 사항을 확인할 수 있습니다.
• 컴포넌트 기반 개발: UI를 작은 컴포넌트로 분리하여 재사용성과 유지보수를 높입니다.
• JSX 문법: JSX를 사용하여 JavaScript 안에서 HTML 요소를 직관적으로 작성할 수 있습니다.

---

결론

이 강의를 통해 React 개발 환경을 설치하고, 기본적인 컴포넌트를 생성하는 과정을 학습했습니다. 또한 JSX 문법을 통해 React 컴포넌트를 쉽게 작성하는 방법도 다뤘습니다. 다음 강의에서는 React의 상태 관리와 이벤트 처리에 대해 다룰 예정입니다.