React 설명 — 그것이 무엇이며, 왜 필요한지, 그리고 올바르게 설정하는 방법

Source: Dev.to

번역할 텍스트가 제공되지 않았습니다. 번역이 필요한 본문을 알려주시면 도와드리겠습니다.

소개

안녕!

시작하기 전에— JavaScript로 뭔가를 만들면서 다음과 같은 생각을 해본 적 있나요:

“왜 이렇게 빨리 복잡해지는 걸까?”

당신만 그런 것이 아닙니다. 모든 개발자가 그 장벽에 부딪힙니다.

바로 그 때문에 React가 존재합니다. 이 글을 끝까지 읽으면 React가 무엇인지, 왜 중요한지, 그리고 올바르게 시작하는 방법을 알게 될 것입니다.

시작해봅시다.

1. React란 무엇인가?

React는 2013년에 Facebook(현재 Meta)에서 만든 JavaScript 라이브러리입니다.
사용자 인터페이스를 구축하는 데 사용됩니다 — 사용자가 보고 상호작용하는 앱의 부분입니다.

React는 JavaScript를 대체하지 않습니다. JavaScript로 작성되었지만 복잡한 UI를 더 스마트하고 깔끔하게 구축할 수 있게 해줍니다.

비유

2. 왜 우리는 순수 JavaScript 대신 React가 필요한가?

순수 JavaScript도 동작합니다. 이를 사용해 무엇이든 만들 수 있습니다. 하지만 앱이 커질수록 문제가 발생하기 시작합니다.

실제 예시

소셜 미디어 피드를 만든다고 가정해 보세요. 다음과 같은 요소가 있습니다:

• 게시물 목록
• 각 게시물에 있는 좋아요 버튼
• 댓글이 달리면 업데이트되는 댓글 수
• 무언가 변경될 때 업데이트되는 알림 벨 아이콘
• 상단에 위치한 사용자 프로필 섹션

순수 JavaScript에서는 무언가가 바뀔 때마다 DOM에서 해당 요소를 직접 찾아서 업데이트해야 합니다:

// Plain JavaScript — updating manually every time
document.getElementById("like-count").innerText = newCount;
document.getElementById("notification-bell").innerText = newNotifications;
document.getElementById("comment-count").innerText = newComments;

이 작업을 50개의 서로 다른 페이지 부분에 대해 수행한다고 생각해 보세요.
코드가 복잡해지고, 속도가 느려지며, 작은 실수 하나가 전체를 망가뜨릴 수 있습니다.

React는 이 문제를 컴포넌트와 가상 DOM이라는 핵심 아이디어로 해결합니다.

3. React가 문제를 해결하는 방법

React는 모든 것을 바꾸는 두 가지 개념을 도입합니다.

컴포넌트

컴포넌트는 작고 재사용 가능한 UI 조각입니다.
하나의 거대한 HTML 파일을 작성하는 대신 페이지를 독립적인 조각들로 나눕니다.

function LikeButton() {
  return Like;
}

function Post() {
  return (
    <div>
      <h2>This is a post</h2>
    </div>
  );
}

각 컴포넌트는 자체 로직과 표시를 관리합니다. 한 번 만들면 어디서든 사용할 수 있습니다.

가상 DOM

간단한 질문: 게시물에 “좋아요”를 클릭하면 전체 페이지가 새로고침되어야 할까요, 아니면 좋아요 수만 업데이트되어야 할까요?

당연히 좋아요 수만 업데이트됩니다. 순수 JavaScript에서는 직접 이를 판단하고 해당 요소를 수동으로 업데이트해야 합니다.

React는 가상 DOM을 사용해 이를 자동으로 처리합니다:

1. React는 실제 DOM의 복사본을 메모리에 보관합니다—가상 DOM입니다.
2. 무언가가 변하면 React는 새로운 가상 DOM을 생성합니다.
3. 기존 가상 DOM과 새로운 가상 DOM을 비교합니다.
4. 정확히 무엇이 변했는지 찾아냅니다.
5. 실제 DOM에서 그 부분만 업데이트합니다.

결과: 더 빠른 업데이트, 작업량 감소, 수동 DOM 탐색 불필요.

4. 싱글‑페이지 애플리케이션 (SPA)이란?

앞으로 진행하기 전에 이 개념을 이해해야 합니다. React는 바로 이 용도를 위해 만들어졌기 때문입니다.

• 전통적인 웹사이트는 링크를 클릭할 때마다 전체 페이지를 다시 로드합니다.

  • “About”를 클릭 → 브라우저가 새로운 HTML 페이지를 요청 → 페이지 전체가 새로 고침됩니다.
  • 이것이 멀티‑페이지 애플리케이션 (MPA) 입니다.

