TIL - 20260325

0325 리액트 기초 복습 (5/N): 고급 Hooks, 라우팅, 전역 상태 관리

---

✅ 1. 추가적인 React Hooks

• useState, useEffect 외에도, 특정 상황에서 유용하게 사용되는 여러 내장 Hook들이 있습니다.

➕ 1-1. useRef

• useRef는 두 가지 주요 목적을 위해 사용되는 Hook입니다.
  1. DOM 요소에 대한 직접적인 접근: ref 속성을 통해 특정 JSX 엘리먼트를 직접 참조할 수 있습니다. 이를 통해 해당 DOM 노드의 값을 읽거나, 포커스를 맞추는 등의 작업을 할 수 있습니다. (e.g., 비제어 컴포넌트의 값 읽기)
  2. 리렌더링을 유발하지 않는 값 저장: useState와 달리, useRef로 관리되는 .current 프로퍼티의 값은 변경되어도 컴포넌트가 다시 렌더링되지 않습니다. 컴포넌트의 전체 생명주기 동안 값을 유지해야 할 때(e.g., 타이머 ID 저장) 유용합니다.

➕ 1-2. useReducer

• useState의 대안으로, 복잡한 상태 로직을 관리할 때 유용합니다.
• 구성: const [state, dispatch] = useReducer(reducer, initialState);
  • state: 현재 상태.
  • dispatch: 상태 변경을 유발하는 "액션(Action)"을 발생시키는 함수.
  • reducer: (state, action)을 인자로 받아, 새로운 상태를 반환하는 순수 함수.
• 장점: 상태 변경 로직(reducer)이 컴포넌트 외부로 분리되어, 상태 관리가 더 체계적이고 예측 가능해집니다.

➕ 1-3. useContext

• 문제점 (Prop Drilling): 앱의 특정 상태가 최상위 컴포넌트에 있는데, 이 상태가 아주 깊숙이 있는 하위 컴포넌트에서 필요할 경우, 중간에 있는 모든 컴포넌트들을 거쳐 Props를 전달해야 하는 문제.
• useContext: Context API와 함께 사용하여, Props 전달 없이도 컴포넌트 트리 전반에 걸쳐 데이터를 전역적으로 공유할 수 있게 해줍니다. (자세한 내용은 전역 상태 관리에서)

---

✅ 2. React Router: 클라이언트 사이드 라우팅

• 싱글 페이지 애플리케이션(SPA)에서 사용자가 URL을 통해 여러 페이지를 이동하는 것처럼 느끼게 해주는 라이브러리입니다. 실제로는 페이지를 새로고침하지 않고, URL에 맞는 컴포넌트만 동적으로 렌더링합니다.

➕ 주요 컴포넌트 및 Hooks

1. createBrowserRouter & <RouterProvider>:

   • 최신 React Router(v6.4+)에서는 createBrowserRouter를 사용하여 라우트 설정을 객체 형태로 정의하고, <RouterProvider>를 통해 앱에 라우터를 제공합니다.

2. <Link>:

   • 페이지를 새로고침하지 않고, 지정된 경로(to)로 URL만 변경하여 클라이언트 사이드에서 페이지를 전환합니다. (<a> 태그 대신 사용)

3. <Outlet />:

   • 중첩 라우팅(Nested Routes)에서 사용되며, 부모 라우트 컴포넌트 내에서 자식 라우트 컴포넌트가 렌더링될 위치를 지정합니다. (e.g., 공통 레이아웃)

4. useParams:

   • URL의 동적 파라미터(e.g., /products/:productId) 값을 객체로 가져오는 Hook입니다.

5. useNavigate:

   • 로그인 성공 후 특정 페이지로 이동시키는 등, 코드 내에서 프로그래매틱하게 페이지를 이동시켜야 할 때 사용하는 Hook입니다.

---

✅ 3. 전역 상태 관리 (Global State Management)

• 애플리케이션의 여러 컴포넌트에서 공유해야 하는 상태(e.g., 로그인 정보, 테마, 장바구니 데이터)를 관리하는 기술입니다.

➕ 3-1. Context API

• React에 내장된 기능으로, createContext로 Context를 생성하고, Provider로 데이터를 제공하며, useContext로 데이터를 소비합니다.
• 장점: React 내장 기능이라 별도의 라이브러리 설치가 필요 없습니다.
• 단점: Context의 value가 변경되면, 해당 Context를 구독하는 모든 컴포넌트가 리렌더링되어, 복잡한 앱에서는 성능 문제가 발생할 수 있습니다.

➕ 3-2. 상태 관리 라이브러리 (e.g., Zustand, Redux)

• Context API의 단점을 보완하고, 더 강력하고 체계적인 상태 관리를 위해 외부 라이브러리를 사용합니다.

• Zustand:

  • 개념: Context의 복잡성과 보일러플레이트를 줄여주는, 매우 간결하고 직관적인 전역 상태 관리 라이브러리.
  • 특징:
    • Provider가 필요 없음: 앱을 <Provider>로 감쌀 필요가 없어 설정이 매우 간단합니다.
    • 최소한의 코드: create 함수 하나로 상태(state)와 상태 변경 함수(action)를 포함하는 스토어(Store)를 생성할 수 있습니다.
    • 성능 최적화: 컴포넌트는 스토어의 특정 상태 값만 구독할 수 있어, 불필요한 리렌더링을 쉽게 방지할 수 있습니다.

  // store/counterStore.js
  import { create } from 'zustand';
  
  const useCounterStore = create((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
  }));
  
  // components/Counter.js
  function Counter() {
    const { count, increase } = useCounterStore();
    return <button onClick={increase}>{count}</button>;
  }

---

📌 요약

• useRef는 DOM에 직접 접근하거나 리렌더링 없는 값 저장을 위해, useReducer는 복잡한 상태 로직을 체계적으로 관리하기 위해 사용됩니다.
• React Router는 SPA에서 페이지 이동을 구현하는 표준 라이브러리이며, <Link>로 페이지를 전환하고 <Outlet />으로 중첩 레이아웃을 구성합니다.
• 여러 컴포넌트가 공유하는 전역 상태를 관리하기 위해, React 내장 Context API를 사용하거나, 더 간결하고 성능에 최적화된 Zustand와 같은 외부 라이브러리를 사용할 수 있습니다.