React가 SPA를 구현하는 방법

React가 어떤 방법으로 SPA를 구현하는 것인가?

1. 클라이언트 사이드 라우팅 (Client-side Routing)

React는 전체 페이지를 새로고침하지 않고, URL 경로에 따라 특정 컴포넌트를 동적으로 렌더링함으로써 SPA를 구현한다. 이때 사용하는 대표적인 라이브러리가 react-router-dom이다.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

2. 조건부 렌더링 (Conditional Rendering)

라우터 외에도 내부 상태나 조건에 따라 다른 컴포넌트를 보여주는 조건부 렌더링으로 페이지 전환과 유사한 UI 전환을 구현할 수 있다.

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? <Dashboard /> : <Login />}
    </>
  );
}

특정 조건에 따라 조건문과 논리 연산자를 활용하여 다른 컴포넌트나 요소를 렌더링

React가 상태 변경을 감지하는 방식은 무엇인가?

React는 상태(state) 또는 props의 변경을 감지해 UI를 자동으로 갱신하는 Virtual DOM 기반 구조를 사용한다.

1. 상태 변경 감지 (State Change Detection)

컴포넌트 내부의 상태(state)가 setState나 useState를 통해 변경되면, React는 이전 상태와 비교하여 변경이 생긴 부분만 Virtual DOM에서 다시 계산한다.

const [count, setCount] = useState(0);

<button onClick={() => setCount(count + 1)}>+</button>

→ setCount로 상태가 바뀌면 React는 해당 컴포넌트를 다시 렌더링한다.

2. Virtual DOM을 통한 비교(diffing)

React는 Virtual DOM에 저장된 이전 상태와 새로운 상태를 비교(diffing)하여 실제 DOM에는 변경된 부분만 반영하는 방식으로 효율적인 UI 업데이트를 수행한다.