[멀티캠퍼스] 풀스택 개발자 아카데미 (6)

목차 보기

1. 왜 React를 사용하는가?
2.React 핵심 개념
3.리액트 프로젝트 시작하기
4.리액트 생태계
5.Next.js
- 아카데미 과정 수업에서 아쉬운 점

시리즈·멀티캠퍼스 JAVA 풀스택 개발자 아카데미 6회차(30개의 글)

···
5.[멀티캠퍼스] 풀스택 개발자 아카데미 (5) - jQuery(2)
6.[멀티캠퍼스] 풀스택 개발자 아카데미 (6) - React현재
7.[멀티캠퍼스] 풀스택 개발자 아카데미 (7) - Java(1)
···

React는 오늘날 웹 프론트엔드 개발에서 가장 중요한 기술 중 하나로 자리 잡았다. 페이스북이 개발한 이 자바스크립트 라이브러리는 사용자 인터페이스(UI)를 효율적으로 구축할 수 있도록 돕는다.

1. 왜 React를 사용하는가?

과거의 웹 개발은 웹페이지의 동적인 UI를 구현하기 위해 자바스크립트로 직접 DOM(Document Object Model) 엘리먼트를 하나하나 선택하고 조작해야 했다. 프로젝트의 규모가 커지고 UI가 복잡해질수록 수많은 DOM 요소를 직접 관리하는 것은 코드의 복잡도를 높이고 유지보수를 어렵게 만드는 주된 원인이었다.

React와 같은 라이브러리/프레임워크는 이러한 문제를 해결하기 위해 등장했다. 개발자가 DOM을 직접 조작하는 대신, UI가 어떤 모습이어야 하는지를 선언적으로 정의하면 React가 데이터 변경에 따라 화면을 효율적으로 업데이트해준다. 이를 통해 개발자는 오직 UI 개발에만 집중할 수 있어 생산성과 유지보수성을 극대화할 수 있다.

2.React 핵심 개념

React를 이해하기 위해서는 몇 가지 핵심 개념을 반드시 알아야 한다.

2.1.Virtual DOM (가상돔)

React의 성능을 논할 때 빼놓을 수 없는 개념이다. 브라우저는 데이터가 변경될 때마다 DOM 전체를 새로 그리는 방식이라 성능 저하가 발생할 수 있다. React는 이 문제를 해결하기 위해 Virtual DOM이라는 개념을 도입했다.

Virtual DOM은 실제 DOM의 구조를 자바스크립트 객체 형태로 메모리에 저장한 것이다. 데이터에 변화가 생기면, React는 실제 DOM에 바로 적용하는 대신 메모리에 있는 Virtual DOM에 먼저 변경 사항을 렌더링한다. 이후, 이전의 Virtual DOM과 변경된 Virtual DOM을 비교(Diffing)하여 실제 변경이 필요한 부분만 찾아내어 실제 DOM에 한 번에 적용(Patch)한다. 이 방식은 불필요한 DOM 조작을 최소화하여 애플리케이션의 성능을 크게 향상시킨다.

2.2.컴포넌트 (Component)

컴포넌트는 React의 가장 핵심적인 빌딩 블록이다. 이는 독립적인 기능을 수행하는 UI 조각으로, 마치 레고 블록처럼 조립하여 하나의 완성된 애플리케이션을 만들 수 있다. 예를 들어, 하나의 웹 페이지는 Header, NavigationBar, ArticleList, Footer 등의 컴포넌트로 나눌 수 있다.

이러한 컴포넌트 기반 개발(Component-Based Development) 방식은 코드의 재사용성을 높이고, 각 기능 단위로 개발 및 테스트가 가능하게 하여 유지보수를 매우 용이하게 만든다.

tsx

import type { JSX } from "react";
import Header from "./components/Header";
import Nav from "./components/Nav";
import Content from "./components/Content";
import Footer from "./components/Footer";

function App(): JSX.Element {
  return (
    <div>
      <Header />
      <Nav />
      <Content />
      <Footer />
    </div>
  );
}

export default App;

2.3.JSX (JavaScript XML)

JSX는 자바스크립트를 확장한 문법으로, JavaScript 코드 안에서 HTML과 유사한 형태로 UI를 작성할 수 있게 해준다. 이는 UI 구조를 직관적으로 파악할 수 있게 돕지만, 몇 가지 규칙이 있다.

HTML의 class 속성 대신 className을 사용해야 한다.
모든 요소는 하나의 최상위 태그로 감싸져야 한다.
JavaScript 표현식(변수, 함수 호출 등)을 사용하려면 중괄호 {}로 감싸야 한다.