• 싱글‑페이지 애플리케이션 (SPA) 은 시작 시 하나의 HTML 페이지만 로드합니다. 그 이후에는 React가 담당합니다. 탐색할 때 React는 화면에 표시되는 내용만 교체합니다—전체 페이지를 새로 고치지 않으며, 새로운 페이지를 요청하지도 않습니다.

Analogy: TV를 생각해 보세요. 채널을 바꿀 때 TV 자체가 재시작되는 것이 아니라 화면에 표시되는 내용만 바뀝니다. 바로 이것이 SPA가 작동하는 방식입니다.

Quick question

Gmail을 사용할 때, 이메일을 열면 페이지가 완전히 새로 고쳐지지 않는다는 것을 눈치채셨나요? 오른쪽에 이메일 내용만 나타납니다. 이것이 바로 SPA가 동작하는 예시입니다.

5. 단일 페이지 애플리케이션 vs. 다중 페이지 애플리케이션

6. React 설정 방법

React 프로젝트를 설정하는 두 가지 인기 있는 방법이 있습니다:

1. Create React App (CRA)
2. Vite

선택하기 전에 두 가지를 모두 이해해 보세요.

7. Create React App (CRA)

CRA는 오랫동안 React 프로젝트를 시작하는 공식 방법이었습니다. 한 번의 명령어만 실행하면 React, Webpack, Babel, 그리고 개발 서버까지 모두 설정해 줍니다.

npx create-react-app my-app
cd my-app
npm start

그게 전부입니다. React 앱이 [URL omitted] 에서 실행됩니다.

Project structure

my-app/
├─ node_modules/
├─ public/
│  └─ index.html
├─ src/
│  ├─ App.js
│  └─ index.js
└─ package.json

• src/App.js – React 코드를 작성하는 파일입니다.
• public/index.html – React가 주입하는 단일 HTML 파일입니다.

8. Vite

Vite는 최신이며 더 빠른 빌드 도구입니다. React 전용으로 만들어진 것은 아니지만 React를 매우 잘 지원하며 오늘날 대부분의 개발자들이 선호하는 선택이 되었습니다.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

React 앱이 [URL omitted] 에서 실행됩니다.

프로젝트 구조

my-app/
├─ node_modules/
├─ public/
├─ src/
│  ├─ App.jsx
│  └─ main.jsx
├─ index.html
├─ package.json
└─ vite.config.js

Quick Summary — 5 Things to Remember

1. React는 사용자 인터페이스를 구축하기 위해 사용되는 JavaScript 라이브러리 입니다.
2. 컴포넌트는 UI를 재사용 가능하고 독립적인 조각으로 나눌 수 있게 해줍니다.
3. Virtual DOM은 UI 업데이트를 빠르고 효율적으로 만듭니다.
4. SPA는 단일 HTML 페이지를 로드하고 전체 새로 고침 없이 콘텐츠를 교체합니다.
5. 필요에 따라 Create React App 또는 Vite로 React 프로젝트를 시작할 수 있습니다.

재사용 가능한 컴포넌트로 사용자 인터페이스 구축

React는 DOM 문제를 해결합니다 — 페이지를 수동으로 업데이트하는 대신, React는 무엇이 변경되었는지 파악하고 Virtual DOM을 사용해 해당 부분만 업데이트합니다.

React는 SPA(Single‑Page Application)를 위해 설계되었습니다 — 한 번 로드된 후 전체 페이지를 다시 로드하지 않고 콘텐츠를 교체하므로 빠르고 부드럽습니다.

SPA vs. MPA

• SPA는 앱 및 대시보드에 가장 적합합니다.
• MPA는 SEO가 바로 필요하고 콘텐츠가 많은 사이트에 가장 적합합니다.

Use Vite, Not CRA

• CRA는 더 이상 사용되지 않습니다.
• Vite는 더 빠르고 가볍으며 활발히 지원됩니다.
• 오늘날 모든 새로운 React 프로젝트에 적합한 선택입니다.

React는 처음에 큰 도전처럼 느껴질 수 있습니다. 하지만 컴포넌트, 상태(state), 그리고 Virtual DOM이 어떻게 작동하는지를 이해하면 모든 것이 자연스럽게 연결됩니다.

React를 배우는 가장 좋은 방법은 직접 무언가를 만들어 보는 것입니다.
작게 시작하세요: 카운터, 할 일 목록, 날씨 카드 등. 하나를 선택하고 만들어 보세요.

이 글이 React를 이해하는 데 도움이 되었다면 아래에 댓글을 남겨 주세요. 먼저 무엇을 만들 계획인가요?

읽어 주셔서 감사합니다. 계속해서 만들어 나가세요.