린찬승하우스: React 주요 특징

2025년 1월 18일 토요일

1 React 시작하기: React란 무엇인가? 설치 및 개발 환경 설정

React, React란, React 주요 특징, React 개발 환경, Create React App, Node.js 설치, React 프로젝트 생성, React 프로젝트 폴더 구조, React 첫 번째 컴포넌트

React란 무엇인가?

React는 **페이스북(Facebook)**에서 개발한 오픈 소스 프론트엔드 라이브러리입니다. React는 컴포넌트 기반 아키텍처를 통해 재사용성과 유지보수성이 뛰어난 UI(User Interface, 사용자 인터페이스)를 개발할 수 있도록 도와줍니다.

오늘날 많은 기업들이 React를 사용하여 웹 애플리케이션을 개발하고 있으며, 특히 **싱글 페이지 애플리케이션(SPA, Single Page Application)**을 만들 때 많이 활용됩니다.

React의 주요 특징

컴포넌트 기반 구조: 작은 단위의 컴포넌트(Component)로 UI를 구성하여 개발이 용이합니다.
가상 DOM(Virtual DOM) 사용: DOM을 직접 조작하지 않고 가상의 DOM을 활용하여 성능을 최적화합니다.
단방향 데이터 흐름: 데이터의 흐름이 예측 가능하며, 유지보수가 편리합니다.
JSX(JavaScript XML) 지원: HTML과 JavaScript를 결합하여 코드의 가독성을 높입니다.
React 훅(Hook) 지원: 상태(state)와 생명주기 메서드를 간편하게 관리할 수 있습니다.

React는 이러한 특징 덕분에 많은 개발자들에게 사랑받고 있으며, 현재 네이버, 카카오, 페이스북, 인스타그램과 같은 글로벌 기업에서도 널리 사용하고 있습니다.

React 개발 환경 설정하기

React를 사용하려면 먼저 개발 환경을 설정해야 합니다. React 프로젝트를 생성하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 **Create React App(CRA)**을 사용하는 것입니다.

1. Node.js 설치하기

React를 사용하려면 Node.js가 필요합니다. Node.js는 JavaScript 실행 환경이며, npm(Node Package Manager)과 함께 패키지를 관리할 수 있도록 도와줍니다.

Node.js는 공식 웹사이트에서 다운로드할 수 있습니다.

Node.js 다운로드

설치 후, 터미널이나 명령 프롬프트에서 다음 명령어를 입력하여 설치가 완료되었는지 확인합니다.

node -v  # Node.js 버전 확인
npm -v   # npm 버전 확인

2. Create React App으로 프로젝트 생성하기

Node.js를 설치했다면 이제 React 프로젝트를 생성할 수 있습니다. 터미널에서 다음 명령어를 실행하세요.

npx create-react-app my-app

위 명령어는 npx를 사용하여 최신 버전의 Create React App을 실행하고, my-app이라는 폴더에 React 프로젝트를 생성합니다.

설치가 완료되면 프로젝트 폴더로 이동합니다.

cd my-app

그리고 개발 서버를 실행합니다.

npm start

정상적으로 실행되면 웹 브라우저에서 http://localhost:3000 주소로 접근하여 React 애플리케이션이 실행되는 것을 확인할 수 있습니다.

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

React 프로젝트를 생성하면 다음과 같은 폴더 구조가 생성됩니다.

my-app/
├── node_modules/      # 설치된 패키지
├── public/            # 정적 파일 폴더
├── src/               # 소스 코드 폴더
│   ├── App.js         # 메인 컴포넌트
│   ├── index.js       # 진입점 파일
├── package.json       # 프로젝트 설정 파일
├── .gitignore         # Git에서 제외할 파일 목록
└── README.md          # 프로젝트 설명 파일

4. 첫 번째 React 컴포넌트 수정하기

React 프로젝트가 정상적으로 실행되었다면, 기본 컴포넌트를 수정해 보겠습니다. src/App.js 파일을 열고 다음과 같이 수정하세요.

import React from 'react';

function App() {
  return (
    <div>
      <h1>안녕하세요! 첫 번째 React 앱입니다.</h1>
      <p>React를 배우고 있어요.</p>
    </div>
  );
}

export default App;

파일을 저장한 후 브라우저를 새로고침하면 변경된 화면이 표시됩니다.

마무리

이제 React가 무엇인지 이해하고, 개발 환경을 설정하여 첫 번째 React 애플리케이션을 실행해 보았습니다.

React 설치, Create React App을 통한 프로젝트 생성, 개발 서버 실행 방법 등을 익혔다면, 다음 장에서는 JSX와 기본 문법에 대해 알아보겠습니다.

React를 활용하여 점점 더 멋진 웹 애플리케이션을 만들어 보세요!

린찬승하우스