tsx

import { useState, type JSX } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App(): JSX.Element {
  const [count, setCount] = useState(0);

  function handleClick(): void {
    setCount((prevCount) => prevCount + 1);
  }

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={handleClick}>count is {count}</button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

2.4.Props와 State

Props와 State는 컴포넌트에서 데이터를 다루는 두 가지 핵심적인 방법이다.

Props: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 '속성'이다. Props는 자식 컴포넌트 내에서 변경할 수 없는 읽기 전용(Read-only) 데이터다.
State: 컴포넌트 내부에서 자체적으로 관리하며 변경될 수 있는 데이터다. State가 변경되면 React는 해당 컴포넌트를 자동으로 다시 렌더링(Re-rendering)하여 화면을 업데이트한다. 함수형 컴포넌트에서는 useState Hook을 사용하여 State를 관리한다.

jsx

import { type JSX, useState } from "react";

// 자식 컴포넌트
function Counter({ initialCount }): JSX.Element {
  // props로 initialCount를 받음
  const [count, setCount] = useState(initialCount); // state로 count를 관리

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// 부모 컴포넌트
function App() {
  return <Counter initialCount={0} />; // props로 0을 전달
}

2.5.Effect Hook(UseEffect)

React 컴포넌트는 UI를 그리는 것이 주된 역할이지만, 때로는 서버에서 데이터를 가져오거나(API) 타이머를 설정하는 등 부수적인 작업이 필요할 때가 있다. 이러한 작업을 Side Effects라고 하며, useEffect는 바로 이 Side Effect를 처리하기 위한 Hook이다.

useEffect는 실행할 함수와 의존성 배열(Dependency Array) 라는 두 인자를 받고, 이 의존성 배열로 실행 시점을 제어할 수 있다.

useEffect(() => { /* 작업 */ }. []);
- **빈 배열 []**을 전달하면, 컴포넌트가 처음 화면에 나타날 때 단 한 번만 실행된다. 초기 데이터를 불러오는 경우에 주로 사용한다.
useEffect(() => { /* 작업*/ }, [...]);
- 배열한에 특정 state나 props를 넣으면, 해당 값이 변경될 때마다 코드가 다시 실행된다.

또한 useEffect는 메모리 누수를 방지하기 위해, 이펙트 함수 내에서 정리(clean up) 함수를 반환할 수 있다. 이는 컴포넌트가 화면에서 사라지거나, 이펙트가 다시 실행되기 직전에 호출되어 타이머를 해제하는 등의 뒷정리를 수행한다.

jsx

import { useState, useEffect, type JSX } from "react";

function PostViewer(): JSX.Element {
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 컴포넌트가 처음 렌더링될 때 데이터 가져오기
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then((response) => response.json())
      .then((data) => {
        setPost(data);
        setLoading(false);
      });
  }, []); // 빈 배열: 이 effect는 마운트 시 한 번만 실행됩니다.

  if (loading) {
    return <p>로딩 중...</p>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

3.리액트 프로젝트 시작하기

풀스택 아카데미 수업에서는 create-react-app(CRA)을 사용하여 프로젝트를 생성하라고 안내한다. 하지만 2025년 현재, CRA는 더 이상 React 공식 문서에서 추천하는 방식이 아니다. CRA는 내부적으로 Webpack이라는 번들러를 사용하는데, 프로젝트 규모가 커질수록 개발 서버 구동 속도와 빌드 속도가 현저히 느려지는 단점이 있다.

이제는 Vite가 그 자리를 대체하는 새로운 표준으로 자리 잡았다. Vite는 다음과 같은 명확한 장점을 가진다.

압도적으로 빠른 개발 서버: Vite는 개발 환경에서 Native ES Modules(ESM)을 사용하여 소스 코드를 브라우저에 직접 제공한다. 전체 애플리케이션을 번들링하고 시작하는 CRA와 달리, 브라우저가 요청하는 파일만 즉시 변환하여 전달하므로 개발 서버 시작 속도가 거의 즉시에 가깝다.
신속한 HMR(Hot Module Replacement): 코드 수정 시, Vite는 수정된 모듈과 관련된 부분만 교체한다. 이는 전체 번들을 다시 계산하는 CRA보다 훨씬 빨라 개발 경험을 쾌적하게 만든다.
빠른 빌드 속도: 프로덕션 빌드 시에는 Rollup이라는 빠르고 효율적인 번들러를 사용하여 최적화된 결과물을 생성한다.

Vite로 React 프로젝트를 시작하는 방법은 매우 간단하다.

bash

# 'my-vite-app'이라는 이름의 React 프로젝트 생성 (TypeScript 템플릿)
npm create vite@latest my-vite-app -- --template react-ts

4.리액트 생태계

React 자체는 UI 라이브러리이므로, 완전한 애플리케이션을 만들기 위해서는 라우팅, 전역 상태 관리 등 추가적인 라이브러리의 도움이 필요하다.

라우팅 (Routing): react-router-dom은 React의 표준 라우팅 라이브러리다. 사용자가 요청하는 URL 경로에 따라 각기 다른 컴포넌트(페이지)를 보여주는 기능을 하며, <a> 태그 대신 <Link> 컴포넌트를 사용하여 페이지를 새로고침 없이 부드럽게 전환시킨다.
상태 관리 (State Management): 컴포넌트 구조가 복잡해지면 props를 여러 단계에 걸쳐 전달하는 'Props Drilling' 문제가 발생한다. 이를 해결하기 위해 전역 상태 관리 라이브러리를 사용한다. **Redux Toolkit(RTK)**은 Redux를 훨씬 쉽고 간결하게 사용할 수 있도록 만든 공식 도구 모음이며, 특히 대규모 애플리케이션에서 상태를 체계적으로 관리하는 데 효과적이다. Redux Toolkit은 모든 상태를 '스토어'라는 중앙 저장소에 보관하고, 어떤 컴포넌트든 스토어에 직접 접근하여 상태를 사용하거나 변경할 수 있게 한다.

5.Next.js

Next.js는 React 기반의 프레임워크로, 단순한 UI 라이브러리인 React에 서버 사이드 렌더링(SSR), 파일 시스템 기반 라우팅, 코드 분할, 이미지 최적화 등 강력한 기능들을 추가하여 완성도 높은 웹 애플리케이션을 쉽게 만들 수 있도록 돕는다. 특히 Next.js 13 버전부터 도입된 App Router는 레이아웃과 페이지를 직관적으로 구성할 수 있게 해주며, 기본적으로 서버 컴포넌트를 사용하여 성능을 극대화한다. 사용자와의 상호작용이 필요한 부분(예: onClick, useState 사용)만 "use client" 지시문을 추가하여 클라이언트 컴포넌트로 전환하면 된다.

아카데미 과정 수업에서 아쉬운 점

제공된 자료는 React의 기본적인 개념을 잘 담고 있지만, 현대적인 개발 트렌드를 반영하기에는 몇 가지 아쉬운 점이 있었다.

Vite 도입의 부재: 가장 큰 아쉬움은 create-react-app(CRA)을 기준으로 설명하는 점이다. 앞서 설명했듯, Vite는 개발 경험과 성능 면에서 CRA를 월등히 앞서므로, 2025년 현재 React를 시작한다면 반드시 Vite를 사용해야 한다.
핵심 Hooks 설명 부족: useState는 잘 설명되었지만, 리액트 개발의 필수 요소인 useEffect(데이터 가져오기, 구독 등 부수 효과 처리), useContext(간단한 전역 상태 관리) 등 다른 핵심 Hooks에 대한 설명이 거의 없다.
다양한 스타일링 방법론 누락: className과 CSS 파일을 이용하는 전통적인 방식 외에, 현대 React 개발에서는 Styled-components나 Emotion 같은 CSS-in-JS 라이브러리, 또는 Tailwind CSS 같은 유틸리티 우선 CSS 프레임워크가 널리 쓰인다. 이러한 대안에 대한 소개가 없어 아쉽다.
Redux와 Context API의 역할 구분 불명확: Redux를 소개하면서 Context API도 언급하지만, 언제 Redux를 써야 하고 언제 Context API로 충분한지에 대한 가이드가 부족하다. 보통 소규모의 전역 상태는 Context API로, 복잡하고 거대한 상태는 Redux Toolkit으로 관리하는 것이 일반적이다.
Redux Toolkit: 2025년 기준 현재 순수 Redux는 거의 사용되지 않으며, Redux Toolkit(RTK)가 사실상의 표준이 되었다. 아쉽게도 수업에서는 순수 Redux를 사용하는 점이 아쉬웠다. 언급했던 것처럼 RTK는 순수 Redux에 비해 쉽고 간결하기 때문에, 학생들도 쉽게 학습할 수 있음에도 이를 활용하지 않는다는 점이 아쉬웠다.

[멀티캠퍼스] 풀스택 개발자 아카데미 (6) - React