fromfavor

섹션 18. React Router v7

favor — Sun, 12 Jul 2026 18:28:34 +0900

React Router v7 소개

React 애플리케이션은 싱글 페이지 애플리케이션 기반 --> 페이지가 한 개

URL 경로에 따라 동적인 애플리케이션 화면을 보여주기 위해서는 React Router 사용

ㄴ 라이브러리이면서 프레임워크의 성격을 가짐

https://reactrouter.com/

React Router Official Documentation

4,048,871,903 Downloads on npm

reactrouter.com

React Router 모드

Declarative
- 가장 기본이 되는 모드
- 배우기 쉽고 적용하기 쉬움
Data
- 선언적 모드에 데이터 로딩, 패칭 기능이 추가된 형태
- 페이지 전환 시 필요한 데이터를 자동으로 로드하거나 에러 로딩 상태를 처리해주는 기능 탑재
Framework
- 데이터 모드에 폼 처리 기능, 기본 UI가 추가된 형태

React Router v7 설치

패키지 설치
- npm i react-router 명령어를 사용하여 다운로드
폴더 구조 설계
- src/routes/index.tsx
- src/routes/pages/About.tsx
- src/routes/pages/Home.tsx

// Main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import Router from "./routes";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Router />
  </StrictMode>,
);

// src/routes/index.tsx

import { createBrowserRouter, RouterProvider } from "react-router";
import Home from "./pages/Home";
import About from "./pages/About";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

// Router로 내부 함수 이름 변경
export default function Router() { 
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

createBrowserRouter([...])
- 어떤 주소에 대해 어떤 컴포넌트를 보여줄지 객체 형태로 매핑하여 라우터 인스턴스를 생성하는 함수
path: "/"
- 도메인 뒤에 아무것도 없는 메인 홈 경로일 때
element: <Home />
- <Home /> 컴포넌트 호출
<RouterProvider router={router} />
- 위에서 정의한 router 설계도를 리액트 앱 전체에 주입
- 실제로 라우팅 시스템이 작동하도록 provider 역할을 하는 컴포넌트

// src/routes/pages/Home.tsx

export default function Home() {
  return (
    <>
      <h1>Home Component</h1>
    </>
  );
}

// src/routes/pages/About.tsx

export default function About() {
  return (
    <>
      <h1>About Component</h1>
    </>
  );
}

React Router v7 기본

route 객체 : createBrowserRouter() 내부 배열 각각의 객체

router instance 객체 : route 객체가 묶여 하나의 네비게이션 동작을 수행하게 하는 전체적인 객체

element 속성에 JSX 문법을 직접적으로 작성하는 것도 가능

{
    path: "/post",
    element: <h1>Post Page</h1>,
}

컴포넌트를 전달할 때에는 element가 아닌 Component 속성을 사용하는 방법도 존재

{
    path: "/",
    Component: Home,
}

React Router v7 중첩 라우트와 인덱스 라우트

route를 설정할 때 children 속성을 사용하면 route를 중첩시켜서 부모-자식 관계를 정의 가능

children 속성을 사용한 부모 컴포넌트에 <Outlet /> 컴포넌트를 작성해주어야 함

<Outlet /> 위치에 자식 컴포넌트가 렌더링됨

// src/routes/index.tsx

import { createBrowserRouter, RouterProvider } from "react-router";
import DashboardHome from "./pages/dashboard/DashboardHome";
import Dashboard from "./pages/dashboard/Dashboard";

const router = createBrowserRouter([
  {
    path: "/dashboard",
    Component: Dashboard,
    children: [
      {
        path: "", // /dashboard 주소 --> Dashboard 컴포넌트와 DashboardHome 컴포넌트를 모두 보여줌
        Component: DashboardHome,
      },
    ],
  },
]);

export default function Router() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

^ <Outlet /> 컴포넌트 추가

// src/routes/pages/dashboard/Dashboard.tsx

import { Outlet } from "react-router";

export default function Dashboard() {
  return (
    <>
      <h1>Dashboard Component</h1>
      <Outlet />
    </>
  );
}

// src/routes/pages/dashboard/DashboardHome.tsx

export default function DashboardHome() {
  return (
    <>
      <h1>DashboardHome Component</h1>
    </>
  );
}

자식 컴포넌트 주소 지정 방법

1. path 속성 사용

{
  path: "/dashboard",
  Component: Dashboard,
  children: [
    {
      path: "", // /dashboard 주소 --> Dashboard 컴포넌트와 DashboardHome 컴포넌트를 모두 보여줌
      Component: DashboardHome,
    },
  ],
},

2. index 속성 사용

{
  path: "/dashboard",
  Component: Dashboard,
  children: [
    {
      index: true, // /dashboard 주소 --> Dashboard 컴포넌트와 DashboardHome 컴포넌트를 모두 보여줌
      Component: DashboardHome,
    },
  ],
},

* 중첩된 라우트의 path에는 /를 붙이지 X

React Router v7 레이아웃 라우트

레이아웃 라우트 : 중첩 라우트 기법과 동일하지만, 부모 라우트에 path 속성을 지정하지 않음

ㄴ 주소창의 URL 경로를 변경하지 않고, 여러 독립된 페이지에서 공통 UI를 감싸주는 껍데기 역할을 하기 때문

레이아웃으로 사용할 공통 뼈대 컴포넌트는 src/pages/layouts/ 하위에 생성

// src/routes/pages/layouts/Default.tsx

import { Outlet } from "react-router";

export default function Default() {
  return (
    <>
      <header>
        <h1>Header</h1>
      </header>
      <Outlet />
      <footer>
        <h1>Footer</h1>
      </footer>
    </>
  );
}

// src/routes/index.tsx

import { createBrowserRouter, RouterProvider } from "react-router";
import Home from "./pages/Home";
import About from "./pages/About";
import Dashboard from "./pages/dashboard/Dashboard";
import DashboardHome from "./pages/dashboard/DashboardHome";
import DashboardSetting from "./pages/dashboard/DashboardSetting";
import Default from "./pages/layouts/Default";

const router = createBrowserRouter([
  {
    // default 설정
    Component: Default, 
    children: [
      {
        path: "/",
        Component: Home,
      },
      {
        path: "/about",
        Component: About,
      },
    ],
  },
]);

export default function Router() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

React Router v7 라우트 프리픽스

라우트 프리픽스 : element, Component 속성 없이 오직 path 속성만 가진 부모 라우트 아래에 children을 중첩시키는 방식

ㄴ 화면을 띄워주는 공통 껍데기(레이아웃)는 없지만, 하위 자식 라우트들의 URL 시작 주소를 한 곳에서 묶어 관리하고 싶을 사용

{
  path: "/group",
  // Component: DashboardLayout,
  children: [
    {
      path: "dashboard",
      Component: Dashboard,
      children: [
        {
          index: true,
          Component: DashboardHome,
        }, {
          path: "setting",
          Component: DashboardSetting,
          children: [
            {
              path: "custom",
              element: <h1>DashboardSetting</h1>
            },
          ],
        },
      ],
    },
  ],
}

React Router v7 동적 세그먼트

동적 세그먼트 : URL 경로 중 고정되지 않고 사용자의 데이터(id 등)에 따라 동적으로 변하는 주소 영역을 뜻함

ㄴ 라우트 설정 시 주소창에 콜론 기호를 붙여 변수 형태로 선언

useParams 훅 : 동적 세그먼트로 지정된 URL 값을 컴포넌트 내부에서 읽어올 때 사용하는 리액트 라우터 전용 훅

// src/routes/index.tsx

{
  path: "/post/:id",
  Component: Post,
}

// src/routes/pages/post/Post.tsx

import { useParams } from "react-router";

export default function Post() {
  const { id } = useParams();
  return (
    <>
      <h1>Post: {id}</h1>
    </>
  );
}

^ 구조 분해 할당

// src/routes/index.tsx

{
  path: "/post/:id/detail/:detail",
  Component: PostDetail,
}

// src/routes/pages/post/PostDetail.tsx

import { useParams } from "react-router";

export default function PostDetail() {
  const { id, detail } = useParams();

  return (
    <>
      <h1>
        PostDetail: {id} / {detail}
      </h1>
    </>
  );
}

^ 구조 분해 할당

* 동적 세그먼트는 각기 다른 값이어야 함

ex) /post/:id/detail/:id (X)

React Router v7 옵셔널 세그먼트

옵셔널 세그먼트 : 라우트 설정 시 URL 경로의 특정 구역(세그먼트)을 선택 사항으로 지정하여 생략할 수 있도록 만드는 기법

ex) path: "/post/:id?" --> id를 생략해도 페이지 접속 가능

React Router v7 스플랫

스플랫 라우트 : 라우터에 명시적으로 정의되지 않은 모든 예외 경로를 잡아내기 위해 사용하는 라우트 지정 기법

== Catch-all 라우트 또는 Wildcard 라우트

ㄴ path 속성 값의 맨 끝에 * 기호를 붙여 선언

ex) path: "*"

// src/routes/index.tsx

{
  path: "/post/*",
  Component: Post,
}

// src/routes/pages/post/Post.tsx

import { useParams } from "react-router";

export default function Post() {
  const { "*": splat } = useParams();
  console.log(splat);
  return (
    <>
      <h1>Post</h1>
    </>
  );
}

* 라우터의 맨 밑바닥에 배치하여 404 페이지 커스텀도 가능

React Router v7 NavLink, Link

Link 컴포넌트 : <a> 태그 역할을 대체하여 페이지 간 이동을 구현하는 컴포넌트

<Link to="/">Home</Link>

NavLink 컴포넌트 : Link의 기능을 확장하여, 현재 URL 경로의 일치 여부에 따라 다양한 스타일 상태를 동적으로 제공하는 특수 컴포넌트

ㄴ 현재 주소창의 URL과 to 속성에 지정한 주소가 일치할 경우, 해당 태그에 active 클래스를 자동으로 부여

속성이나 children에 콜백 함수 형식을 사용하여 isActive, isPending, isTransitioning 속성 값을 받아 컴포넌트 스타일 커스텀 가능

<NavLink to="/">Home</NavLink>

<NavLink
  to="/about"
  className={({ isActive, isPending, isTransitioning }) =>
    [
      isActive ? "isActive" : "",
      isPending ? "isPending" : "",
      isTransitioning ? "isTransitioning" : ""
    ].join(" ")
  }
>
  About
</NavLink>

React Router v7 <Form>

Form 컴포넌트 : <form> 태그를 대체하여 폼 전송을처리하는 컴포넌트

ㄴ 브라우저의 기본 동작인 화면 새로고침을 가로채서 차단하고, 비동기 통신을 수행함

action 속성을 활용하여 폼이 제출되었을 때 데이터를 전송할 대상 URL 경로를 지정

// src/routes/pages/auth/Login.tsx

import { Form, useActionData } from "react-router";

export default function Login() {
  const data = useActionData();
  return (
    <>
      {/* action에 지정된 주소로 페이지 전환 */}
      <Form action="/" method="post">
        <input type="email" name="email" autoComplete="off" />
        <input type="password" name="pw" />
        <button type="submit">로그인</button>
      </Form>
      <p>{data && data.message}</p>
    </>
  );
}

React Router v7 navigate

useNavigate 훅 : 컴포넌트 내부의 자바스크립트 코드 영역에서 프로그래밍 방식으로 주소를 강제 이동시킬 때 사용하는 훅

navigate("/")

^ 일반 이동 : 원하는 절대/상대 경로 주소를 문자열로 던져서 이동

ㄴ 주소창 대신 인자에 음수나 양수 숫자를 넣으면 브라우저 방문 기록을 기반으로 이동함

ex) navigate(-1) --> 이전 페이지로 뒤로 가

// src/routes/pages/auth/Login.tsx

import { Form, useActionData, useNavigate } from "react-router";

export default function Login() {
  const data = useActionData();
  const navigate = useNavigate();
  return (
    <>
      {/* <form></form> */}
      <Form method="post">
        <input type="email" name="email" autoComplete="off" />
        <input type="password" name="pw" />
        <button type="submit">로그인</button>
      </Form>
      <p>{data && data.message}</p>

      <button onClick={() => navigate("/")}>메인으로 이동</button>
    </>
  );
}

React Router v7 loader 속성으로 데이터 패칭

useEffect 기반 데이터 패칭 (전통적인 방식)

렌더링 흐름
- 컴포넌트 마운트 --> useEffect 실행 --> 비동기 데이터 패칭 --> 상태 업데이트 --> 리렌더링
UX
- 주소가 바뀌면 화면 즉시 전환
- 서버에서 데이터를 받기 전까진 빈 배열이나 스피너가 먼저 노출되는 현상 발생

loader 기반 데이터 패칭 (최신 React Router v7 방식)

렌더리 흐름
- 주소 클릭 --> 라우터가 백엔드 데이터 패칭 (loader) 완료할 때까지 대기 --> 데이터 로드 완료 --> 화면 전환 및 컴포넌트 렌더링
UX
- 주소를 클릭해도 서버에서 데이터를 모두 가져오기 전까지는 화면 전환 X

// src/routes/index.tsx

import { createBrowserRouter, RouterProvider } from "react-router";
import Home from "./pages/Home";
import Post from "./pages/post/Post";
import Default from "./layouts/Default";
import PostLoader from "./pages/post/PostLoader";
import { axiosInstance } from "../api/axios";

const router = createBrowserRouter([
  {
    Component: Default,
    children: [
      {
        path: "/",
        Component: Home,
      },
      {
        path: "/post",
        Component: Post,
      },
      {
        path: "/post-loader",
        Component: PostLoader,
        loader: async () => {
          const { data } = await axiosInstance.get("/posts");
          return data;
        },
      },
    ],
  },
]);

export default function Router() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

// src/routes/pages/post/Post.tsx

import { useEffect, useState } from "react";
import { axiosInstance } from "../../../api/axios";

export default function Post() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    const fetchPosts = async () => {
      const { data } = await axiosInstance.get("/posts");
      setPosts(data);
    };
    fetchPosts();
  }, []);

  return (
    <>
      <h1>Post Component</h1>
      <pre>{JSON.stringify(posts, null, 2)}</pre>
    </>
  );
}

// src/routes/pages/post/PostLoader.tsx

import { useLoaderData } from "react-router";

export default function PostLoader() {
  const posts = useLoaderData();
  return (
    <>
      <h1>PostLoader Component</h1>
      <pre>{JSON.stringify(posts, null, 2)}</pre>
    </>
  );
}

React Router v7 loader + loading

loader와 로딩 처리 기법 : lodaer 함수가 서버에서 데이터를 완전히 패칭할 때까지 홤녀이 멈추는 현상을 방지하기 위해 로딩 컴포넌트를 지정하는 방식

데이터 패칭이 완료될 때까지는 해당 라우트에 설정된 hydrateFallback 속성에 지정된 컴포넌트 내용이 화면에 먼저 노출됨

// src/routes/index.tsx

{
   path: "/post-loader",
   Component: PostLoader,
   loader: async () => {
     const { data } = await axiosInstance.get("/posts");
     return data;
   },
   HydrateFallback: PostLoading,
},

// src/routes/pages/post/PostLoading.tsx

export default function PostLoading() {
  return (
    <>
      <p>Loading...</p>
    </>
  );
}

React Router v7 loading + error

errorElement 속성 : 데이터 패칭이나 컴포넌트 렌더링 도중 에러가 발생했을 때, 화면 전체가 멈추는 것을 방지하기 위해 예외 처리용 커스텀 에러 화면을 지정하는 속성

useRouteError 훅 : erroElement로 지정된 컴포넌트 내부에서, 실제로 발생한 구체적인 에러 객체(에러 메세지, 상태 코드 등)를 읽어올 때 사용하는 훅

// src/routes/index.tsx

{
  path: "/post-loader",
  Component: PostLoader,
  loader: async () => {
    const { data } = await axiosInstance.get("/posts");
    return data;
    },
    HydrateFallback: PostLoading,
    errorElement: <PostError />,
},

// src/routes/pages/post/PostError.tsx

import { isRouteErrorResponse, useRouteError } from "react-router";

export default function PostError() {
  const error = useRouteError();

  // isRouteErrorResponse : 라우트에서 response 관련된 에러인지 아닌지 판단하는 내장 함수
  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>{error.status}</h1>
        <h1>{error.data.message}</h1>
      </div>
    );
  } else if (error instanceof Error) {
    return (
      <div>
        <h1>알 수 없는 에러</h1>
        <h1>{error.message}</h1>
      </div>
    );
  } else {
    return (
      <>
        <h1>에러 발생</h1>
      </>
    );
  }
}

리액트 - 모달 구현

favor — Thu, 25 Jun 2026 16:17:43 +0900

모달(Modal)

✔️ 모달이란?

모달 : 기존 화면 위에 겹쳐서 나타나는 대화 상자나 팝업 창을 의미

✔️ 모달 vs 팝업

모달
- 모달 창을 닫거나, 내부에서 확인 또는 취소 액션을 하기 전까지는 원래 보던 화면(부모)을 건드릴 수 X
팝업
- 팝업 : 원래 보던 화면과 완전히 독립되어 띄워지는 새로운 창
- 팝업 창이 떠있어도 사용자는 뒤에 있는 화면을 클릭하거나 스크롤할 수 O

✔️ 모달 구현하기

// src/App.tsx

import { useState } from "react";
import Modal from "./components/Modal";
import ModalContent from "./components/ModalContent";
import ModalContent2 from "./components/ModalContent2";

export default function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const toggleModal = () => setIsModalOpen((prev) => !prev);

  return (
    <div className="flex items-center justify-center min-h-screen  bg-yellow-200">
      <button
        className="border-3 border-blue-500 bg-white px-2 py-1 rounded-lg cursor-pointer"
        onClick={toggleModal}
      >
        모달 열기
      </button>
      {isModalOpen && (
        <Modal onClose={toggleModal}>
          <ModalContent />
          <ModalContent2 />
        </Modal>
      )}
    </div>
  );
}

const [isModalOpen, setIsModalOpen] = useState(false)
- isModalOpen : 현재 모달의 상태를 담는 변수
- setIsModalOpen : 모달을 켰다 껐다할 수 있는 변경 함수
const toggleModal = () => setIsModalOpen((prev) => !prev)
- 이전 상태가 false --> !false --> true
- 이전 상태가 true --> !true --> false

// src/components/Modal.tsx

import type { ComponentPropsWithoutRef } from "react";
import cancelIcon from "../assets/closeIcon.png";

interface ModalProps extends ComponentPropsWithoutRef<"div"> {
  onClose: () => void;
}

export default function Modal({ children, onClose, ...props }: ModalProps) {
  return (
    // 모달 창 바깥 영역
    <div
      role="presentation"
      className="fixed inset-0 z-99 flex w-full h-full items-center justify-center bg-gray-900/50 backdrop-blur-sm"
      onClick={onClose}
      {...props}
    >
      {/* 모달 영역 */}
      <section
        role="dialog"
        className="relative rounded-xl bg-[#1b1b22] px-5 py-10"
        onClick={(e) => e.stopPropagation()}
      >
        {/* close 버튼 */}
        <button
          className="absolute right-4 top-4 w-3 h-3 cursor-pointer"
          onClick={onClose}
        >
          <img
            src={cancleIcon}
            className="w-full h-full object-contain invert brightness-200"
          />
        </button>
        {children}
      </section>
    </div>
  );
}

extends ComponentPropsWithoutRef<"div">
- ModalProps에는 onClose, children만 존재 --> 모달 컴포넌트 자체에 id, className 등의 속성 사용 불가능
- <div> 태그가 가질 수 있는 모든 속성들을 가져와서 사용하겠다는 의미
- ㄴ ref(리액트에서 DOM을 직접 가리키는 역할)만 빼고
- if 모달이 아니라 커스텀 버튼을 만드는 중이었다면?) <"button">
({ children, onClos, ...props }: ModalProps)
- 구조 분해
- children, onClose만 골라 쓰고 나머지는 props로 받겠다는 의미
<div role="presentation" className="fixed inset-0 z-99" onClick={onClose}>{...props}</div>
- role="presentation" : 웹 접근성 표준 속성 --> 시각용 레이어임을 선언
- fixed inset-0 z-99 : 뒤의 일반 본문 글자나 이미지들이 모달 배경 위로 오지 못하도록 설정
- onClick={onClose} : 모달 바깥을 클릭해도 모달 창이 닫힐 수 있도록 설정
- {...props} : 부모 컴포넌트가 모달을 부를 때 넘겨준 속성 중에서, children과 onClose를 제외한 나머지 속성(id, 추가 className 등)을 spread하여 주입하겠다는 의미
<section role="dialog" onClick={(e) => e.stopPropagation()}>
- role="dialog" : 웹 접근성 표준 속성 --> 여기서부터는 사용자가 상호작용해야 하는 영역임을 선언
- onClick={(e) => e.stopPropagation() : 버블링 방지
<img className="object-contain invert brightness-200" alt="close" />
- object-contain : 이미지의 가로세로 원본 비율 유지
- invert : 일반 텍스트가 아닌 PNG 이미지 파일이기 때문에 색상을 정반대로 반전
- brightness-200 : 밝기를 200% 증가
- alt="close" : 웹 접근성 표준 속성 --> 이미지의 정체를 알려주는 대체 텍스트
{children}
- App 컴포넌트에서 <Modal></Modal> 태그 사이에 다른 컴포넌트를 집어넣음
- ㄴ 해당 컴포넌트들을 children으로 묶어 Modal 컴포넌트에게 전달

섹션 17. 데이터 통신 심화

favor — Mon, 22 Jun 2026 14:53:26 +0900

useTransition(fetch) 소개

useTransition : 상태 업데이트를 낮은 우선 순위의 트랜지션으로 처리, 비동기 함수도 처리할 수 있도록 기능이 확장

ㄴ 리액트가 더 중요한 작업이 끝나고 여유가 있는 상태에서 처리한다는 의미

useTransition 훅의 기본적인 문법 형태

const [isPending, startTransition] = useTransition()

isPending
- 실행 중인 트랜지션이 있으면 true, 없으면 false
startTransition
- 코드를 트랜지션으로 실행할 수 있게 해주는 함수
- == 해당 함수로 작성한 코드는 낮은 우선순위로 처리 (여유가 있을 때 처리)

useTransition + 데이터 패칭 실전

// App.tsx

import axios from "axios";
import { useEffect, useState, useTransition } from "react";

interface Post {
  id: number;
  title: string;
  views: number;
}

export default function App() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    startTransition(async () => {
      const { data } = await axios.get("http://localhost:3000/posts");
      setPosts(data);
    });
  }, []);

  if (isPending) return <h3>loading...</h3>;

  return (
    <>
      <h3>useTransition</h3>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </>
  );
}

^ isPending : true == 데이터 패칭 중

useActionState 소개

기존 React와 같은 클라이언트 기반 라이브러리에서는 form 태그의 action 속성을 직접적으로 사용하는 경우가 거의 X

∵ action은 서버측에서 처리되는 기능이기 때문

ㄴ action 속성을 활용하는 새로운 방식 등장

useActionState : form의 액션 결과를 기반으로 상태를 업데이트 할 수 있도록 도와줌

useActionState 훅의 기본적인 문법 형태

const [state, formAction, isPending] = useActionState(fn, initialState)

state
- 현재 상태값
formAction
- 폼 액션 함수
- action 속성에 활용
isPending
- 액션 처리 중 여부
fn
- 액션이 발생했을 때 실행할 함수
- 비동기 함수도 가능
initialState
- 상태의 초기값을 지정

useActionState 실습 - 1

일반적으로 form 태그는 제출 버튼을 누르면, 브라우저가 페이지를 새로고침하면서 데이터를 서버로 전송

useActionState를 사용하여 <form action={formAction}>처럼 action 속성에 자바스크립트 함수를 바로 대입 가능

--> 제출 버튼을 누르면, 브라우저가 새로고침을 일으키지 못하도록 막은 후 주입한 formAction 함수를 비동기적으로 실행해 서버와 데이터를 주고받음

// App.tsx

import { useActionState } from "react";

export default function App() {
  const [count, formAction, isPending] = useActionState(async (count) => {
    await new Promise((resolve) => setTimeout(resolve, 2000));
    return count + 1;
  }, 0);

  return (
    <>
      <form action={formAction}>
        <h1>Count: {count}</h1>
        <button type="submit">증가</button>
        {isPending && <p>제출 중...</p>}
      </form>
    </>
  );
}

useActionState 실습 - 2

// App.tsx

import { useActionState } from "react";

export default function App() {
  const [count, formAction, isPending] = useActionState(
    async (count: number, formData: FormData) => {
      await new Promise((resolve) => setTimeout(resolve, 2000));
      const amount = Number(formData.get("amount"));

      return count + amount;
    },
    0,
  );

  return (
    <>
      <form action={formAction}>
        <h1>Count: {count}</h1>
        <input type="number" name="amount" />
        <button type="submit" disabled={isPending}>
          증가
        </button>
        {isPending && <p>제출 중...</p>}
      </form>
    </>
  );
}

^ disabled={isPending} 트랜지션을 처리 중일 때는 해당 버튼을 비활성화

form action

<form action={async() => {...}}>
  ...
</form>

위와 같이 액션 속성에 함수만 직접 할당해서 사용하는 방법도 존재

ㄴ useActionState과 달리 자동으로 상태값이나 isPending과 같은 로딩 상태가 제공되지 않음

React 18에서의 form 컨트롤 방법

// App.tsx

import { useState } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const email = formData.get("email");
    const pw = formData.get("pw");

    // api
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsLoading(false);
    console.log(`Login Success ${email}/${pw}`);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input type="email" name="email" autoComplete="off" />
        <input type="password" name="pw" />
        <button type="submit" disabled={isLoading}>
          로그인
        </button>
      </form>
    </>
  );
}

React 19 이상에서의 form 컨트롤 방법

// App.tsx

import { useState } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (formData: FormData) => {
    const email = formData.get("email");
    const pw = formData.get("pw");

    // api
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setIsLoading(false);
    console.log(`Login Success ${email}/${pw}`);
  };

  return (
    <>
      <form action={handleSubmit}>
        <input type="email" name="email" autoComplete="off" />
        <input type="password" name="pw" />
        <button type="submit" disabled={isLoading}>
          로그인
        </button>
      </form>
    </>
  );
}

^ action 속성에 함수 직접 할당 가능

* useActionState 훅 방식 : 상태 및 진행 상태까지 관리하고 싶을 때 사용,

action 속성에 함수 할당 방식 : 단순한 작업을 빠르게 처리하고 싶을 때 사용

useFormStatus

useFormStatus : 컴포넌트가 분리되어 있는 상황에서도 상위 form에 대한 상태 정보를 가져올 수 있는 리액트 훅

useFormStatus 훅의 기본적인 문법 형태

const { pending, data, method, action } = useFormStatus()

pending
- 액션 처리 중 여부
data
- formData 객체 참조
method
- GET, POST
action
- 현재 실행 중인 액션 함수에 대한 참조값

// App.tsx

import Button from "./components/html/Button";
import Input from "./components/html/Input";

export default function App() {
  const formAction = async (formData: FormData) => {
    await new Promise((resolve) => setTimeout(resolve, 2000));
    console.log(formData.get("email"));
    console.log(formData.get("pw"));
  };
  return (
    <>
      <form action={formAction}>
        <Input type="text" name="email" autoComplete="off" />
        <Input type="password" name="pw" />
        <Button type="submit">로그인</Button>
      </form>
    </>
  );
}

// src/components/html/Input.tsx

type InputProps = React.ComponentPropsWithoutRef<"input">;
export default function Input(props: InputProps) {
  return (
    <>
      <input {...props} />
    </>
  );
}

// src/components/html/Input.tsx

import { useFormStatus } from "react-dom";

type ButtonProps = React.ComponentPropsWithoutRef<"button">;

export default function Button({ children, ...props }: ButtonProps) {
  const { pending, data, method, action } = useFormStatus();
  console.log(pending);
  console.log(data);
  console.log(method);
  console.log(action);

  return (
    <>
      <button {...props} disabled={pending}>
        {children}
      </button>
      {data && <p>Logging in with ID: {String(data.get("email"))}</p>}
    </>
  );
}

useOptimistic

낙관적 업데이트 : 서버의 응답을 기다리지 않고 먼저 사용자 인터페이스(UI)를 업데이트하는 기법

ㄴ 서버 요청이 성공할 것이라고 가정하고 UI를 먼저 변경 --> 서버에서 요청이 실패되면 UI를 다시 원래 상태로 되돌리는 Rollback 로직이 필요

useOptimistic : 낙관적 업데이트를 쉽게 구현할 수 있도록 설계된 훅

useOptimistic 훅의 기본적인 문법 형태

const [optimisticState, addOptimistic] = useOptimistic(state, (currentState, optimistic) => { ... })

optimisticState
- 현재의 낙관적 상태값
addOptimistic
- 낙관적 업데이트를 실행할 때 호출하는 함수
state
- 서버 응답을 기다리기 전 기본 상태값
(currentState, optimistic) => { ... }
- 낙관적 업데이트 시 상태를 어떻게 바꿀지 정의하는 함수

useOptimistic 실전 - 1

useOptimistic 미사용 코드

// App.tsx

import axios from "axios";
import { Heart } from "lucide-react";
import { useEffect, useState } from "react";

interface Posts {
  id: number;
  isLike: boolean;
}

export default function App() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  const updateLike = async (id: number, isLike: boolean) => {
    const { data } = await axios.patch(`http://localhost:3000/posts/${id}`, {
      isLike: !isLike,
    });

    setPosts((posts) =>
      posts.map((post) => (post.id === data.id ? data : post)),
    );
    console.log(data);
  };

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        setIsLoading(true);
        const { data } = await axios.get("http://localhost:3000/posts");
        setPosts(data);
      } catch (e) {
        console.error("에러 발생" + e);
      } finally {
        setIsLoading(false);
      }
    };
    fetchPosts();
  }, []);

  if (isLoading) return <p>Loading...</p>;

  return (
    <>
      {/* fill: 'none', stroke: 'currentColor' */}
      {/* fill: 'rgb(255,0,0)', stroke: 'rgb(255,0,0)' */}
      {posts.map((post) => (
        <Heart
          key={post.id}
          fill={post.isLike ? "rgb(255, 0, 0)" : "none"}
          stroke={post.isLike ? "rgb(255, 0, 0)" : "currentColor"}
          onClick={() => updateLike(post.id, post.isLike)}
        />
      ))}
    </>
  );
}

useOptimistic 실전 - 2

useOptimistic 사용 코드

// App.tsx

import axios from "axios";
import { Heart } from "lucide-react";
import {
  startTransition,
  useEffect,
  useOptimistic,
  useRef,
  useState,
} from "react";

interface Posts {
  id: number;
  isLike: boolean;
}

export default function App() {
  const controller = useRef<AbortController | null>(null);
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  const [optimisticPosts, addOptimisticPosts] = useOptimistic(
    posts,
    (statePosts, id) => {
      return statePosts.map((statePost) =>
        statePost.id === id
          ? { ...statePost, isLike: !statePost.isLike }
          : statePost,
      );
    },
  );

  const updateLike = (id: number, isLike: boolean) => {
    controller.current?.abort();
    controller.current = new AbortController();
    startTransition(async () => {
      addOptimisticPosts(id);

      try {
        const { data } = await axios.patch(
          `http://localhost:3000/posts/${id}`,
          {
            isLike: !isLike,
          },
          {
            signal: controller.current?.signal,
          },
        );
        setPosts((posts) =>
          posts.map((post) => (post.id === data.id ? data : post)),
        );
      } catch (e) {
        console.error("에러:", e);
      }
    });
  };

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        setIsLoading(true);
        const { data } = await axios.get("http://localhost:3000/posts");
        setPosts(data);
      } catch (e) {
        console.error("에러 발생" + e);
      } finally {
        setIsLoading(false);
      }
    };
    fetchPosts();
  }, []);

  if (isLoading) return <p>Loading...</p>;

  return (
    <>
      {/* fill: 'none', stroke: 'currentColor' */}
      {/* fill: 'rgb(255,0,0)', stroke: 'rgb(255,0,0)' */}
      {optimisticPosts.map((post) => (
        <Heart
          key={post.id}
          fill={post.isLike ? "rgb(255, 0, 0)" : "none"}
          stroke={post.isLike ? "rgb(255, 0, 0)" : "currentColor"}
          onClick={() => updateLike(post.id, post.isLike)}
        />
      ))}
    </>
  );
}

use + suspense

use 훅 : Promise 객체를 동기 함수처럼 사용할 수 있게 하여 데이터 통신을 보다 간결하게 처리할 수 있도록 하는 기능

ㄴ Suspense 컴포넌트와 함께 사용

Suspense 컴포넌트 : 컴포넌트에서 비동기 처리가 완료될 때까지 대기하게 하는 동안, fallback 속성에 지정된 UI를 표시하는 역할

일반적인 코드 구조

import { Suspense } from "react";
import ChildComponent from "./components/ChildComponent"

export default function App() {
  return (
    <>
      <Suspense fallback={...}>
        <ChildComponent promise={...} />
      </Suspense>
    </>
  );
}

^ fallback 속성을 사용해 로딩 UI를 지정 / promise 객체를 하위 컴포넌트에 전달

export default function ChildComponent({
  promise,
}: {
  promise: Promise<unknown>;
}) {
  const data = use(promise);
  return (...);
}

^ promise 객체를 활용하여 use 훅으로 비동기가 처리될 때까지 대기

use + suspense 실전

// App.tsx

import { Suspense } from "react";
import { axiosInstance } from "./api/axios";
import Posts from "./components/Posts";

// Promise 객체는 상태 업데이트를 직접적으로 활용하지 않기 때문에 컴포넌트 내부에 정의할 필요 X
async function fetchPosts() {
  const { data } = await axiosInstance.get("/posts");

  return data; // Promise 객체
}

export default function App() {
  return (
    <>
      <Suspense fallback={<p>Loading...</p>}>
        <Posts promise={fetchPosts()} />
      </Suspense>
    </>
  );
}

// src/components/Posts.tsx

import { use } from "react";

export default function Posts({
  promise,
}: {
  promise: Promise<{ id: number; title: string; views: number }[]>;
}) {
  const posts = use(promise);

  return (
    <>
      <pre>{JSON.stringify(posts, null, 2)}</pre>
    </>
  );
}

error boundary

use 훅과 Suspense를 조합해서 사용할 때, 데이터 요청에 실패하는 경우 앱 전체가 종료되는 crash 현상이 발생

--> 에러 핸들링을 위해 error boundary 사용

error boundary : 자바스크립트 오류를 처리하기 위한 컴포넌트

npm install react-error-boundary 명령어를 사용하여 다운로드

// App.tsx

import { Suspense } from "react";
import { axiosInstance } from "./api/axios";
import Posts from "./components/Posts";
import { ErrorBoundary } from "react-error-boundary";

async function fetchPosts() {
  const { data } = await axiosInstance.get("/posts222");
  return data; // Promise 객체
}
export default function App() {
  return (
    <>
      <ErrorBoundary fallback={<p>Error!</p>}>
        <Suspense fallback={<p>Loading..</p>}>
          <Posts promise={fetchPosts()} />
        </Suspense>
      </ErrorBoundary>
    </>
  );
}

^ 에러가 생기면 crash 현상이 발생하는 게 아니라 fallback 속성의 JSX 요소를 통해 UI 렌더링

JSX 요소가 아닌 컴포넌트 자체를 렌더링하고 싶을 때에는 FallbackComponent 속성을 사용

tip

// App.tsx

import { Suspense } from "react";
import { axiosInstance } from "./api/axios";
import Posts from "./components/Posts";
import { ErrorBoundary } from "react-error-boundary";
import Loading from "./components/Loading";

async function fetchPosts() {
  const { data } = await axiosInstance.get("/posts");
  return data; // Promise 객체
}
export default function App() {
  return (
    <>
      <ErrorBoundary fallback={<p>Error!</p>}>
        <Suspense fallback={<Loading />}>
          <Posts promise={fetchPosts()} />
        </Suspense>
      </ErrorBoundary>
    </>
  );
}

// src/components/Loading.tsx

import { useEffect, useState } from "react";

export default function Loading() {
  const [isShow, setIsShow] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsShow(true);
    }, 500); // 0.5초 뒤에 setIsShow를 true로 변경
    return () => clearTimeout(timer);
  }, []);

  return <>{isShow && <p>Loading...</p>}</>;
}

^ npm run server로 서버 구동 시 (0.5초 미만) 로딩 화면 렌더링 X / npm run delay로 서버 구동 시 (0.5초 이상) 로딩 화면 렌더링 O

tmdb 회원가입

TMDB : 무료로 사용할 수 있는 영화 API

영화 목록 렌더링 - 1

// src/types/movie.d.ts

type MovieType = {
  adult: boolean;
  backdrop_path: string;
  genre_ids: number[];
  id: number;
  original_language: string;
  original_title: string;
  overview: string;
  popularity: number;
  poster_path: string;
  release_date: string;
  title: string;
  video: boolean;
  vote_average: number;
  vote_count: number;
};

// App.tsx

import Movie from "./components/movies/Movie";

export default function App() {
  return (
    <>
      <Movie />
    </>
  );
}

// src/components/movies/Movie.tsx

import { useEffect, useState } from "react";
import MovieHeader from "./MovieHeader";
import MovieList from "./MovieList";
import MovieMain from "./MovieMain";
import axios from "axios";
import { axiosInstance } from "../../api/axios";

export default function Movie() {
  const [nowData, setNowData] = useState<MovieType[]>([]); // Now Playing API를 호출한 결과(results) 배열을 할당
  const [nowLoading, setNowLoading] = useState(false);
  const [nowError, setNowError] = useState<Error | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
    const fetchCategory = async (
      endPoint: string,
      setData: React.Dispatch<React.SetStateAction<MovieType[]>>,
      setLoading: React.Dispatch<React.SetStateAction<boolean>>,
      setError: React.Dispatch<React.SetStateAction<Error | null>>,
    ) => {
      setLoading(true);
      setError(null);

      try {
        const {
          data: { results },
        } = await axiosInstance.get(`/${endPoint}`, {
          signal,
        });
        setData(results);
        console.log(results);
      } catch (e) {
        console.log(e);
        if (e instanceof Error && e.name !== "CanceledError") setError(e);
      } finally {
        if (!controller.signal.aborted) setLoading(false);
      }
    };
    fetchCategory("now_playing", setNowData, setNowLoading, setNowError);

    return () => controller.abort();
  }, []);

  return (
    <>
      <MovieHeader />
      <MovieMain />
      <MovieList
        title="Now Playing"
        movies={nowData}
        loading={nowLoading}
        error={nowError}
      />
    </>
  );
}

// src/components/movies/MovieList.tsx

import MovieListItem from "./MovieListItem";

export default function MovieList({
  title,
  movies,
  loading,
  error,
}: {
  title: string;
  movies: MovieType[];
  loading: boolean;
  error: Error | null;
}) {
  return (
    <>
      <article className="bg-black px-4 pt-4 xs:px-0">
        <section className="container mx-auto py-8 text-white">
          <span className="text-yellow-600">ONLINE STREAMING</span>
          <h2 className="text-[36px] font-bold mb-8">{title}</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:px-0">
            {/* 아이템 1개 */}
            {movies &&
              movies.map((movie) => (
                <MovieListItem key={movie.id} {...movie} />
              ))}
          </div>
        </section>
      </article>
    </>
  );
}

// src/components/movies/MovieListItem.tsx

import { star } from "../../assets/movies/assets";

export default function MovieListItem({
  title,
  vote_average,
  release_date,
  poster_path,
}: MovieType) {
  return (
    <>
      <div>
        <img
          src={`https://image.tmdb.org/t/p/w500${poster_path}`}
          alt=""
          className="rounded-md w-full"
        />
        <div className="flex justify-between items-center font-bold mt-4 mb-2 text-lg">
          <h4 className="line-clamp-1">{title}</h4>
        </div>
        <div className="flex justify-between items-center text-sm text-gray-200">
          <div className="flex items-center gap-2 font-bold">
            <img
              src={star}
              alt="star"
              width={18}
              height={18}
              className="object-contain"
            />
            <span className="text-yellow-500">{vote_average.toFixed(1)}</span>
          </div>
          <span className="text-yellow-500 font-bold">{release_date}</span>
        </div>
      </div>
    </>
  );
}

영화 목록 렌더링 - 2

로딩, 에러 UI 처리

// src/components/movies/Movie.tsx

import { useEffect, useState } from "react";
import MovieHeader from "./MovieHeader";
import MovieList from "./MovieList";
import MovieMain from "./MovieMain";
import { axiosInstance } from "../../api/axios";

export default function Movie() {
  const [nowData, setNowData] = useState<MovieType[]>([]); // Now Playing API를 호출한 결과(results) 배열을 할당
  const [nowLoading, setNowLoading] = useState(false);
  const [nowError, setNowError] = useState<Error | null>(null);

  const [popData, setPopData] = useState<MovieType[]>([]); // Popular API를 호출한 결과(results) 배열을 할당
  const [popLoading, setPopLoading] = useState(false);
  const [popError, setPopError] = useState<Error | null>(null);

  const [topData, setTopData] = useState<MovieType[]>([]); // Top Rated API를 호출한 결과(results) 배열을 할당
  const [topLoading, setTopLoading] = useState(false);
  const [topError, setTopError] = useState<Error | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
    const fetchCategory = async (
      endPoint: string,
      setData: React.Dispatch<React.SetStateAction<MovieType[]>>,
      setLoading: React.Dispatch<React.SetStateAction<boolean>>,
      setError: React.Dispatch<React.SetStateAction<Error | null>>,
    ) => {
      setLoading(true);
      setError(null);

      await new Promise((resolve) =>
        setTimeout(
          resolve,
          [3000, 4000, 5000, 6000, 7000][Math.floor(Math.random() * 5)],
        ),
      );
      try {
        const {
          data: { results },
        } = await axiosInstance.get(`/${endPoint}`, {
          signal,
        });
        setData(results);
        console.log(results);
      } catch (e) {
        console.log(e);
        if (e instanceof Error && e.name !== "CanceledError") setError(e);
      } finally {
        if (!controller.signal.aborted) setLoading(false);
      }
    };
    fetchCategory("now_playing", setNowData, setNowLoading, setNowError);
    fetchCategory("popular", setPopData, setPopLoading, setPopError);
    fetchCategory("top_rated", setTopData, setTopLoading, setTopError);

    return () => controller.abort();
  }, []);

  return (
    <>
      <MovieHeader />
      <MovieMain />
      <MovieList
        title="Now Playing"
        movies={nowData}
        loading={nowLoading}
        error={nowError}
      />
      <MovieList
        title="Popular"
        movies={popData}
        loading={popLoading}
        error={popError}
      />
      <MovieList
        title="Top Rated"
        movies={topData}
        loading={topLoading}
        error={topError}
      />
    </>
  );
}

// src/components/movies/MovieList.tsx

import MovieError from "./MovieError";
import MovieListItem from "./MovieListItem";
import MovieLoader from "./MovieLoader";

export default function MovieList({
  title,
  movies,
  loading,
  error,
}: {
  title: string;
  movies: MovieType[];
  loading: boolean;
  error: Error | null;
}) {
  return (
    <>
      <article className="bg-black px-4 pt-4 xs:px-0">
        <section className="container mx-auto py-8 text-white">
          <span className="text-yellow-600">ONLINE STREAMING</span>
          <h2 className="text-[36px] font-bold mb-8">{title}</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:px-0">
            {/* 아이템 1개 */}
            {movies &&
              movies.map((movie) => (
                <MovieListItem key={movie.id} {...movie} />
              ))}

            {/* loading... */}
            {loading && <MovieLoader />}

            {/* error... */}
            {error && <MovieError error={error} />}
          </div>
        </section>
      </article>
    </>
  );
}

무한 스크롤링

무한 스크롤링 : 스크롤이 바닥에 닿았을 때 다음 데이터를 불러와서 추가

--> 스크롤이 바닥에 닿았는지 확인하는 방법이 필요

ㄴ react-intersection-observer 라이브러리 활용

npm i react-intersection-observer 명령어를 사용하여 다운로드

// src/components/movies/Movie.tsx

import { useEffect, useState } from "react";
import MovieHeader from "./MovieHeader";
import MovieList from "./MovieList";
import MovieMain from "./MovieMain";
import { axiosInstance } from "../../api/axios";
import { useInView } from "react-intersection-observer";

export default function Movie() {
  const [nowData, setNowData] = useState<MovieType[]>([]);
  const [nowLoading, setNowLoading] = useState(false);
  const [nowError, setNowError] = useState<Error | null>(null);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const { ref } = useInView({
    threshold: 0.5, // 지정한 div 태그가 화면에 50% 이상 드러나면 바닥에 도달했다고 판단
    rootMargin: "200px", // 스크롤이 맨 밑바닥에 닿기 200px 직전에 미리 감지
    onChange: (inView: boolean) => { 
      if (inView && !nowLoading && hasMore) {
        setPage((page) => page + 1); // 다음 페이지 
      }
    },
  });

  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;
    const fetchCategory = async (
      endpoint: string,
      setData: React.Dispatch<React.SetStateAction<MovieType[]>>,
      setLoading: React.Dispatch<React.SetStateAction<boolean>>,
      setError: React.Dispatch<React.SetStateAction<Error | null>>,
    ) => {
      setLoading(true);
      setError(null);

      await new Promise((resolve) =>
        setTimeout(
          resolve,
          [3000, 4000, 5000, 6000, 7000][Math.floor(Math.random() * 5)],
        ),
      );
      try {
        const {
          data: { results, total_pages },
        } = await axiosInstance.get(`/${endpoint}?page=${page}`, {
          signal,
        });
        setHasMore(page < total_pages);
        if (page === 1) setData(results);
        else setData((data) => [...data, ...results]);
      } catch (e) {
        if (e instanceof Error && e.name !== "CanceledError") setError(e);
      } finally {
        if (!controller.signal.aborted) setLoading(false);
      }
    };
    fetchCategory("now_playing", setNowData, setNowLoading, setNowError);

    return () => controller.abort();
  }, [page]);
  return (
    <>
      <MovieHeader />
      <MovieMain />
      <MovieList
        title="Now Playing"
        movies={nowData}
        loading={nowLoading}
        error={nowError}
      />
      <div ref={ref}></div>
    </>
  );
}

Suspense + Error Boundary + use

// src/store/movieStore.ts

import { create } from "zustand";

type MovieStore = {
  page: number;
  setPage: (page: number) => void;
};

export const useMovieStore = create<MovieStore>()((set) => ({
  page: 1,
  setPage: (page: number) => set({ page }),
}));

// App.tsx

import Movie from "./components/movies/Movie";

export default function App() {
  return (
    <>
      <Movie />
    </>
  );
}

// src/components/movies/Movie.tsx

import { Suspense, useMemo } from "react";
import { axiosInstance } from "../../api/axios";
import MovieHeader from "./MovieHeader";
import MovieList from "./MovieList";
import MovieMain from "./MovieMain";
import MovieLoader from "./MovieLoader";
import { ErrorBoundary } from "react-error-boundary";
import MovieError from "./MovieError";
import { useMovieStore } from "../../store/movieStore";

async function fetchCategory(endPoint: string, page: number) {
  await new Promise((resolve) =>
    setTimeout(
      resolve,
      [3000, 4000, 5000, 6000, 7000][Math.floor(Math.random() * 5)],
    ),
  );
  const { data } = await axiosInstance.get(`${endPoint}?page=${page}`);

  return data;
}

export default function Movie() {
  const page = useMovieStore((state) => state.page);
  const fetchCategoryMemo = useMemo(
    () => fetchCategory("now_playing", page),
    [page],
  );
  return (
    <>
      <MovieHeader />
      <MovieMain />
      <ErrorBoundary fallback={<MovieError title="Now Playing" />}>
        <Suspense fallback={<MovieLoader title="Now Playing" />}>
          <MovieList title="Now Playing" promise={fetchCategoryMemo} />
        </Suspense>
      </ErrorBoundary>
    </>
  );
}

// src/components/movies/MovieList.tsx

import { use } from "react";
import MovieListItem from "./MovieListItem";
import { useMovieStore } from "../../store/movieStore";

export default function MovieList({
  title,
  promise,
}: {
  title: string;
  promise: Promise<{ results: MovieType[]; total_pages: number }>;
}) {
  const { results: movies, total_pages } = use(promise);
  const page = useMovieStore((state) => state.page);
  const setPage = useMovieStore((state) => state.setPage);
  const pageUp = () => {
    const currentPage = Math.min(page + 1, total_pages);
    setPage(currentPage);
  };
  const pageDonw = () => {
    const currentPage = Math.max(1, page - 1);
    setPage(currentPage);
  };
  return (
    <>
      <article className="bg-black px-4 pt-4 xs:px-0">
        <section className="container mx-auto py-8 text-white">
          <span className="text-yellow-600">ONLINE STREAMING</span>
          <h2 className="text-[36px] font-bold mb-8">{title}</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:px-0">
            {/* 아이템 1개 */}
            {movies &&
              movies.map((movie) => (
                <MovieListItem key={movie.id} {...movie} />
              ))}
          </div>
          {/* 이전, 다음 버튼 */}
          <div className="grid grid-cols-2 gap-4 my-8">
            <button
              className="flex items-center justify-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
              onClick={pageDonw}
            >
              Prev
            </button>
            <button
              className="flex items-center justify-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
              onClick={pageUp}
            >
              Next
            </button>
          </div>
        </section>
      </article>
    </>
  );
}

// src/components/movies/MovieListItem.tsx

import { star } from "../../assets/movies/assets";

export default function MovieListItem({
  poster_path,
  release_date,
  title,
  vote_average,
}: MovieType) {
  return (
    <>
      <div>
        <img
          src={`https://image.tmdb.org/t/p/w500${poster_path}`}
          alt=""
          className="rounded-md w-full"
        />
        <div className="flex justify-between items-center font-bold mt-4 mb-2 text-lg">
          <h4 className="line-clamp-1">{title}</h4>
        </div>
        <div className="flex justify-between items-center text-sm text-gray-200">
          <div className="flex items-center gap-2 font-bold">
            <img
              src={star}
              alt="star"
              width={18}
              height={18}
              className="object-contain"
            />
            <span className="text-yellow-500">{vote_average.toFixed(1)}</span>
          </div>
          <span className="text-yellow-500 font-bold">{release_date}</span>
        </div>
      </div>
    </>
  );
}

리액트 애니메이션 - Framer Motion

favor — Sat, 13 Jun 2026 19:04:43 +0900

https://motion.dev/

Motion: JavaScript & React animation library

Motion (prev Framer Motion) is a fast, production-grade animation library for React, JavaScript and Vue. Build smooth UI animations at a tiny footprint.

motion.dev

✔️ Framer Motion의 핵심 속성

initial
- 시작 상태
- 애니메이션이 처음 등장할 때의 초기 스타일
- x축 위치, 투명도 등
animate
- 목표 상태
- 컴포넌트가 최종적으로 도달해야 하는 스타일
transition
- 움직임의 방식
- 애니메이션의 지속 시간(duration), 효과(spring, ease), 지연 시간(delay) 등

Get started

✔️ Install

npm install motion 명령어를 사용하여 다운로드

✔️ Create your first animation

360도 회전하는 div 박스

// src/App.tsx

import Rotate from "./components/Rotate";

export default function App() {
  return (
    <>
      <Rotate />
    </>
  );
}

// src/components/Rotate.tsx

import * as motion from "motion/react-client";

export default function Rotate() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-[#0f1115]">
      <motion.div
        className="w-24 h-24 bg-[#ff0055] rounded-lg"
        animate={{ rotate: 360 }}
        transition={{ duration: 2 }}
      />
    </div>
  );
}

motion.div
- 일반 HTML div 태그에 애니메이션 능력을 부여한 Framer Motion 전용 컴포넌트
animate={{ rotate: 360 }}
- 박스가 최종적으로 도달해야 하는 목표 상태
- 360도 회전
transition={{ duration: 1 }}
- 목표 상태까지 도달하는 데 1초 동안 움직이도록 속도 조절

* 해당 코드에 initial 속성 X

--> 컴포넌트가 Mount 되는 순간(새로고침)에 자동 실행

크기가 2배 커지는 div 박스

// src/components/Rotate.tsx

import * as motion from "motion/react-client";

export default function Rotate() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-[#0f1115]">
      <motion.div
        className="w-24 h-24 bg-[#ff0055] rounded-lg"
        animate={{ scale: 2 }}
        transition={{ duration: 2 }}
      />
    </div>
  );
}

animate={{ scale: 2 }}
- 크기 2배 증가

✔️ Enter animation

탄성을 가지고 등장하는 div 박스

// src/components/EnterAnimation.tsx

import * as motion from "motion/react-client";

export default function EnterAnimation() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-[#0f1115]">
      <motion.div
        className="w-24 h-24 bg-[#ff0055] rounded-full"
        initial={{ opacity: 0, scale: 0 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{
          duration: 0.4,
          scale: { type: "spring", visualDuration: 0.4, bounce: 0.5 },
        }}
      />
    </div>
  );
}

initial={{ opacity: 0, scale: 0 }}
- 투명도 0, 크기 0
animate={{ opacity: 1, scale: 1}}
- 투명도 1, 크기 1
transition={{ duration: 0.4, scale: { type: "spring", visualDuration: 0.4, bounce: 0.5}, }}
- type: "spring" : 고무공처럼 탄성을 가지고 움직이도록 설정

✔️ Hover & tap animation

hover, tap 시 크기가 바뀌는 div 박스

// src/components/Gestures.tsx

import * as motion from "motion/react-client";

export default function Gestures() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-[#0f1115]">
      <motion.div
        className="w-24 h-24 bg-[#ff0055] rounded-lg"
        whileHover={{ scale: 1.2 }}
        whileTap={{ scale: 0.8 }}
      />
    </div>
  );
}

whileHover={{ scale: 1.2 }}
- 박스 위에 마우스 커서를 올렸을 때 실행
- 기존 크기보다 1.2배 증가
whileTap={{ scale: 0.8 }}
- 박스를 클릭하고 있는 순간 실행
- 기존 크기보다 0.8배로 감소

✔️ Layout animation

토글 div 박스

// src/components/LayoutAnimation.tsx

import * as motion from "motion/react-client";
import { useState } from "react";

export default function LayoutAnimation() {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-[#0f1115]">
      <button
        className={`w-24 h-12 bg-[#ff0055]/30 rounded-full cursor-pointer flex p-1 items-center ${isOn ? "justify-start" : "justify-end"}`}
        onClick={toggleSwitch}
      >
        <motion.div
          className="w-8 h-8 bg-[#ff0055] rounded-full"
          layout
          transition={{ type: "spring", visualDuration: 0.2, bounce: 0.2 }}
        />
      </button>
    </div>
  );
}

bg-[#ff0055]/30
- 약 30% 투명도
layout
- justify-start, justify-end 등 바뀐 정렬 방식을 알아채고 자동으로 이동

nav 선택값에 따라 데이터를 출력하는 div 박스

// src/components/SharedLayoutAnimation.tsx

import { AnimatePresence } from "motion/react";
import * as motion from "motion/react-client";
import { useState } from "react";

export default function SharedLayoutAnimation() {
  const [selectedTab, setSelectedTab] = useState(tabs[0]);

  return (
    <>
      <div className="flex items-center justify-center min-h-screen">
        <div className="flex flex-col w-120 h-90 max-w-[calc(100% - 40px)] max-h-[calc(100% - 40px)] rounded-lg bg-white overflow-hidden shadow-2xl">
          <nav className="bg-[#fdfdfd] pt-1 px-1 border-b border-[#eeeeee]">
            <ul className="flex w-full p-0 m-0 list-none font-medium text-sm">
              {tabs.map((item) => (
                <motion.li
                  className="rounded-md w-full px-3.5 py-2.5 relative bg-white cursor-pointer h-6 flex justify-between items-center flex-1 min-w-0 select-none"
                  key={item.label}
                  initial={false}
                  animate={{
                    backgroundColor: item === selectedTab ? "#eee" : "#eee0",
                  }}
                  onClick={() => setSelectedTab(item)}
                >
                  {`${item.icon} ${item.label}`}
                  {item === selectedTab ? (
                    <motion.div
                      className="absolute -bottom-0.5 left-0 right-0 h-0.5 bg-[#ff0055]"
                      layoutId="underline"
                      id="underline"
                    />
                  ) : null}
                </motion.li>
              ))}
            </ul>
          </nav>

          <main className="flex justify-center items-center flex-1">
            <AnimatePresence mode="wait">
              <motion.div
                className="flex items-center justify-center text-[128px] leading-none select-none"
                key={selectedTab ? selectedTab.label : "empty"}
                initial={{ y: 10, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                exit={{ y: -10, opacity: 0 }}
                transition={{ duration: 0.2 }}
              >
                {selectedTab ? selectedTab.icon : " "}
              </motion.div>
            </AnimatePresence>
          </main>
        </div>
      </div>
    </>
  );
}

/**
 * ==============   Data   ================
 */
const allIngredients = [
  { icon: " ", label: "Tomato" },
  { icon: " ", label: "Lettuce" },
  { icon: " ", label: "Cheese" },
  { icon: " ", label: "Carrot" },
  { icon: " ", label: "Banana" },
  { icon: " ", label: "Blueberries" },
  { icon: " ", label: "Champers?" },
];

const [tomato, lettuce, cheese] = allIngredients;
const tabs = [tomato, lettuce, cheese];

구조
- 최상위 부모 <div> : 화면 전체를 사용, 박스를 화면 가로/세로 정중앙에 배치하기 위함
- 중간 카드 <div> : 탭과 이모지가 담길 컨테이너
- <nav> : 상단 메뉴
  - <motion.li> : 각각의 탭 버튼 자체를 담당하는 컴포넌트
  - <motion.div> : 탭 메뉴 밑의 핑크색 밑줄
- <main> : 콘텐츠
max-w-[calc(100% - 40px)]
- 최대 너비를 브라우저 전체 가로폭(100%)에서 40px을 뺀 크기까지만 허용
list-none
- <ul>, <li> 태그 사용 시 나타나는 왼쪽 점을 지워주는 역할
select-none
- 글자나 이모지를 드래그하거나 더블클릭했을 때, 파랗게 선택되는 현상 방지
initial={false}
- 처음 켤 때 빌드업 애니메이션을 생략
- ㄴ 첫 로딩 시 불필요한 색상 빌드업을 차단
mode="wait"
- AnimatePresence 내부에서 교체가 일어날 때 기존 컴포넌트가 완전히 사라질 때까지 새 컴포넌트를 대기시킴
- 화면 전환이 깔끔해짐
leading-none
- 폰트 줄간격을 1로 만들어 위아래 여백을 삭제
allIngredients
- 확장성을 위한 전체 데이터베이스 역할

✔️ Exit animations

버튼으로 등장, 퇴장하는 div 박스

// src/components/ExitAnimation.tsx

import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";

export default function ExitAnimation() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div className="flex items-center justify-center min-h-screen bg-[#0f1115]">
      <div className="flex flex-col relative w-24 h-44">
        <AnimatePresence initial={false}>
          {isVisible ? (
            <motion.div
              className="w-24 h-24 bg-[#ff0055] rounded-lg"
              initial={{ opacity: 0, scale: 0 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0 }}
              key="box"
            />
          ) : null}
        </AnimatePresence>
        <motion.button
          className="bg-[#ff0055] rounded-lg py-2.5 absolute bottom-0 left-0 right-0 cursor-pointer text-white"
          onClick={() => setIsVisible(!isVisible)}
          whileTap={{ y: 1 }}
        >
          {isVisible ? "Hide" : "Show"}
        </motion.button>
      </div>
    </div>
  );
}

<AnimatePresence>
- 리액트) 조건부 렌더링 사용 --> 조건이 false가 되면 컴포넌트를 화면에서 즉시 삭제
- AnimatePresence가 사라져야 할 컴포넌트를 화면에 붙잡아둠
- ㄴ exit 애니메이션을 보여줘야 하기 때문에
initial={false}
- initial : 컴포넌트가 화면에 처음 등장할 때의 애니메이션을 제어하는 속성
exit={{ opacity: 0, scale: 0 }}
- exit : 컴포넌트가 화면에서 사라질 때의 애니메이션을 제어하는 속성
- 투명도 0, 크기 0
key="box"
- Framer Motion은 어떤 컴포넌트가 사라졌고 생겼는지를 key 값을 기준으로 추적
whileTap={{ y: 1 }}
- 버튼을 클릭하고 있는 순간 실행
- y축으로 1픽셀만큼 내려감

✔️ SVG aniamtions

인터랙티브 드래그에 따라 실시간으로 디자인이 변경되는 div 박스

// src/components/UseTransfomr.tsx

import { motion, useMotionValue, useTransform } from "motion/react";

export default function UseTransform() {
  const x = useMotionValue(0);
  const xInput = [-100, 0, 100];
  const background = useTransform(x, xInput, [
    "linear-gradient(180deg, #ff008c 0%, rgb(211, 9, 225) 100%)",
    "linear-gradient(180deg, #7700ff 0%, rgb(68, 0, 255) 100%)",
    "linear-gradient(180deg, rgb(230, 255, 0) 0%, rgb(3, 209, 0) 100%)",
  ]);
  const color = useTransform(x, xInput, [
    "rgb(211, 9, 225)",
    "rgb(68, 0, 255)",
    "rgb(3, 209, 0)",
  ]);
  const tickPath = useTransform(x, [10, 100], [0, 1]);
  const crossPathA = useTransform(x, [-10, -55], [0, 1]);
  const crossPathB = useTransform(x, [-50, -100], [0, 1]);

  return (
    <div className="flex items-center justify-center min-h-screen">
      <motion.div
        className="flex justify-center items-center flex-1 w-125 h-75 max-w-full rounded-3xl"
        style={{ background }}
      >
        <motion.div
          className="w-35 h-35 bg-white rounded-3xl p-5 cursor-grab"
          style={{ x }}
          drag="x"
          dragConstraints={{ left: 0, right: 0 }}
          dragElastic={0.5}
        >
          <svg viewBox="0 0 50 50">
            {/* 배경 원형 패스 */}
            <motion.path
              fill="none"
              strokeWidth="2"
              stroke={color}
              d="M 0, 20 a 20, 20 0 1,0 40,0 a 20, 20 0 1,0 -40,0"
              style={{ x: 5, y: 5 }}
            />
            {/* 틱(V) 아이콘 패스 */}
            <motion.path
              id="tick"
              fill="none"
              strokeWidth="2"
              stroke={color}
              d="M14,26 L 22,33 L 35,16"
              strokeDasharray="0 1"
              style={{ pathLength: tickPath }}
            />
            {/* 엑스(X) 첫 번째 선 패스 */}
            <motion.path
              fill="none"
              strokeWidth="2"
              stroke={color}
              d="M17,17 L33,33"
              strokeDasharray="0 1"
              style={{ pathLength: crossPathA }}
            />
            {/* 엑스(X) 두 번째 선 패스 */}
            <motion.path
              id="cross"
              fill="none"
              strokeWidth="2"
              stroke={color}
              d="M33,17 L17,33"
              strokeDasharray="0 1"
              style={{ pathLength: crossPathB }}
            />
          </svg>
        </motion.div>
      </motion.div>
    </div>
  );
}

const x = useMotionValue(0)
- useMotionValue : 컴포넌트를 리렌더링하지 않고도 박스의 현재 좌표 값을 부드럽게 업데이트하며 저장
- 0 : 맨처음 시작하는 정중앙 위치
const xInput = [-100, 0, 100]
- 색상과 모양을 바꾸기 위한 수치 기준 배열
- -100 : 왼쪽으로 100px
- 100 : 오른쪽으로 100px
const background
- 드래그에 반응하는 배경 그라데이션 값
const color
- SVG(동그라미, 체크, 엑스 패스) 색상 값
const tickPath = useTransform(x, [10, 100], [0, 1])
- useTransform : 값 매핑 훅
  - useTransform(감시할값, [입력기준점들], [결과물들])
  - 배열 안의 요소들을 매핑
- 체크 패스를 그리는 네비게이터
- x 좌표가 10px에서 100px로 이동하는 동안
- 패스의 선 길이 비율을 0(0%)에서 1(100%)로 매핑
const corssPath
- 엑스 패스를 2단계로 나눠 그리는 네비게이터
- const crossPathA = useTransform(x, [-10, -55], [0, 1])
  - x 좌표가 -10px에서 -55px로 이동하는 동안
- const crossPathB = useTransform(x, [-50, -100], [0, 1])
  - x 좌표가 -50px에서 -100px로 이동하는 동안
drag="x"
- 가로 드래그 허용 활성화
- x로 지정했기 때문에 양옆으로만 이동 가능
dragConstraints={{ left: 0, right: 0 }}
- 드래그의 이동 제한 구역을 설정하는 옵션
- 마우스 버튼에서 손을 떼는 순간 정중앙으로 되돌아오도록 설정
dragElastic={0.5}
- 드래그할 때 묵직함을 주는 고무줄 탄성도
- 0 : 탄성 X --> 좌우로 움직이지 X
- 1 : 저항력 X --> 마우스 커서가 가볍게 따라옴
strokeDasharray="0 1"
- 선그리기 애니메이션을 위한 SVG 세팅의 밑작업
- 선을 0만큼 그리고, 공백을 1만큼 채우라는 뜻
- == 처음에는 선을 완전히 숨겨 안 보이도록 만듦
d="M 0,20 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0"
- M(Move to) : 시작점으로 이동 / a(Arc) : 부드러운 곡선
- M 0,20 : (0, 20) 좌표 지점에서 시작
- a 20,20 0 1,0 40,0
  - 20,20 : 곡선의 가로 반지름 20px, 세로 반지름 20px
  - 0 : 회전 각도 0도
  - 1,0 : 위쪽으로 볼록한 반원을 그리며 시계방향으로 돌기
  - 40,0 : 최종 목적지 좌표 (40, 0)

OverView

✔️ Keyframes

시간 흐름에 따라 모양이 달라지는 div 박스

// src/components/Keyframes.tsx

import * as motion from "motion/react-client";

export default function Keyframes() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-[#0f1115]">
      <motion.div
        className="w-24 h-24 bg-white rounded-md"
        animate={{
          scale: [1, 2, 2, 1, 1],
          rotate: [0, 0, 180, 180, 0],
          borderRadius: ["0%", "0%", "50%", "50%", "0%"],
        }}
        transition={{
          duration: 2,
          ease: "easeInOut",
          times: [0, 0.2, 0.5, 0.8, 1],
          repeat: Infinity,
          repeatDelay: 1,
        }}
      />
    </div>
  );
}

animate={{ scale: [1, 2, 2, 1, 1], rotate: [0, 0, 180, 180, 0], borderRadius: ["0%", "0%", "50%", "50%", "0%"] }}
- scale: [1, 2, 2, 1, 1]
  - 크기를 1배 --> 2배 --> 2배 유지 --> 1배 --> 1배 유지 순으로 변환
- rotate: [0, 0, 180, 180, 0]
  - 회전각을 0도 --> 0도 유지 --> 180도 회전 --> 180도 유지 --> 0도 순으로 변환
- borderRadius: ["0%", "0%", "50%", "50%", "0%"]
  - 모양을 네모 --> 네모 유지 --> 동그라미 --> 동그라미 유지 --> 네모 순으로 변환
transition={{ duration: 2, ease: "easeInOut", times: [0, 0.2, 0.5, 0.8, 1], repeat: Infinity, repeatDelay: 1 }}
- duration: 2
  - 전체 한 바퀴 도는 애니메이션의 총 재생 시간이 2초
- ease: "easeInOut"
  - 시작할 때 부드럽게 가속, 끝날 때 부드럽게 감속
- times: [0, 0.2, 0.5, 0.8, 1]
  - 배열 안의 배열들이 전체 2초 중 어느 타이밍에 일어날지 정하는 타임라인 인터벌
- repeat: Infinity
  - 무한 반복
- repeatDelay: 1
  - 다음 애니메이션 시작까지 1초 대기

✔️ Motion along a path

포물선으로 날아가는 div 박스와 파동으로 흔들리는 div 박스

// src/components/AddToBasket.tsx

import { motion, arc, useAnimate, useMotionValue } from "motion/react";
import { useRef, useState } from "react";

const PRODUCT_SIZE = 160;
const BASKET_BOX = 56;
const FLY_SCALE = BASKET_BOX / PRODUCT_SIZE;

type Direction = "auto" | "cw" | "ccw";

interface AddToBasketProps {
  strength?: number;
  peak?: number;
  rotate?: number;
  duration?: number;
  basketVelocityFactor?: number;
  direction?: Direction;
}

export default function AddToBasket({
  strength = 0.5,
  peak = 0.15,
  rotate = 0.9,
  duration = 0.45,
  basketVelocityFactor = 0.05,
  direction = "cw",
}: AddToBasketProps = {}) {
  const [scope, animate] = useAnimate();
  const productRef = useRef<HTMLDivElement>(null);
  const basketRef = useRef<HTMLDivElement>(null);
  const ringRef = useRef<HTMLDivElement>(null);
  const [isFlying, setIsFlying] = useState(false);
  const productX = useMotionValue(0);
  const productY = useMotionValue(0);

  const addToBasket = async () => {
    const product = productRef.current;
    const basket = basketRef.current;
    const ring = ringRef.current;
    if (!product || !basket || !ring || isFlying) return;
    setIsFlying(true);

    const from = product.getBoundingClientRect();
    const to = basket.getBoundingClientRect();
    const dx = to.left + to.width / 2 - (from.left + from.width / 2);
    const dy = to.top + to.height / 2 - (from.top + from.height / 2);

    // product를 조종하는 animate
    await animate(
      product,
      {
        x: dx,
        y: dy,
        scale: FLY_SCALE,
        opacity: [1, 1, 0],
      },
      {
        duration,
        path: arc({
          strength,
          peak,
          rotate,
          direction: direction === "auto" ? undefined : direction,
        }),
        ease: [0.74, 0.18, 0.93, 0.69],
        opacity: { inherit: true, times: [0, 0.95, 1] },
      },
    );

    // basket을 조종하는 animate
    animate(
      basket,
      { x: 0, y: 0 },
      {
        type: "spring",
        stiffness: 500,
        damping: 12,
        x: {
          inherit: true,
          velocity: productX.getVelocity() * basketVelocityFactor,
        },
        y: {
          inherit: true,
          velocity: productY.getVelocity() * basketVelocityFactor,
        },
      },
    );

    // 파동을 조종하는 animate
    animate(
      ring,
      { scale: [1, 2.2], opacity: [0.8, 0] },
      { duration: 0.5, ease: "easeOut" },
    );

    // 충돌 이후 product를 조종하는 animate
    animate(
      product,
      {
        x: 0,
        y: 0,
        scale: 0.9,
        rotate: 0,
        opacity: 0,
        clipPath: "inset(0%)",
      },
      { duration: 0 },
    );

    // 재등장하는 product를 조종하는 animate
    await animate(
      product,
      { opacity: 1, scale: 1 },
      {
        scale: { type: "spring", visualDuration: 0.4, bounce: 0.35 },
        opacity: { duration: 0.25, ease: "easeOut" },
      },
    );

    setIsFlying(false);
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-[#0f1115]">
      <div
        className="absolute inset-0 flex items-center justify-center overflow-hidden font-mono text-white"
        ref={scope}
      >
        <style>{`#sandbox { position: relative }`}</style>
        <div
          className="absolute top-20 right-20 flex items-center justify-center bg-[--layer] border border-[--border] text-[#ff0055] will-change-transform"
          style={{ width: BASKET_BOX, height: BASKET_BOX }}
          ref={basketRef}
        >
          <motion.div
            className="absolute -inset-px border border-[--accent] opacity-0 pointer-events-none will-change-transform"
            ref={ringRef}
          />
          <BasketIcon />
        </div>

        <div className="flex flex-col items-center gap-4.5">
          <motion.div
            className="flex items-center justify-center bg-[--layer] border border-[--border] will-change-transform"
            style={{
              x: productX,
              y: productY,
              width: PRODUCT_SIZE,
              height: PRODUCT_SIZE,
            }}
            ref={productRef}
          >
            <span className="text-7xl leading-none select-none"> </span>
          </motion.div>

          <div className="flex items-baseline gap-3 font-mono text-xs tracking-wide">
            <span className="text-white">Campus 00s</span>
            <span className="text-[#ff0055]">£128</span>
          </div>

          <motion.button
            className="mt-1 px-6.5 py-3 border-none bg-[#ff0055] text-[--background] font-mono text-xs tracking-[0.12em] uppercase cursor-pointer"
            type="button"
            onClick={addToBasket}
            disabled={isFlying}
            whileHover={{ scale: 1.03 }}
            whileTap={{ scale: 0.97 }}
            style={{
              opacity: isFlying ? 0.55 : 1,
              pointerEvents: isFlying ? "none" : "auto",
            }}
          >
            Add to Basket
          </motion.button>
        </div>
      </div>
    </div>
  );
}
function BasketIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="26"
      height="26"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="m15 11-1 9" />
      <path d="m19 11-4-7" />
      <path d="M2 11h20" />
      <path d="m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4" />
      <path d="M4.5 15.5h15" />
      <path d="m5 11 4-7" />
      <path d="m9 11 1 9" />
    </svg>
  );
}

const productRef = useRef<HTMLDivElement>(null)
- useRef 훅 : 실제 HTML 태그에 DOM 접근을 하거나, 화면 리렌더링 없이 값을 저장할 수 있게 해주는 역할
- 실제 신발 상자(product) <div> 태그의 위치 좌표와 알맹이 속성에 접근하기 위한 화살표 선언
const productX = useMotionValue(0)
- useMotionValue() : 리액트 화면을 리렌더링하지 않고도, 움직이는 요소의 수치를 부드럽게 저장, 추적할 수 있게 해주는 역할
- 움직이는 product의 실시간 x좌표값과 물리 속도를 측정하기 위한 엔진 선언
const addToBasket = async () => {}
- async(Asynchronous) : 함수 내부에서 비동기 제어를 할 것임을 선언
- await : 해당 작업이 완벽하게 끝날 때까지 아랫줄의 코드들이 실행되지 않도록 정지
const product = productRef.current
- .current : useRef 안에 들어있는 실제 HTML 태그를 꺼내오도록 하는 속성
const from = product.getBoundingClientRect()
- getBoundingClientRect() : 브라우저 화면 내에서 현재 태그의 실제 x, y 좌표와 크기 정보를 실시간으로 따오는 함수
const dx = to.left + to.width / 2 - (from.left + from.width / 2)
- product의 정중앙 지점부터 basket의 정중앙 지점까지 가로로 몇 픽셀, 세로로 몇 픽셀 이동해야 하는지 계산해 낸 최종 거리값
stiffness : 500
- spring이 얼마나 팽팽한지 결정
dampting : 12
- 브라우저 공기 저항이나 마찰력을 의미
- 小 : 공기 저항 ↓ / 大 : 공기 저항 ↑
x: { inherit: true, velocity: productX.getVelocity() * basketVelocityFactor }
- inherit: true
  - product가 날아오던 힘과 방향을 그대로 상속받아 basket에게 충격 전달
style={{ width: BASKET_BOX, heitght: BASKET_BOX }}
- tailwind css에서는 상수값만큼 값을 줄 수가 X
- style로 따로 빼서 값 전달
ref={basketRef}
- 미리 선언해둔 화살표 변수(basketRef)를 실제 HTML 태그에 수동으로 바인딩
- 앞으로 basketRef.current를 호출하면, 방금 그린 장바구니 <div> 태그 알맹이를 통째로 꺼내 전달하게 됨

✔️ Animate Content

0부터 100까지 숫자가 증가하는 div 박스

// src/components/HTMLContent.tsx

import { animate } from "motion";
import { motion, useMotionValue, useTransform } from "motion/react";
import { useEffect } from "react";

export default function HTMLContent() {
  const count = useMotionValue(0);
  const rounded = useTransform(() => Math.round(count.get()));

  useEffect(() => {
    const controls = animate(count, 100, { duration: 5 });
    return () => controls.stop();
  }, [count]);

  return (
    <>
      <div className="flex items-center justify-center min-h-screen bg-[#0f1115]">
        <motion.div className="font-mono text-6xl leading-none text-[#ff0055]">
          {rounded}
        </motion.div>
      </div>
    </>
  );
}

const count = useMotionValue(0)
- 컴포넌트를 리렌더링하지 않고 메모리 속에서만 숫자 데이터를 빠르게 계산하며 저장
const rounded = useTransform(() => Math.round(count.get()))
- count가 변할 때마다 가져와서 반올림한 정수만 rounded에 저장
useEffect(() => {}, [count])
- 컴포넌트가 마운트 된 순간 + count를 감지하여 값이 변할 때마다 함수 실행
const controls = animate(count, 100, { duration: 5 })
- count 안의 숫자를 5초 동안, 100까지 증가
return () => controls.stop()
- 컴포넌트가 화면에서 사라질 때는 애니메이션 즉시 중단

섹션 15. 전역 상태 관리 - Zustand

favor — Fri, 12 Jun 2026 16:48:33 +0900

Zustand란?

Zustand : 전역 상태 관리 라이브러리

ㄴ Redux Toolkit, Context API보다 적은 코드와 직관적인 방식으로 상태 관리 가능

공식 홈페이지

https://zustand-demo.pmnd.rs/

Zustand

zustand-demo.pmnd.rs

Zustand 사용하기

패키지 설치
- npm install zustand 명령어를 사용하여 다운로드
폴더 구조 설계
- src/store/ 하위에 ts 파일로 생성
store 파일 생성 및 기본 뼈대 정의
- store : 애플리케이션의 전역 상태(State)와 이를 변경하는 비즈니스 로직(Action)을 한데 모아 관리하는 보관소
- store에서 사용할 데이터와 함수의 타입 설계도를 interface로 정의
- Zustand의 create 훅을 사용하여 컴포넌트들이 구독할 전역 store 생성
- export const use***Store = create((set, get) => ({}));
  - set : 스토어 내부의 데이터를 안전하게 변경하기 위해 사용하는 상태 변경 콜백 함수
  - get : 특정 액션(함수) 내부에서 현재 스토어에 담긴 최신 상태값들을 동기적으로 참조하기 위해 사용하는 현재 상태 조회 함수

// src/store/countStore.ts

import { create } from "zustand";

type CountStore = {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

// use***Store
export const useCountStore = create<CountStore>((set) => ({
  count: 0,
  decrement: () => set((state) => ({ count: state.count - 1 })),
  increment: () => set((state) => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 })
}));

// src/components/CountOutside.tsx

import { useCountStore } from "../store/countStore";

export default function CountOutside() {
  const count = useCountStore((state) => state.count);

  return (
    <>
      <h1>CountOutside: {count}</h1>
    </>
  );
}

// src/components/CountDisplay.tsx

import { useCountStore } from "../store/countStore";

export default function CountDisplay() {
  const count = useCountStore((state) => state.count);

  return (
    <>
      <h1>Count: {count}</h1>
    </>
  );
}

// src/components/CountButton.tsx

import { useCountStore } from "../store/countStore";

export default function CountButton() {
  const increment = useCountStore((state) => state.increment);
  const decrement = useCountStore((state) => state.decrement);
  const reset = useCountStore((state) => state.reset);

  return (
    <>
      <button onClick={decrement}>감소</button>
      <button onClick={reset}>리셋</button>
      <button onClick={increment}>증가</button>
    </>
  );
}

Zustand 매개변수

Zustand는 외부에서 매개변수를 전달받거나 비동기 함수를 사용할 때에도 매우 쉽게 처리 가능

매개변수 처리

// src/components/CountButton.tsx

import { useCountStore } from "../store/countStore";

export default function CountButton() {
  const increment = useCountStore((state) => state.increment);
  const decrement = useCountStore((state) => state.decrement);
  const reset = useCountStore((state) => state.reset);

  return (
    <>
      <button onClick={decrement}>감소</button>
      <button onClick={reset}>리셋</button>
      <button onClick={() => increment(5)}>증가</button>
    </>
  );
}

^ increment(5) --> 5라는 매개변수 전달

// src/store/countStore.ts

import { create } from "zustand";

type CountStore = {
  count: number;
  increment: (amount: number) => void;
  decrement: () => void;
  reset: () => void;
}

export const useCountStore = create<CountStore>((set) => ({
  count: 0,
  increment: (amount: number) => set((state) => ({ count: state.count + amount })), // 전달받은 값만큼 증가 
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 })
}));

^ amount: number

비동기 함수 처리

// src/store/countStore.ts

import { create } from "zustand";

type CountStore = {
  count: number;
  increment: (amount: number) => void;
  decrement: () => void;
  reset: () => void;
};

export const useCountStore = create<CountStore>((set) => ({
  count: 0,
  increment: async (amount: number) => { // async 
    await new Promise((resolve) => setTimeout(resolve, 1000)); // await new Promise
    set((state) => ({ count: state.count + amount }));
  },

  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

^ async/await를 활용해 1초의 지연 후 상태를 갱신하는 비동기 함수 구현

Zustand persist

Zustand의 상태 데이터는 브라우저를 새로고침하면 모두 초기화됨

상태를 새로고침해도 유지되게 하기 위해서는 local storage, session storage에 상태를 동기화시켜야 함

ㄴ 다른 전역 상태 관리 라이브러리는 그러한 스토리지 작업을 직접 해야 해야 했지만, Zustand는 작업을 대신 처리해주는 persist 미들웨어 기능을 보유

미들웨어(middleware) : 특정 라이브러리의 핵심 동작을 확장하거나 가로채서 추가적인 기능을 수행할 수 있도록 지원하는 소프트웨어 구조

ㄴ 어떤 하나의 기능을 지칭하는 것은 X

Persist 미들웨어 구현 문법 및 사용법

create 함수의 콜백 함수를 persist() 미들웨어 함수로 감싸줌
persist()의 두 번째 매개변수로 객체 지정
- storage: createJSONStorage(() => sessionStorage) : 생략 시 기본값은 localStorage
해당 객체에 name 속성을 정하여 스토리지에 저장될 고유 Key를 선언

// src/store/countStore.ts

import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";

type CountStore = {
  count: number;
  increment: (amount: number) => void;
  decrement: () => void;
  reset: () => void;
};

export const useCountStore = create<CountStore>()(
  persist(
    (set) => ({
      count: 0,
      increment: (amount: number) => {
        set((state) => ({ count: state.count + amount }));
      },
      decrement: () => set((state) => ({ count: state.count - 1 })),
      reset: () => set({ count: 0 }),
    }),
    {
      name: "count-storage",
      storage: createJSONStorage(() => sessionStorage) // 세션 스토리지에 저장되도록 설정 
    },
  ),
);

Zustand subscribeWithSelector

subscribeWithSelector 미들웨어 : 특정 상태가 변경될 때를 감지해서 특정 로직을 수행할 수 있는 구독 기능을 사용할 수 있게 해주는 미들웨어

subscribeWithSelector 미들웨어 구현 문법 및 사용법

스토어를 만들 때 subscribeWithSelector 미들웨어 함수로 감싸줌
구독할 변수, 변수값에 변화가 생기면 실행할 함수 설정

// src/store/countStore.ts

import { create } from "zustand";
import {
  createJSONStorage,
  persist,
  subscribeWithSelector,
} from "zustand/middleware";

type CountStore = {
  count: number;
  increment: (amount: number) => void;
  decrement: () => void;
  reset: () => void;
};

export const useCountStore = create<CountStore>()(
  subscribeWithSelector(
    // subscribeWithSelector 미들웨어 적용
    persist(
      (set) => ({
        count: 0,
        increment: (amount: number) => {
          set((state) => ({ count: state.count + amount }));
        },
        decrement: () => set((state) => ({ count: state.count - 1 })),
        reset: () => set({ count: 0 }),
      }),
      {
        name: "count-storage",
        storage: createJSONStorage(() => sessionStorage), 
      },
    ),
  ),
);

// src/components/Count.tsx

import { useEffect } from "react";
import CountGroup from "./CountGroup";
import { useCountStore } from "../store/countStore";

export default function Count() {
  useEffect(() => {
    const unsubscibe = useCountStore.subscribe(
      (state) => state.count, // count 상태를 구독하고 있다가, 
      (newCount) => { // 상태에 변화가 생기면 해당 콜백 함수를 실행 
        console.log("newCount" + newCount);
      },
    );
    return () => {
      unsubscibe();
    };
  }, []);
  return (
    <>
      <CountGroup />
    </>
  );
}

Zustand immer

immer 미들웨어 : 사용자가 불변성을 고려하지 않아도 자동으로 불변성을 처리해주는 미들웨어

패키지 설치
- npm install immer 명령어를 사용하여 다운로드
사용하기
- subscribeWithSelector 미들웨어 전체를 감싸는 것 X
- set 함수가 콜백 함수로 전달되는 함수의 영역을 감싸는 것 O

// src/count/countStore.ts

import { create } from "zustand";
import {
  createJSONStorage,
  persist,
  subscribeWithSelector,
} from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

type CountStore = {
  count: number;
  increment: (amount: number) => void;
  decrement: () => void;
  reset: () => void;
};

export const useCountStore = create<CountStore>()(
  subscribeWithSelector(
    persist(
      immer((set) => ({ // immer 미들웨어 적용
        count: 0,
        increment: (amount: number) => {
          set((state) => {
            state.count += amount;
          });
        },
        decrement: () =>
          set((state) => {
            state.count -= 1;
          }),
        reset: () =>
          set((state) => {
            state.count = 0;
          }),
      })),
      {
        name: "count-storage",
        storage: createJSONStorage(() => sessionStorage),
      },
    ),
  ),
);

Zustand devtools

Zustand는 가벼운 상태 관리 라이브러리 --> 자체 GUI 디버깅 도구를 내장하고 있지 X

ㄴ 대신 브라우저 확장 프로그램인 Redux Devtools와 완벽하게 연동되는 미들웨어를 제공

서비스 배포(Production) 환경에서 상태 변화 흐름이 무방비하게 노출되면 보안 취약점이 될 수 있고, 성능 저하를 유발하기도 함

∴ 개발(Development) 환경에서만 DevTools가 켜지도록 조건부 제어하는 것이 필수적

DevTools 자동화 설정 문법

devtools 미들웨어의 두 번째 매개변수 객체에 설정 주입
name : 디버거 창 내에서 각 스토어를 식별하기 위한 고유 이름표 지정
enabled : 환경 변수를 활용하여 현재 빌드 모드가 development일 때만 동적으로 활성화 처리
- { enabled: false } --> 연동되지 않도록 설정
- ㄴ 개발모드에선 true, 그렇지 않을 때에는 false라고 지정하면 됨
- { enabled: import.meta.env.MODE === "development" }
- ㄴ 자동화

// src/store/countStore.ts

import { create } from "zustand";
import {
  createJSONStorage,
  devtools,
  persist,
  subscribeWithSelector,
} from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

type CountStore = {
  count: number;
  increment: (amount: number) => void;
  decrement: () => void;
  reset: () => void;
};

export const useCountStore = create<CountStore>()(
  devtools( // devtools 미들웨어 적용
    subscribeWithSelector(
      persist(
        immer((set) => ({
          count: 0,
          increment: (amount: number) => {
            set((state) => {
              state.count += amount;
            });
          },
          decrement: () =>
            set((state) => {
              state.count -= 1;
            }),
          reset: () =>
            set((state) => {
              state.count = 0;
            }),
        })),
        {
          name: "count-storage",
          storage: createJSONStorage(() => sessionStorage),
        },
      ),
    ),
  ),
);

섹션 16. 데이터 통신

favor — Thu, 11 Jun 2026 18:38:19 +0900

데이터 패칭 기초 개념

데이터 통신 : 컴포넌트가 서버에 외부 데이터를 요청하고, 그 응답을 받아 상태로 반영하여 UI를 업데이트하는 과정

API(Application Programming Interface) : 클라이언트가 서버와 통신하기 위한 통신 규칙

REST API
GraphQL

REST API : 주소로서 데이터를 구분하는 API 설계 방식

ex) https://api.example.com/user/1?lang=ko

- 전체적인 주소 : URL

- https:// : 프로토콜

- api.example.com : 도메인

- user, 1 : path, 세그먼트

- lang=ko : Query String

HTTP(S) 통신 : 내부적으로 메소드를 활용하여 데이터 통신의 역할을 구분

GET
- 데이터 요청
POST
- 데이터 추가
PUT/PATCH
- 데이터 수정
DELETE
- 데이터 삭제

json-server

json-server : JSON 파일만 있으면 바로 실행해볼 수 있는 가짜 REST API 서버 도구

npm i json-server@0.17.3 명령어를 사용하여 다운로드

npm run server 명령어를 사용하여 서버 구동

thunder client

thunder client Extension : Visual Studio Code에서 API를 호출하고 그 결과를 눈으로 볼 수 있게 해주는 도구

PUT, PATCH의 차이점

PUT
- 전체 데이터를 변경할 때
PATCH
- 데이터의 일부를 변경할 때

* 그러나 실무에서 둘을 구분하지 않는 경우가 많음

json-server 추가 기능

페이징(Pagination) 기능
- _page와 _limit 쿼리 스트링을 사용하여 대량의 데이터를 쪼개서 요청 가능
- 기본 페이징 (1페이지 당 기본 10개 출력)
  - GET) http://localhost:3000/posts?_page=1
  - --> 1~10번까지의 데이터 10개 출력
  - GET) http://localhost:3000/posts?_page=2
  - --> 11~20번까지의 데이터 10개 출력
- 페이지 당 개수 제한(limit) 설정
  - GET) http://localhost:3000/posts?_page=1&_limit=5
  - --> 1페이지에 해당하는 데이터 5개 출력
전체 텍스트 검색(Full-text Search) 기능
- q 파라미터를 사용하면 데이터 객체 내의 모든 필드(id, title, content 등)를 대상으로 키워드 포함 여부를 검사
- 기본 검색
  - GET) http://localhost:3000/posts?q=Post #22
  - --> 데이터 중 어느 필드에든 "Post #22"라는 문자열이 포함된 데이터를 모두 찾아 출력
응답 지연(Delay) 시뮬레이션 기능
- 느린 네트워크 환경에서 로딩 상태나 비동기 처리가 잘 작동하는지 테스트하기 위해 응답을 의도적으로 지연시키는 기능
- package.json 스크립트 등록
  - "scripts" : { "delay" : "npx json-server server/db.json --delay 2000" }
  - --> 터미널에 npm run delay 명령어를 입력했을 때, 모든 API 요청이 내가 지정한 시간(2초)만큼 지연된 후에 응답함

fetch - 1 (basic)

리액트에서 데이터 통신은 사이드 이펙트로 취급

--> 사이드 이펙트를 처리할 때 사용하는 useEffect 훅 이용

// App.tsx

import Fetch from "./components/Fetch";

export default function App() {
  return (
    <>
      <Fetch />
    </>
  );
}

// src/components/Fetch.tsx

import { useEffect, useState } from "react";

interface Posts { // 서버에서 받아올 데이터의 타입 정의
  id: number;
  title: string;
  views: number;
}

export default function Fetch() {

  const [posts, setPosts] = useState<Posts[]>([]); // 서버에서 가져온 데이터들을 저장할 변수 선언 

  // useEffect [] 빈 배열 --> 컴포넌트가 처음 켜질 때 딱 한 번만 실행 
  useEffect(() => {
    fetch("http://localhost:3000/posts").then((response) => {
      console.log(response);
      return response.json();
    }).then((data) => setPosts(data));
  }, []);

  return (
    <>
      <h3>Fetch</h3>
      <ul>
        {posts.map((post) => <li key={post.id}>{post.title}</li>)}
      </ul>
    </>
  );
}

useEffect에서 의존성 배열의 3가지 상태와 타이밍

배열이 비어있을 때
- useEffect(() => {}, []);
- 컴포넌트가 브라우저 화면에 최초로 딱 한 번 등장했을 때만 본문 함수를 실행
- 다른 상태가 바뀌어서 컴포넌트가 리렌더링되어도 재실행 X
- 초기 화면을 구성하기 위한 서버 데이터 최초 요청을 위해 쓰임
배열을 아예 적지 않았을 때
- useEffect(() => {});
- 컴포넌트가 처음 켜질 때를 비롯하여 컴포넌트 내부의 상태가 하나라도 바뀌어서 리렌더링 될 때마다 본문 함수 재실행
배열 안에 특정 상태값을 넣었을 때
- useEffect(() => {}, [keyword]);
- 컴포넌트가 처음 켜질 때 실행되고, 이후에 keyword라는 변수의 값이 바뀔 때마다 본문 함수를 실행
- 사용자가 검색창에 타이핑을 할 때마다 실시간으로 서버에서 다른 데이터를 검색해서 가져와야 할 때 쓰임

.then() : 기다렸다가 서버 응답을 받은 후에 순서대로 코드를 처리할 수 있도록 하는 비동기 안전장치

ㄴ 자바스크립트는 서버에서 데이터를 받아오는 속도를 기다려주지 않코 다음 밑줄의 코드를 그냥 실행해버리는 성질을 가짐

--> 만약 .then()이 없다면 데이터를 다 받지도 않았는데 화면을 그리려 해서 undefined 에러가 발생

fetch - 2 (loading)

새로고침을 하면 렌더링된 데이터가 깜빡거림

∵ 컴포넌트가 화면에 그려진 이후에 useEffect가 실행돼서 fetch API조차 비동기로 동작하기 때문

--> isLoading 상태를 정의하여 관리

// src/components/Fetch.tsx

import { useEffect, useState } from "react";

interface Posts { 
  id: number;
  title: string;
  views: number;
}

export default function Fetch() {

  const [posts, setPosts] = useState<Posts[]>([]); 
  const [isLoading, setIsLoading] = useState(false); // 로딩 중일 때를 관리하기 위한 상태 정의

  useEffect(() => {
    setIsLoading(true); // 바꿔주기
    fetch("http://localhost:3000/posts").then((response) => {
      console.log(response);
      return response.json();
    }).then((data) => setPosts(data))
    .finally(() => { // 바꿔주기
      setIsLoading(false);
    });
  }, []);

  if (isLoading) return <p>Loading...</p>;

  return (
    <>
      <h3>Fetch</h3>
      <ul>
        {posts.map((post) => <li key={post.id}>{post.title}</li>)}
      </ul>
    </>
  );
}

fetch - 3 (error)

데이터 통신 에러

404 Error
- 서버 응답 에러
- 브라우저가 보낸 요청이 물리적으로 서버 컴퓨터에 완벽하게 도착했고, 서버가 Response를 돌려준 상황
- ㄴ 서버의 응답 : URL에 해당하는 데이터나 페이지가 내 컴퓨터에 존재하지 않음
- ex) API 주소에 오타가 났을 때, 서버 데이터베이스에서 삭제된 데이터를 조회하려고 할 때
(failed) network 에러
- 네트워크 연결 에러
- HTTP 통신 단계까지 도달하지 못함
- 브라우저가 서버 IP 주소를 못 찾거나, 인터넷 선이 끊겨있어 아예 연결을 맺지 못함
- ex) 로컬에서 server를 안 켜놓고 프론트엔드에서 fetch를 날렸을 때, CORS 에러가 발생해 브라우저가 강제로 요청을 차단했을 때

// src/components/Fetch.tsx

import { useEffect, useState } from "react";

interface Posts {
  id: number;
  title: string;
  views: number;
}

export default function Fetch() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    setIsLoading(true);
    fetch("http://localhost:3000/posts")
      .then((response) => {
        if (!response.ok) throw new Error("네트워크 통신 오류");
        console.log(response);
        return response.json();
      })
      .then((data) => setPosts(data))
      .catch((e) => {
        console.log(e);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <p>Loading...</p>;

  return (
    <>
      <h3>Fetch</h3>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </>
  );
}

상황 A: 정상 작동

setIsLoading(true) --> 화면에 Loading... 출력
fetch 성공 --> response.ok가 true이므로 if문 통과
.json() 포장 뜯기 성공 --> setPosts(data)로 데이터 저장
.finally() 발동 --> setIsLoading(false)
화면에 정상적인 포스트 리스트 출력

상황 B: API 주소가 오타났을 때 (404 에러)

setIsLoading(true) --> 화면에 Loading... 출력
서버 컴퓨터엔 갔는데 주소가 존재 X --> response.ok가 false가 됨
throw new Error(...) 실행 --> 강제 에러
.then()은 패스, .catch()로 이동
.catch((e) => { ... }) 내부가 실행되면서 콘솔창에 에러 기록
.finally()는 무조건 실행되므로 setIsLoading(false)
화면 로딩은 멈추고 빈 리스트 출력

상황 C: json-server를 아예 안 켰을 때 (failed Network 에러)

setIsLoading(true) --> 화면에 Loading... 출력
서버 컴퓨터를 못 찾아서 fetch가 시작하자마자 에러
.then()은 패스, .catch()로 이동
.catch((e) => { ... }) 내부가 실행되면서 콘솔창에 에러 기록
.finally()는 무조건 실행되므로 setIsLoading(false)

--> error 상태를 정의하여 관리

// src/components/Fetch.tsx

import { useEffect, useState } from "react";

interface Posts {
  id: number;
  title: string;
  views: number;
}

export default function Fetch() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    setIsLoading(true);
    setError(""); // 빈 문자열
    fetch("http://localhost:3000/posts")
      .then((response) => {
        if (!response.ok) throw new Error("네트워크 통신 오류");
        console.log(response);
        return response.json();
      })
      .then((data) => setPosts(data))
      .catch((e) => { // 에러가 발생했을 때 
        console.log(e);
        setError(e instanceof Error ? e.message : "unknown error"); 
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, []);

  if (isLoading) return <p>Loading...</p>;

  if (error) return <p>Error: {error}</p> // 에러 출력

  return (
    <>
      <h3>Fetch</h3>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </>
  );
}

* 리액트에서 데이터 통신을 할 때는 최소 3개의 상태가 필요

실제 요청한 데이터를 저장할 상태
로딩을 제어할 상태
에러를 제어할 상태

fetch - 4 (signal)

AbortController : 웹 브라우저가 제공하는 내장 API로, 하나 이상의 웹 요청을 원하는 시점에 강제로 중단(Abort)할 수 있는 역할

Signal : controller와 fetch 요청을 연결해줌

작동 메커니즘

new AbortController()를 통해 인스턴스 객체 생성 (signal 세트)
fetch() 매개변수에 signal을 넘겨주어, 해당 요청이 controller의 명령을 받도록 연결
원하는 시점에 controller.abort() 메소드를 호출하면, 연결되어 있던 fetch 요청이 즉시 취소됨

// src/components/Fetch.tsx

import { useEffect, useState } from "react";

interface Posts {
  id: number;
  title: string;
  views: number;
}

export default function Fetch() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {

    const controller = new AbortController(); // Abort 객체 

    setIsLoading(true);
    setError(""); 
    fetch("http://localhost:3000/posts", {signal: controller.signal}) // signal 넘겨주기
      .then((response) => {
        if (!response.ok) throw new Error("네트워크 통신 오류");
        console.log(response);
        return response.json();
      })
      .then((data) => setPosts(data))
      .catch((e) => { 
        console.log(e);
        if (e instanceof Error && e.name !== "AbortError") setError(e.message);
      })
      .finally(() => {
        if (!controller.signal.aborted) setIsLoading(false);
      });

      return () => controller.abort(); // 취소

  }, []);

  if (isLoading) return <p>Loading...</p>;

  if (error) return <p>Error: {error}</p> 

  return (
    <>
      <h3>Fetch</h3>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </>
  );
}

fetch - 5 (async)

useEffect 훅 자체를 async로 지정 불가능

--> use Effect 내부에서 async 함수를 새롭게 정의한 뒤 바로 실행시키기 가능

async/await 방식

동기식 코드
try-catch 문 사용

// src/components/Fetch.tsx

import { useEffect, useState } from "react";
interface Posts {
  id: number;
  title: string;
  views: number;
}
export default function Fetch() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    const controller = new AbortController();

    const fetchPosts = async () => {
      // 데이터 통신이 일어나기 전에 실행돼야 함 
      setIsLoading(true);
      setError("");

      // try-catch 문
      try {
        const response = await fetch("http://localhost:3000/posts", {
          signal: controller.signal,
        });
        if (!response.ok) throw new Error("네트워크 통신 오류");
        const data = await response.json();
        setPosts(data);
      } catch (e) {
        if (e instanceof Error && e.name !== "AbortError") setError(e.message);
      } finally {
        if (!controller.signal.aborted) setIsLoading(false);
      }
    };

    fetchPosts();

    return () => controller.abort();
  }, []);

  if (error) return <p>Error: {error}</p>;

  return (
    <>
      <h3>Fetch</h3>
      <ul>
        {isLoading ? (
          <p>Loading... </p>
        ) : (
          posts.map((post) => <li key={post.id}>{post.title}</li>)
        )}
      </ul>
    </>
  );
}

fetch - crud

POST/PUT/PATCH처럼 가공할 데이터가 있을 때에는 headers, body 필요

headers
- body 안에 보낼 데이터의 형식을 알림
- "Content-Type": "application/json" : JSON 텍스트 양식임을 명시
body
- 자바스크립트 객체를 서버가 읽을 수 있는 문자열, JSON으로 변환해서 주입
- ㄴ JSON.stringify({ ... })

// src/components/FetchCrud.tsx

export default function FetchCrud () {

  const fetchGet = async() => {
    const response = await fetch("http://localhost:3000/posts");
    const data = await response.json();
    console.log(data);
  };

  const fetchPost = async() => {
    const response = await fetch("http://localhost:3000/posts", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        title: "a new title",
        views: 155
      }),
    });

    const data = await response.json();

    console.log(data);
  };

  const fetchPut = async() => {
    const response = await fetch("http://localhost:3000/posts/1", {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        title: "a modify title",
        views: 155
      }),
    });

    const data = await response.json();

    console.log(data);
  };

  const fetchPatch = async() => {
    const response = await fetch("http://localhost:3000/posts/1", {
      method: "PATCH",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        title: "a patch title",
        views: 155
      }),
    });

    const data = await response.json();

    console.log(data);
  };

  const fetchDelete = async() => {
    // 돌려받을 내용물이 없기 때문에 const data = await response.json() 생략
   
    await fetch("http://localhost:3000/posts/101", {
      method: "DELETE"
    });
  };

  return (
    <>
      <button onClick={fetchGet}>GET</button>
      <button onClick={fetchPost}>POST</button>
      <button onClick={fetchPut}>PUT</button>
      <button onClick={fetchPatch}>PATCH</button>
      <button onClick={fetchDelete}>DELETE</button>
    </>
  );
}

fetch - axios

npm install axios 명령어를 사용하여 다운로드

Fetch 대비 장점

자동 변환
- 응답 스트림을 객체로 변환하는 .json() 과정이 생략
- 서버가 돌려준 데이터는 항상 response.data 안에 객체 형태로 자동 바인딩
자동 직렬화
- POST/PUT 요청 시 JSON.stringify() 가공이나 헤더(Content-Type) 지정을 생략하고, 순수 자바스크립트 객체를 바디에 곧바로 담아 전송 가능
직관적인 에러 핸들링
- fetch와 달리 404, 500 발생 시 별도의 if (!response.ok) 검증 없이도 자동으로 catch 구역으로 예외를 던져줌

// src/components/AxiosCrud.tsx

import axios from "axios";

export default function AxiosCrud() {
  const fetchGet = async () => {
    const { data } = await axios.get("http://localhost:3000/posts");
    console.log(data);
  };
  
  const fetchPost = async () => {
    const { data } = await axios.post("http://localhost:3000/posts", {
      title: "a axios data",
      views: 50,
    });
    console.log(data);
  };
  
  const fetchPut = async () => {
    const { data } = await axios.put("http://localhost:3000/posts/101", {
      title: "a axios modify data",
      view: 500,
    });
    console.log(data);
  };
  
  const fetchPatch = async () => {
    const { data } = await axios.patch("http://localhost:3000/posts/101", {
      title: "a axios modify data",
      view: 500,
    });
    console.log(data);
  };
  
  const fetchDelete = async () => {
    const { data, status } = await axios.delete(
      "http://localhost:3000/posts/101",
    );
    console.log(data, status);
  };
  
  return (
    <>
      <button onClick={fetchGet}>GET</button>
      <button onClick={fetchPost}>POST</button>
      <button onClick={fetchPut}>PUT</button>
      <button onClick={fetchPatch}>PATCH</button>
      <button onClick={fetchDelete}>DELETE</button>
    </>
  );
}

axios - total

// src/components/Axios.tsx

import { useEffect, useState } from "react";
import axios from "axios";

interface Posts {
  id: number;
  title: string;
  views: number;
}
export default function Axios() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    const controller = new AbortController();
    const axiosPosts = async () => {
      setIsLoading(true);
      setError("");
      try {
        const { data } = await axios.get("http://localhost:3000/posts", {
          signal: controller.signal,
        });
        setPosts(data);

      } catch (e) {
        if (e instanceof Error && e.name !== "CanceledError") setError(e.message);
      } finally {
        if (!controller.signal.aborted) setIsLoading(false);
      }
    };

    axiosPosts();

    return () => controller.abort();
  }, []);

  if (error) return <p>Error: {error}</p>;

  return (
    <>
      <h3>Axios</h3>
      <ul>
        {isLoading ? (
          <p>Loading... </p>
        ) : (
          posts.map((post) => <li key={post.id}>{post.title}</li>)
        )}
      </ul>
    </>
  );
}

axios - instance

axios.create() 메소드를 활용하여 인스턴스 객체를 간편하게 생성 가능

ㄴ 공통으로 사용할 baseURL, timeout, headers 등의 설정을 미리 주입

// src/api/axios.ts

import axios from "axios";

// axios 인스턴스 객체 생성
export const axiosInstance = axios.create({
  baseURL: "http://localhost:3000",
  timeout: 5000, // 5s
  headers: { // 생략 가능
    "Content-Type": "application/json",
  },
});

// src/components/Axios.tsx

import { useEffect, useState } from "react";
import { axiosInstance } from "../api/axios";

interface Posts {
  id: number;
  title: string;
  views: number;
}
export default function Axios() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    const controller = new AbortController();
    const axiosPosts = async () => {
      setIsLoading(true);
      setError("");
      try {
        // axios --> axiosInstance
        const { data } = await axiosInstance.get("/posts", {
          signal: controller.signal,
        });
        setPosts(data);

      } catch (e) {
        if (e instanceof Error && e.name !== "CanceledError") setError(e.message);
      } finally {
        if (!controller.signal.aborted) setIsLoading(false);
      }
    };

    axiosPosts();

    return () => controller.abort();
  }, []);

  if (error) return <p>Error: {error}</p>;

  return (
    <>
      <h3>Axios</h3>
      <ul>
        {isLoading ? (
          <p>Loading... </p>
        ) : (
          posts.map((post) => <li key={post.id}>{post.title}</li>)
        )}
      </ul>
    </>
  );
}

Post Browser 소개

스켈레톤 UI : 데이터가 로딩 중일 때, 멈춰있는 듯한 회전 스피너 대신 실제 콘텐츠가 그려질 레이아웃의 뼈대를 회색 음영이나 애니메이션으로 먼저 보여주는 패턴

Post Browser 데이터 렌더링

axios 인스턴스 객체 생성

// src/api/axios.ts

import axios from "axios";

export const axiosInstance = axios.create({
  baseURL: "http://localhost:3000",
  timeout: 5000,
  headers: {
    "Content-Type": "application/json"
  }
});

Posts 타입 정의

// src/types/post.d.ts

interface Posts {
  id: number;
  title: string;
  views: number;
}

PostList.tsx 수정 - 데이터가 있을 때

// src/components/PostList.tsx

import { useEffect, useState } from "react";
import PostCard from "./PostCard";
import { axiosInstance } from "../api/axios";
import LoadingState from "./LoadingState";
import ErrorState from "./ErrorState";

export default function PostList() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        setIsLoading(true);
        const { data } = await axiosInstance.get("/posts");
        setPosts(data);
      } catch (e) {
        setError(e instanceof Error ? e.message : "unknown error");
      } finally {
        setIsLoading(false);
      }
    };
    fetchPosts();
  }, []);

  return (
    <div className="mb-8">
      {/* 데이터가 없을 때 */}
      {/* <NoData /> */}
      {/* 로딩 중일 때 */}
      {/* <LoadingState /> */}
      {/* 에러가 발생했을 때 */}
      {/* <ErrorState /> */}

      {/* 데이터가 있을 때 */}
      {isLoading ? (
        <LoadingState />
      ) : error ? (
        <ErrorState />
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {posts.map((post) => <PostCard key={post.id} {...post} />)}
        </div>
      )}
    </div>
  );
}

PostCard.tsx 수정

// src/components/PostCard.tsx

import { Eye } from "lucide-react";

export default function PostCard({id, title, views}: Posts) {
  return (
    <div className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden border border-gray-100">
      <div className="h-2 bg-gradient-to-r from-indigo-500 to-teal-500"></div>
      <div className="p-6">
        <div className="flex justify-between items-start mb-4">
          <h2 className="text-lg font-semibold text-gray-900 truncate">
            {title}
          </h2>
          <div className="flex items-center text-gray-500 font-medium text-sm">
            <Eye className="h-4 w-4 mr-1" />
            <span>{views}</span>
          </div>
        </div>

        <div className="mt-4 flex justify-between items-center">
          <span className="text-xs font-medium px-2.5 py-0.5 rounded-full bg-indigo-50 text-indigo-700">
            ID: {id}
          </span>
        </div>
      </div>
    </div>
  );
}

Post Browser 페이징

Zunstand + Immer 페이징 스토어

// src/store/postStore.ts

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";

interface PostStore {
  currentPage: number;
  limit: number;
  getTotalPages: () => number;
  setCurrentPages: (page: number) => void;
  setLimit: (amount: number) => void;
}

export const usePostStore = create<PostStore>()(
  immer((set, get) => ({
    currentPage: 1,
    limit: 10,
    getTotalPages: () => Math.ceil(100 / get().limit),
    setCurrentPages: (page: number) => set((state) => {
      state.currentPage = page;
    }),
    setLimit: (amount: number) => set((state) => {
      state.limit = amount;
    })
  })),
);

Pagination.tsx 수정

// src/components/Pagination.tsx

import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
} from "lucide-react";
import { usePostStore } from "../store/postStore";
import { twMerge } from "tailwind-merge";

export default function Pagination() {
  const currentPage = usePostStore((state) => state.currentPage);
  const totalPages = usePostStore((state) => state.getTotalPages());
  const setCurrentPages = usePostStore((state) => state.setCurrentPages);

  const getPageNumbers = () => {
    const pageNumbers = [];
    const maxPagesToShow = 5;

    if (totalPages < maxPagesToShow) {
      for (let i = 1; i <= totalPages; i++) {
        pageNumbers.push(i);
      }
    } else {
      let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
      let endPage = startPage + maxPagesToShow - 1;

      if (endPage > totalPages) {
        endPage = totalPages;
        startPage = Math.max(1, endPage - maxPagesToShow + 1);
      }

      for (let i = startPage; i <= endPage; i++) {
        pageNumbers.push(i);
      }
    }
    return pageNumbers;
  };

  const pageNumbers = getPageNumbers();
  console.log(currentPage, totalPages, pageNumbers);

  return (
    <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6 rounded-lg shadow-sm">
      <div className="flex flex-1 justify-between sm:hidden">
        {/* 현재 페이지가 1페이지면 : text-gray-300 cursor-not-allowed  */}
        {/* 그게 아니라면(기본값): text-gray-700 hover:bg-gray-50 */}
        <button
          className={twMerge(
            `relative inline-flex items-center rounded-md px-4 py-2 text-sm font-medium`,
            currentPage === 1
              ? "text-gray-300 cursor-not-allowed"
              : "text-gray-700 hover:bg-gray-50",
          )}
          onClick={() => setCurrentPages(Math.max(1, currentPage - 1))}
        >
          Previous
        </button>
        {/* page === totalPage -> text-gray-300 cursor-not-allowed */}
        {/* text-gray-700 hover:bg-gray-50 */}
        <button
          className={twMerge(
            `relative ml-3 inline-flex items-center rounded-md px-4 py-2 text-sm font-medium`,
            currentPage === totalPages
              ? "text-gray-300 cursor-not-allowed"
              : "text-gray-700 hover:bg-gray-50",
          )}
          onClick={() => setCurrentPages(Math.min(currentPage + 1, totalPages))}
        >
          Next
        </button>
      </div>

      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
        <div>
          <p className="text-sm text-gray-700">
            Showing page <span className="font-medium">1</span> of{" "}
            <span className="font-medium">1</span> pages
          </p>
        </div>

        <div>
          <nav
            className="isolate inline-flex -space-x-px rounded-md shadow-sm"
            aria-label="Pagination"
          >
            {/* 클릭하면 1 페이지로 */}
            {/* page === 1 -> cursor-not-allowed */}
            {/* hover:bg-gray-50 */}
            <button
              className={twMerge(
                `relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0`,
                currentPage === 1 ? "cursor-not-allowed" : "hover:bg-gray-50",
              )}
              onClick={() => setCurrentPages(1)}
            >
              <span className="sr-only">First page</span>
              <ChevronsLeft className="h-5 w-5" aria-hidden="true" />
            </button>

            {/* 클릭하면 1페이지 감소 */}
            {/* page === 1 -> cursor-not-allowed */}
            {/* hover:bg-gray-50 */}
            <button
              className={twMerge(
                `relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0`,
                currentPage === 1 ? "cursor-not-allowed" : "hover:bg-gray-50",
              )}
              onClick={() => setCurrentPages(Math.max(1, currentPage - 1))}
            >
              <span className="sr-only">Previous</span>
              <ChevronLeft className="h-5 w-5" aria-hidden="true" />
            </button>

            {/* 현재 페이지는 z-10 bg-indigo-600 text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 */}
            {/* 그게아니라면(기본값) text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 */}
            {pageNumbers.map((page) => (
              <button
                key={page}
                className={twMerge(
                  `relative inline-flex items-center px-4 py-2 text-sm font-semibold`,
                  currentPage === page
                    ? "z-10 bg-indigo-600 text-white focus:z-20 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                    : "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0",
                )}
                onClick={() => setCurrentPages(page)}
              >
                {page}
              </button>
            ))}

            {/* 클릭하면 맨 1페이지 증가 */}
            {/* 현재 페이지가 총 페이지랑 같으면 : cursor-not-allowed */}
            {/* 그게 아니라면(기본값): hover:bg-gray-50 */}
            <button
              className={twMerge(
                `relative inline-flex items-center px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0 hover:bg-gray-50`,

                currentPage === totalPages
                  ? "cursor-not-allowed"
                  : "hover:bg-gray-50",
              )}
              onClick={() => setCurrentPages(Math.min(currentPage + 1, totalPages))}
            >
              <span className="sr-only">Next</span>
              <ChevronRight className="h-5 w-5" aria-hidden="true" />
            </button>

            {/* 클릭하면 맨 마지막 페이지로 */}
            {/* 현재 페이지가 총 페이지랑 같으면 : cursor-not-allowed */}
            {/* 그게 아니라면(기본값): hover:bg-gray-50 */}
            <button
              className={twMerge(
                `relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0 hover:bg-gray-50`,
                currentPage === totalPages
                  ? "cursor-not-allowed"
                  : "hover:bg-gray-50",
              )}
              onClick={() => setCurrentPages(totalPages)}
            >
              <span className="sr-only">Last page</span>
              <ChevronsRight className="h-5 w-5" aria-hidden="true" />
            </button>
          </nav>
        </div>
      </div>
    </div>
  );
}

PostHeader.tsx 수정

// src/components/PostHeader.tsx

import { LayoutGrid, Search } from "lucide-react";
import { usePostStore } from "../store/postStore";

export default function PostHeader() {
  const setLimit = usePostStore((state) => state.setLimit);
  const setCurrentPages = usePostStore((state) => state.setCurrentPages);

  return (
    <div className="mb-8 space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">
          <span className="inline-flex items-center gap-2">
            <LayoutGrid className="h-6 w-6 text-indigo-600" />
            <span>Posts Browser</span>
          </span>
        </h1>

        <div className="flex items-center gap-2">
          <label
            htmlFor="pageSize"
            className="text-sm font-medium text-gray-700"
          >
            Show:
          </label>
          <select
            id="pageSize"
            className="block w-20 rounded-md border-gray-300 py-1.5 px-3 bg-white text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm"
            onChange={(e) => {
              setCurrentPages(1);
              setLimit(Number(e.target.value));
            }}
            defaultValue={10}
          >
            <option value={5}>5</option>
            <option value={10}>10</option>
            <option value={20}>20</option>
            <option value={50}>50</option>
          </select>
        </div>
      </div>

      <div className="relative rounded-md shadow-sm  w-full">
        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 w-full">
          <Search className="h-5 w-5 text-gray-400" aria-hidden="true" />
        </div>
        <input
          type="text"
          placeholder="Search posts by title..."
          className="block w-full rounded-md border-0 py-3 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm"
        />
      </div>
    </div>
  );
}

Post Browser 검색

검색을 위한 변수 추가 선언

// src/store/postStore.ts

import { create } from "zustand";
import { immer } from "zustand/middleware/immer";

interface PostStore {
  currentPage: number;
  limit: number;
  term: string;
  getTotalPages: () => number;
  setCurrentPages: (page: number) => void;
  setLimit: (amount: number) => void;
  setTerm: (text: string) => void;
}

export const usePostStore = create<PostStore>()(
  immer((set, get) => ({
    currentPage: 1,
    limit: 10,
    term: "", // 검색을 위한 변수 선언 
    getTotalPages: () => Math.ceil(100 / get().limit),
    setCurrentPages: (page: number) => set((state) => {
      state.currentPage = page;
    }),
    setLimit: (amount: number) => set((state) => {
      state.limit = amount;
    }),
    setTerm: (text: string) => set((state) => {
      state.term = text;
    })
  })),
);

PostHeader.tsx 수정 - 검색 기능

// src/components/PostHeader.tsx

import { LayoutGrid, Search } from "lucide-react";
import { usePostStore } from "../store/postStore";
import { useEffect, useState } from "react";

export default function PostHeader() {
  const setLimit = usePostStore((state) => state.setLimit);
  const setCurrentPages = usePostStore((state) => state.setCurrentPages);
  const setTerm = usePostStore((state) => state.setTerm);

  // 디바운스 기법 활용 
  const [input, setInput] = useState("");
  useEffect(() => {
    const timer = setTimeout(() => {
      setCurrentPages(1);
      setTerm(input);
    }, 1000);

    return () => clearTimeout(timer);
  }, [input, setTerm]);

  return (
    <div className="mb-8 space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">
          <span className="inline-flex items-center gap-2">
            <LayoutGrid className="h-6 w-6 text-indigo-600" />
            <span>Posts Browser</span>
          </span>
        </h1>

        <div className="flex items-center gap-2">
          <label
            htmlFor="pageSize"
            className="text-sm font-medium text-gray-700"
          >
            Show:
          </label>
          <select
            id="pageSize"
            className="block w-20 rounded-md border-gray-300 py-1.5 px-3 bg-white text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm"
            onChange={(e) => {
              setCurrentPages(1);
              setLimit(Number(e.target.value));
            }}
            defaultValue={10}
          >
            <option value={5}>5</option>
            <option value={10}>10</option>
            <option value={20}>20</option>
            <option value={50}>50</option>
          </select>
        </div>
      </div>

      <div className="relative rounded-md shadow-sm  w-full">
        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 w-full">
          <Search className="h-5 w-5 text-gray-400" aria-hidden="true" />
        </div>
        <input
          type="text"
          placeholder="Search posts by title..."
          className="block w-full rounded-md border-0 py-3 pl-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm"
          onChange={(e) => setInput(e.target.value)}
        />
      </div>
    </div>
  );
}

PostList.tsx 수정 - 데이터가 없을 때

// src/components/PostList.tsx

import { useEffect, useState } from "react";
import PostCard from "./PostCard";
import { axiosInstance } from "../api/axios";
import LoadingState from "./LoadingState";
import ErrorState from "./ErrorState";
import { usePostStore } from "../store/postStore";
import NoData from "./NoData";

export default function PostList() {
  const [posts, setPosts] = useState<Posts[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");

  // 사용자가 입력한 검색어 
  const term = usePostStore((state) => state.term); 

  const currentPage = usePostStore((state) => state.currentPage);
  const limit = usePostStore((state) => state.limit);

  useEffect(() => {
    const controller = new AbortController();

    const fetchPosts = async () => {
      try {
        setIsLoading(true);
        const { data } = await axiosInstance.get(
          `/posts?_page=${currentPage}&_limit=${limit}&q=${encodeURIComponent(term)}`, { signal: controller.signal }
        );
        setPosts(data);
      } catch (e) {
        if (e instanceof Error && e.name !== "CanceledError") setError(e.message);
      } finally {
        if (!controller.signal.aborted) setIsLoading(false);
      }
    };
    fetchPosts();

    return () => controller.abort();
  }, [currentPage, limit, term]); // 의존성 배열에 term 추가 

  return (
    <div className="mb-8">
      {/* 데이터가 없을 때 */}
      {/* <NoData /> */}
      {/* 로딩 중일 때 */}
      {/* <LoadingState /> */}
      {/* 에러가 발생했을 때 */}
      {/* <ErrorState /> */}

      {/* 데이터가 있을 때 */}
      {isLoading ? (
        <LoadingState />
      ) : error ? (
        <ErrorState />
      ) : (
        posts.length > 0 ? <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {posts.map((post) => (
            <PostCard key={post.id} {...post} />
          ))}
        </div> : <NoData />
      )}
    </div>
  );
}

디바운스(Debounce) : 웹 개발에서 자주 발생하는 이벤트(키보드 타이핑, 스크롤, 마우스 움직임 등)가 연속해서 게릴라성으로 터질 때, 이를 매번 처리하지 않고 가장 마지막에 터진 이벤트만 딱 한 번 실행하도록 통제하는 기법

ㄴ 새로운 이벤트가 유입될 때마다 기존 setTimeout 타이머를 초기화(clearTimeout)하고 새 타이머를 설정하는 매커니즘

섹션 13. 전역 상태 관리 - Context API

favor — Tue, 9 Jun 2026 02:27:05 +0900

전역 상태 관리가 필요한 이유

CounOutside, CountDisplay, CountButton에서 사용할 상태를 정의

ㄴ 공통 부모 컴포넌트인 App 컴포넌트 내부에 정의

Count, CountGroup 컴포넌트는 상태값을 사용하지 않지만 props를 받아서 하위 컴포넌트로 전달해야 함

ㄴ props drilling

props drilling 해결 방법

Context API
Redux ToolKit
Zustand

Context API

먼저 Context 객체를 생성한 후에 해당 객체를 통해 데이터의 공유 범위와 공유할 데이터를 설정

--> Context 객체의 공유 범위에 포함된 다른 컴포넌트들은 공유하는 데이터를 가져와서 사용할 수 있음

Context 객체를 받을 변수는 대문자로 시작

ㄴ 컴포넌트처럼 사용할 것이기 때문

기존 App.tsx 코드

// App.tsx

import { createContext, useState } from "react";
import Count from "./components/Count";
import CountOutside from "./components/CountOutside";

export default function App() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
    console.log(count);
  };

  const decrement = () => {
    setCount((prevCount) => prevCount - 1);
  };
  const reset = () => {
    setCount(0);
  };

  return (
    <>
      <Count
        count={count}
        increment={increment}
        decrement={decrement}
        reset={reset}
      />
      <CountOutside count={count} />
    </>
  );
}

변경 App.tsx 코드

// App.tsx

import { createContext, useState } from "react";
import Count from "./components/Count";
import CountOutside from "./components/CountOutside";

type CounterContextType = {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}
export const CounterContext = createContext<CounterContextType | null>(null);

export default function App() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
    console.log(count);
  };

  const decrement = () => {
    setCount((prevCount) => prevCount - 1);
  };
  const reset = () => {
    setCount(0);
  };

  return (
    <>
      <CounterContext value={{ count, increment, decrement, reset }}>
        <Count
          count={count}
          increment={increment}
          decrement={decrement}
          reset={reset}
        />
        <CountOutside count={count} />
      </CounterContext>
    </>
  );
}

^ CounterContext 내부의 value에는 공유할 변수들을 객체 형태로 전달

기존 CountOutside.tsx

// CountOutside.tsx

export default function CountOutside({ count }: { count: number }) {
  return (
    <>
      <h1>CountOutside: {count}</h1>
    </>
  );
}

변경 CountOutside.tsx

// CountOutside.tsx

import { useContext } from "react";
import { CounterContext } from "../App";

export default function CountOutside() {

  const { count } = useContext(CounterContext)!;

  return (
    <>
      <h1>CountOutside: {count}</h1>
    </>
  );
}

^ CounterContext는 CounterContextType or null 타입 --> null이 아님을 명시해주기 위해 ! 붙이기

기존 CountDisplay.tsx 코드

// CountDisplay.tsx

export default function CountDisplay({
  count,
}: {
  count: number;
}) {
  return (
    <>
      <h1>Count: {count}</h1>
    </>
  );
}

변경 CountDisplay.tsx 코드

// CountDisplay.tsx

import { useContext } from "react";
import { CounterContext } from "../App";

export default function CountDisplay() {

  const { count } = useContext(CounterContext)!;
  
  return (
    <>
      <h1>Count: {count}</h1>
    </>
  );
}

기존 CountButton.tsx 코드

// CountButton.tsx

export default function CountButton({
  increment,
  decrement,
  reset,
}: {
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}) {
  return (
    <>
      <button onClick={decrement}>감소</button>
      <button onClick={reset}>리셋</button>
      <button onClick={increment}>증가</button>
    </>
  );
}

변경 CountButton.tsx

// CountButton.tsx

import { useContext } from "react";
import { CounterContext } from "../App";

export default function CountButton() {

  const { increment, decrement, reset } = useContext(CounterContext)!;

  return (
    <>
      <button onClick={decrement}>감소</button>
      <button onClick={reset}>리셋</button>
      <button onClick={increment}>증가</button>
    </>
  );
}

Context API 개선

Context는 별도의 파일로 분리해서 작성하는 게 코드의 유지보수 및 가독성 측면에서 좋음

src/context/counter/

CounterContext.ts
- 전역 데이터 슬롯 정의
- 어떤 데이터와 어떤 함수들이 전역으로 공유될지 규격 제한
CounterProvider.tsx
- 상태 격리 및 캡슐화
- 실제로 리액트의 useState 메모리를 할당하고, 비즈니스 로직(데이터를 변경하는 함수들)을 모아둔 역할
useCounter.ts
- 캡슐화 보호 및 데이터 접근 추상화
- 하위 컴포넌트가 Context 내부 데이터에 접근할 때 쓰는 전용 인터페이스(커스텀 훅)이자 예외 처리기

// src/context/counter/CounterContext.ts

import { createContext } from "react";

type CounterContextType = {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
};
export const CounterContext = createContext<CounterContextType | null>(null);

// src/context/counter/CounterProvider.tsx

import { useState } from "react";
import { CounterContext } from "./CounterContext";

export default function CounterProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
    console.log(count);
  };

  const decrement = () => {
    setCount((prevCount) => prevCount - 1);
  };
  const reset = () => {
    setCount(0);
  };

  return (
    <>
      <CounterContext value={{ count, increment, decrement, reset }}>{children}</CounterContext>
    </>
  );
}

// src/context/counter/useCounter.ts

import { useContext } from "react";
import { CounterContext } from "./CounterContext";

export default function useCounter() {
  const context = useContext(CounterContext);

  if (!context) {
    throw new Error("useCounter는 CounterProvider 안에서만 사용 가능합니다"); // null 방지
  } 

  return context;
}

변경 App.tsx 코드

// App.tsx

import Count from "./components/Count";
import CountOutside from "./components/CountOutside";
import CounterProvider from "./context/counter/CounterProvider";

export default function App() {
  return (
    <>
      <CounterProvider>
        <Count />
        <CountOutside />
      </CounterProvider>
    </>
  );
}

^ CounterContext를 호출하는 것이 아닌 CounterProvider를 호출

변경 CountOutside.tsx 코드

// CountOutside.tsx

import useCounter from "../context/counter/useCounter";

export default function CountOutside() {

  const { count } = useCounter();

  return (
    <>
      <h1>CountOutside: {count}</h1>
    </>
  );
}

Context API 리렌더링

불필요한 리렌더링 : 상태 변화와 직접적인 관련이 없거나 화면 인터페이스가 변하지 않는데도 부모 컴포넌트의 영향으로 발생하는 리렌더링

ㄴ React.memo 함수 또는 useCallback 훅을 사용하여 최적화

CounterProvider 내부의 상태값(count)이 변경됨 --> CounterProvider 컴포넌트 자체가 리렌더링 --> value={{ count, increment, ... }} 안의 객체가 매번 새로운 메모리 주소로 다시 생성됨 --> CounterContext를 사용하는 모든 하위 컴포넌트는 새로운 value를 받았다고 판단 --> 전부 강제 리렌더링 --> 숫자(count)를 사용하지 않는 CountButton 컴포넌트까지 렌더링

// src/context/counter/CounterContext.ts

import { createContext } from "react";

type CounterContextType = {
  count: number;
};
type CounterContextActionType = {
  increment: () => void;
  decrement: () => void;
  reset: () => void;
};
export const CounterContext = createContext<CounterContextType | null>(null);
export const CounterContextAction = createContext<CounterContextActionType | null>(null);

// src/context/counter/CounterProvider.tsx

import { useMemo, useState } from "react";
import { CounterContext, CounterContextAction } from "./CounterContext";

export default function CounterProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount((count) => count + 1);
  };
  const decrement = () => {
    setCount((count) => count - 1);
  };
  const reset = () => {
    setCount(0);
  };

  const memoization = useMemo(
    () => ({ count, increment, decrement, reset }),
    [],
  );

  return (
    <>
      <CounterContextAction value={memoization}>
        <CounterContext value={{ count }}>{children}</CounterContext>
      </CounterContextAction>
    </>
  );
}

^ useMemo 훅을 사용하여 메모이제이션

// src/context/counter/useCounter.ts

import { useContext } from "react";
import { CounterContext, CounterContextAction } from "./CounterContext";

export function useCounter() {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error("useCounter는 CounterProvider 안에서만 사용가능합니다.");
  }
  return context;
}

export function useCounterAction() {
  const context = useContext(CounterContextAction);
  if (!context) {
    throw new Error("useCounter는 CounterProvider 안에서만 사용가능합니다.");
  }
  return context;
}

Context API reducer

// src/reducer/counterReducer.ts

export default function counterReducer(
  count: number,
  action: { type: string },
) {
  switch (action.type) {
    case "INCREMENT":
      return count + 1;
    case "DECREMENT":
      return count - 1;
    case "RESET":
      return 0;
    default:
      return count;
  }
}

// src/context/counter/CounterContext.ts

import { createContext } from "react";

type CounterContextType = {
  count: number;
};
type CounterContextActionType = React.ActionDispatch<[action: { type: string }]>;

export const CounterContext = createContext<CounterContextType | null>(null);
export const CounterContextAction =
  createContext<CounterContextActionType | null>(null);

// src/context/counter/CounterProvider.tsx

import { useReducer } from "react";
import { CounterContext, CounterContextAction } from "./CounterContext";
import counterReducer from "../../reducer/counterReducer";

export default function CounterProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [count, countDispatch] = useReducer(counterReducer, 0);
  
  return (
    <>
      <CounterContextAction value={ countDispatch }>
        <CounterContext value={{ count }}>{ children }</CounterContext>
      </CounterContextAction>
    </>
  );
}

// src/context/counter/useCounter.ts

import { useContext } from "react";
import { CounterContext, CounterContextAction } from "./CounterContext";

export function useCounter() {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error("useCounter는 CounterProvider 안에서만 사용가능합니다.");
  }
  return context;
}

export function useCounterAction() {
  const context = useContext(CounterContextAction);
  if (!context) {
    throw new Error("useCounter는 CounterProvider 안에서만 사용가능합니다.");
  }
  return context;
}

// CountButtont.sx

import { useCounterAction } from "../context/counter/useCounter";

export default function CountButton() {
  console.log("CountButton");
  const countDispatch = useCounterAction();
  return (
    <>
      <button onClick={() => countDispatch({ type: "DECREMENT" })}>감소</button>
      <button onClick={() => countDispatch({ type: "RESET" })}>리셋</button>
      <button onClick={() => countDispatch({ type: "INCREMENT" })}>증가</button>
    </>
  );
}

Context API 2개 적용해보기

// src/context/theme/ThemeContext.ts

import { createContext } from "react";

type ThemeContextType = {
  theme: string;
};

type ThemeContextActionType = {
  changeTheme: () => void;
};

export const ThemeContext = createContext<ThemeContextType | null>(null);
export const ThemeContextAction = createContext<ThemeContextActionType | null>(null);

// src/context/theme/ThemeProvider.tsx

import React, { useMemo, useState } from "react";
import { ThemeContext, ThemeContextAction } from "./ThemeContext";

export default function ThemeProvider({
  children,
}: {
  children: React.ReactNode;
}) {

  const [theme, setTheme] = useState("light");
  const changeTheme = () => {
    setTheme((prevTheme) => prevTheme === "light" ? "dark" : "light");
  }
  const memoization = useMemo(() => ({ changeTheme }), []);

  return (
    <>
      <ThemeContextAction value={ memoization }>
        <ThemeContext value={{ theme }} >{children}</ThemeContext>
      </ThemeContextAction>
    </>
  );
}

// src/context/theme/useTheme.ts

import { useContext } from "react";
import { ThemeContext, ThemeContextAction } from "./ThemeContext";

export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme는 ThemeProvider 안에서만 사용가능합니다.");
  }
  return context;
}

export function useThemeAction() {
  const context = useContext(ThemeContextAction);
  if (!context) {
    throw new Error("useTheme는 ThemeProvider 안에서만 사용가능합니다.");
  }
  return context;
}

// Theme.tsx

import { useTheme } from "../context/theme/useTheme";

export default function Theme () {

  const { theme } = useTheme();

  return (
    <>
      <h1>Theme: { theme }</h1>
    </>
  );
}

// ThemeButton.tsx

import { useThemeAction } from "../context/theme/useTheme";

export default function ThemeButton() {
  const { changeTheme } = useThemeAction();

  return (
    <>
      <button onClick={changeTheme}>테마 변경</button>
    </>
  );
}

// App.tsx

import Count from "./components/Count";
import CountOutside from "./components/CountOutside";
import Theme from "./components/Theme";
import ThemeButton from "./components/ThemeButton";
import CounterProvider from "./context/counter/CounterProvider";
import ThemeProvider from "./context/theme/ThemeProvider";

export default function App() {
  return (
    <>
      <ThemeProvider>
        <CounterProvider>
          <Count />
          <CountOutside />
          <Theme />
          <ThemeButton />
        </CounterProvider>
      </ThemeProvider>
    </>
  );
}

UserProfile 컨텍스트 객체 만들기

1. 애플리케이션에서 사용할 타입 정의

ㄴ src/types/

// src/types/settings.d.ts

interface UserPreferences { // 서비스 안에서 다루는 데이터의 규격만 정의 == 데이터 모델 
  language: "ko" | "en" | "ja";
  fontSize: "small" | "medium" | "large";
  notifications: {
    email: boolean;
    push: boolean;
    desktop: boolean;
  };
  colorScheme: "system" | "light" | "dark";
}

// 설정을 전역에 공유하기 위함 
interface PreferencesContextType { // 상태(State) 공유용 컨텍스트 타입
  preferences: UserPreferences;
}

interface PreferencesContextActionType { // 기능(Action) 공유용 컨텍스트 타입 
  updateLanguage: (language: UserPreferences["language"]) => void;
  updateFontSize: (size: UserPreferences["fontSize"]) => void;
  updateNotifications: (
    key: keyof UserPreferences["notifications"],
    value: boolean,
  ) => void;
  updateColorScheme: (scheme: UserPreferences["colorScheme"]) => void;
}

2. 컨텍스트 객체, 프로바이더 컴포넌트, 커스텀 훅 생성

// src/context/setting/SettingContext.ts

import { createContext } from "react";

export const SettingContext = createContext<PreferencesContextType | null>(
  null,
);

export const SettingContextAction =
  createContext<PreferencesContextActionType | null>(null);

// src/context/setting/SettingProvider.tsx

import React, { useMemo, useState } from "react";
import { SettingContext, SettingContextAction } from "./SettingContext";

const defaultValue: UserPreferences = {
  language: "ko",
  fontSize: "medium",
  notifications: {
    email: false,
    push: false,
    desktop: false,
  },
  colorScheme: "system",
};

export default function SettingProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [preferences, setPreferences] = useState<UserPreferences>(defaultValue);

  const updateLanguage = (language: UserPreferences["language"]) => {
    setPreferences((prevPreferences) => ({ ...prevPreferences, language }));
  };

  const updateFontSize = (fontSize: UserPreferences["fontSize"]) => {
    setPreferences((prevPreferences) => ({ ...prevPreferences, fontSize }));
  };

  const updateNotifications = (
    key: keyof UserPreferences["notifications"],
    value: boolean,
  ) => {
    setPreferences((prevPreferences) => ({
      ...prevPreferences,
      notifications: { ...prevPreferences.notifications, [key]: value },
    }));
  };

  const updateColorScheme = (colorScheme: UserPreferences["colorScheme"]) => {
    setPreferences((prevPreferences) => ({ ...prevPreferences, colorScheme }));
  };

  const memoization = useMemo(
    () => ({
      updateLanguage,
      updateFontSize,
      updateNotifications,
      updateColorScheme,
    }),
    [],
  );

  return (
    <>
      <SettingContextAction value={memoization}>
        <SettingContext value={{ preferences }}>{children}</SettingContext>
      </SettingContextAction>
    </>
  );
}

// src/context/setting/useSetting.ts

import { useContext } from "react";
import { SettingContext, SettingContextAction } from "./SettingContext";

export function useSetting() {
  const context = useContext(SettingContext);
  if (!context) {
    throw new Error(
      "useSetting은 SettingProvider 내부에서만 사용할 수 있습니다.",
    );
  }

  return context;
}

export function useSettingAction() {
  const context = useContext(SettingContextAction);
  if (!context) {
    throw new Error(
      "useSettingAction은 SettingProvider 내부에서만 사용할 수 있습니다.",
    );
  }

  return context;
}

UserProfile 글자 크기

// src/components/FontSizeSetting.tsx

import { Type } from "lucide-react";
import { useSetting, useSettingAction } from "../context/setting/useSetting";
import { twMerge } from "tailwind-merge";

export default function FontSizeSetting() {
  const { preferences } = useSetting();
  const { updateFontSize } = useSettingAction();

  return (
    <>
      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
        <div className="flex items-center gap-3 mb-4">
          <Type className="text-blue-500" size={24} />
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
            글자 크기
          </h2>
        </div>
        <div className="grid grid-cols-3 gap-3">
          {(["small", "medium", "large"] as const).map((size) => (
            <button
              key={size}
              className={twMerge(
                "px-4 py-2 rounded-lg text-sm font-medium transition-colors",
                preferences.fontSize === size
                  ? "bg-blue-500 text-white"
                  : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600",
              )}
              onClick={() => updateFontSize(size)}
            >
              {size === "small" ? "작게" : size === "medium" ? "보통" : "크게"}
            </button>
          ))}

          
        </div>
      </div>
    </>
  );
}

// src/context/setting/SettingProvider.tsx

.
.
.

useEffect(() => {
    document.documentElement.style.fontSize = {
      small: "14px",
      medium: "16px",
      large: "18px"
    }[preferences.fontSize];
  }, [preferences]);
  
  .
  .
  .

UserProfile 알림 설정

// src/components/AlarmSetting.tsx

import { Bell } from "lucide-react";
import { useSetting, useSettingAction } from "../context/setting/useSetting";
import { twMerge } from "tailwind-merge";

export default function AlarmSetting() {
  const { preferences } = useSetting();
  const { updateNotifications } = useSettingAction();

  return (
    <>
      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
        <div className="flex items-center gap-3 mb-4">
          <Bell className="text-blue-500" size={24} />
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
            알림 설정
          </h2>
        </div>
        <div className="space-y-4">
          {(
            Object.keys(
              preferences.notifications,
            ) as (keyof UserPreferences["notifications"])[]
          ).map((key) => (
            <label key={key} className="flex items-center justify-between">
              <span className="text-gray-700 dark:text-gray-300 capitalize">
                {key === "email"
                  ? "이메일 알림"
                  : key === "push"
                    ? "푸시 알림"
                    : "데스크톱 알림"}
              </span>
              
              <button
                className={twMerge(
                  "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
                  preferences.notifications[key]
                    ? "bg-blue-500"
                    : "bg-gray-300 dark:bg-gray-600",
                )}
                onClick={() =>
                  updateNotifications(key, !preferences.notifications[key])
                }
              >
                
                <span
                  className={twMerge(
                    "inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1",
                    preferences.notifications[key]
                      ? "translate-x-6"
                      : "translate-x-1",
                  )}
                />
              </button>
            </label>
          ))}
        </div>
      </div>
    </>
  );
}

UserProfile 테마 설정

// src/components/ThemeSetting.tsx

import { Monitor, Moon, Sun } from "lucide-react";
import { useSetting, useSettingAction } from "../context/setting/useSetting";
import { twMerge } from "tailwind-merge";

export default function ThemeSetting() {
  const { preferences } = useSetting();
  const { updateColorScheme } = useSettingAction();

  return (
    <>
      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
        <div className="flex items-center gap-3 mb-4">
          <Sun className="text-blue-500" size={24} />
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
            테마 설정
          </h2>
        </div>
        <div className="grid grid-cols-3 gap-3">
          {(["system", "light", "dark"] as const).map((scheme) => (
            <button
              key={scheme}
              className={twMerge(
                "flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors",
                preferences.colorScheme === scheme
                  ? "bg-blue-500 text-white"
                  : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600",
              )}
              onClick={() => updateColorScheme(scheme)}
            >
              {scheme === "system" ? (
                <>
                  <Monitor size={16} />
                  <span>시스템</span>
                </>
              ) : scheme === "light" ? (
                <>
                  <Sun size={16} />
                  <span>라이트</span>
                </>
              ) : (
                <>
                  <Moon size={16} />
                  <span>다크</span>
                </>
              )}
            </button>
          ))}
        </div>
      </div>
    </>
  );
}

// src/context/setting/SettingProvider.tsx

.
.
.

useEffect(() => {
    document.documentElement.style.fontSize = {
      small: "14px",
      medium: "16px",
      large: "18px"
    }[preferences.fontSize];

    if (preferences.colorScheme === "system") {
      document.documentElement.classList.remove("light", "dark");
      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.add("light");
      }
    } else {
      document.documentElement.classList.remove("light", "dark");
      document.documentElement.classList.add(preferences.colorScheme);
    }

  }, [preferences]);
  
  .
  .
  .

UserProfile 언어 설정

// src/libs/i18n.ts

export const translations = {
  ko: {
    profileTitle: "사용자 설정",
    languageSetting: "언어 설정",
    fontSize: {
      label: "글자 크기",
      small: "작게",
      medium: "보통",
      large: "크게",
    },
    notifications: {
      label: "알림 설정",
      email: "이메일 알림",
      push: "푸시 알림",
      desktop: "데스크톱 알림",
    },
    theme: {
      label: "테마 설정",
      system: "시스템",
      light: "라이트",
      dark: "다크",
    },
  },
  en: {
    profileTitle: "User Settings",
    languageSetting: "Language Setting",
    fontSize: {
      label: "Font Size",
      small: "Small",
      medium: "Medium",
      large: "Large",
    },
    notifications: {
      label: "Notification Settings",
      email: "Email Notifications",
      push: "Push Notifications",
      desktop: "Desktop Notifications",
    },
    theme: {
      label: "Theme Setting",
      system: "System",
      light: "Light",
      dark: "Dark",
    },
  },
  ja: {
    profileTitle: "ユーザー設定",
    languageSetting: "言語設定",
    fontSize: {
      label: "文字サイズ",
      small: "小",
      medium: "中",
      large: "大",
    },
    notifications: {
      label: "通知設定",
      email: "メール通知",
      push: "プッシュ通知",
      desktop: "デスクトップ通知",
    },
    theme: {
      label: "テーマ設定",
      system: "システム",
      light: "ライト",
      dark: "ダーク",
    },
  },
} as const;

export type SupportedLanguage = keyof typeof translations;
export type LocaleKey = keyof (typeof translations)["ko"];

// src/libs/useTranslation.ts

import { useSetting } from "../context/setting/useSetting";
import { SupportedLanguage, translations } from "./i18n";

export default function useTranslation() {
  const { preferences } = useSetting();
  const lang = preferences.language as SupportedLanguage;
  const t = translations[lang]; // 객체 변수
  return { t, lang };
}

// src/components/LanguageSetting.tsx

import { Languages } from "lucide-react";
import { useSetting, useSettingAction } from "../context/setting/useSetting";
import { twMerge } from "tailwind-merge";
import useTranslation from "../libs/useTranslation";

export default function LanguageSetting() {
  const { preferences } = useSetting();
  const { updateLanguage } = useSettingAction();
  const { t } = useTranslation();

  return (
    <>
      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
        <div className="flex items-center gap-3 mb-4">
          <Languages className="text-blue-500" size={24} />
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
            {t.languageSetting}
          </h2>
        </div>
        <div className="grid grid-cols-3 gap-3">
          {(["ko", "en", "ja"] as const).map((lang) => (
            <button
              key={lang}
              className={twMerge(
                "px-4 py-2 rounded-lg text-sm font-medium transition-colors",
                preferences.language === lang
                  ? "bg-blue-500 text-white"
                  : "bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600",
              )}
              onClick={() => updateLanguage(lang)}
            >
              {lang === "ko"
                ? "한국어"
                : lang === "en"
                  ? "English"
                  : "日本語"}
            </button>
          ))}

          
        </div>
      </div>
    </>
  );
}

UserProfile 값 저장하기

새로고침 해도 이전 값이 유지되도록 설정

// src/context/setting/SettingProvider.tsx

import React, { useEffect, useMemo, useState } from "react";
import { SettingContext, SettingContextAction } from "./SettingContext";

const defaultValue: UserPreferences = {
  language: "ko",
  fontSize: "medium",
  notifications: {
    email: false,
    push: false,
    desktop: false,
  },
  colorScheme: "system",
};

export default function SettingProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [preferences, setPreferences] = useState<UserPreferences>(() => {
    const save = localStorage.getItem("preferences");
    return save ? JSON.parse(save) : defaultValue;
  });

  .
  .
  .

  useEffect(() => {

    localStorage.setItem("preferences", JSON.stringify(preferences));

    document.documentElement.style.fontSize = {
      small: "14px",
      medium: "16px",
      large: "18px"
    }[preferences.fontSize];

    if (preferences.colorScheme === "system") {
      document.documentElement.classList.remove("light", "dark");
      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.add("light");
      }
    } else {
      document.documentElement.classList.remove("light", "dark");
      document.documentElement.classList.add(preferences.colorScheme);
    }

  }, [preferences]);

  return (
    <>
      <SettingContextAction value={memoization}>
        <SettingContext value={{ preferences }}>{children}</SettingContext>
      </SettingContextAction>
    </>
  );
}

UserProfile useLayoutEffect

다크 모드를 설정한 상태에서 새로고침을 하면, 아주 잠깐 라이트 모드 디자인이 보여졌다가 다크 모드로 전환되면서 화면이 번쩍거리는 버그 발생

∵ 다크 모드를 판단하고 DOM을 조작하는 로직이 useEffect 훅에서 처리되기 때문

ㄴ useEffect 훅은 컴포넌트가 화면에 렌더링 되고 난 이후에 실행

--> 컴포넌트가 라이트 모드로 그려진 이후에 다크 모드로 전환됨

useLayoutEffect 훅 사용

ㄴ useLayoutEffect 훅은 useEffect 훅과 완전히 똑같지만, 컴포넌트가 그려지기 전에 동기적으로 함수 로직이 실행된다는 점에서 차이점 O

UserProfile useLayoutEffect - 2

// ScrollComparison.tsx

import { useEffect, useLayoutEffect, useRef } from "react";

const items = Array.from({ length: 402 }, (_, i) => `Item ${i + 1}`);

export default function ScrollComparison() {
  const refEffect = useRef<HTMLDivElement>(null);
  const refLayout = useRef<HTMLDivElement>(null);

  useEffect(() => {
    refEffect.current?.scrollTo({top: refEffect.current.scrollHeight});
  }, []);

  useLayoutEffect(() => {
    refLayout.current?.scrollTo({top: refLayout.current.scrollHeight});
  }, []);

  const boxClass =
    "border rounded-lg h-48 w-full overflow-auto bg-gray-100 p-2";

  return (
    <div className="space-y-8 p-8 max-w-2xl mx-auto">
      {/* useEffect 스크롤 박스 */}
      <div>
        <h2 className="text-lg font-semibold mb-2">useEffect 스크롤</h2>
        <div ref={refEffect} className={boxClass}>
          {items.map((text) => (
            <div key={text} className="py-1">
              {text}
            </div>
          ))}
        </div>
        <p className="mt-2 text-sm text-gray-600">
          렌더 후 스크롤 → 처음엔 위에서 시작하다가 아래로 내려가는 걸 볼 수
          있습니다.
        </p>
      </div>

      {/* useLayoutEffect 스크롤 박스 */}
      <div>
        <h2 className="text-lg font-semibold mb-2">useLayoutEffect 스크롤</h2>
        <div ref={refLayout} className={boxClass}>
          {items.map((text) => (
            <div key={text} className="py-1">
              {text}
            </div>
          ))}
        </div>
        <p className="mt-2 text-sm text-gray-600">
          렌더 전 스크롤 → 처음부터 맨 아래에 렌더되어 깜빡임이 없습니다.
        </p>
      </div>
    </div>
  );
}

^ useEffect 훅을 사용한 코드는 시각적 깜빡임이 발생하는 반면, useLayoutEffect 훅을 사용한 코드는 깜빡임 없이 자연스럽게 동작

* DOM 조작이 필요한 상황에서는 레이아웃 시동 직후, 브라우저가 화면을 실제로 그리기 전에 동기적으로 작업을 처리하는 것이 유리

이 과정에서 발생하는 UI의 시각적 깜빡임을 방지하고 싶을 때 useLayoutEffect 훅을 사용

리액트 - Toggle Button 구현

favor — Thu, 28 May 2026 16:32:55 +0900

Toggle Switch

// App.tsx

import { useState } from "react";

function App() {

  const [hide, setHide] = useState(false);
  
  const handleHideMode = (hide: boolean) => {
    setHide(() => !hide);
  };
  
  return (
    <>
      ...
      <HideCompletedToggleButton hide={hide} handleHideMode={handleHideMode} />
    </>
  );
}

// src/components/HideCompletedToggleButton.tsx

export default function HideCompletedToggleButton({
  hide,
  handleHideMode,
}: {
  hide: boolean;
  handleHideMode: (hide: boolean) => void;
}) {

  return (
    <div className="flex items-center gap-2">
      <p className="text-sm">완료 숨기기</p>
      <button
        onClick={() => handleHideMode(hide)}
        className={`relative w-12 h-6 rounded-full transition-colors duration-300 ${hide ? "bg-blue-500" : "bg-gray-300"}`}
      >
        {/* 토글 버튼 안에서 움직이는 동그라미 */}
        <div
          className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform duration-300
          ${hide ? "translate-x-7" : "translate-x-1"}`}
        />
      </button>
    </div>
  );
}

duration-300
- transition-duration: 300ms;
- 애니메이션 시간을 0.3초로 설정
- 스위치 내부의 동그라미가 0.3초 동안 부드럽게 이동
${hide ? "translate-x-7" : "translate-x-1"}
- translate-x-7 === transform: translateX(1.75rem);
- --> x축으로 오른쪽으로 이동
- 동그라미의 위치를 ON, OFF에 따라 지정

Context API

favor — Wed, 27 May 2026 18:10:42 +0900

Context를 사용해 데이터를 깊게 전달하기

보통의 경우, 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달
ㄴ 그러나 중간에 많은 컴포넌트를 거쳐야 하거나, 애플리케이션의 많은 컴포넌트에서 동일한 정보가 필요한 경우에는 props를 전달하는 것이 번거롭고 불편할 수 O
Context는 부모 컴포넌트가 깊이에 상관 없이, 트리 아래에 있는 모든 컴포넌트에 정보를 명시적으로 사용할 수 있게 해줌

✔️ Props 전달하기의 문제점

Props 전달하기 : UI 트리를 통해 해당 데이터를 사용하는 컴포넌트에 명시적으로 데이터를 전달하는 방법

Props drilling : 데이터가 필요한 여러 컴포넌트의 가장 가까운 공통 조상이 트리 상 높이 위치하여 높게까지 state를 끌어올리는 것

✔️ Context: Props 전달하기의 대안

Context는 부모 컴포넌트가 그 아래의 트리 전체에 데이터를 전달할 수 있도록 해줌

크기 조정을 위해 level prop을 전달하는 코드

// App.js

import Heading from './Heading.js';
import Section from './Section.js';

export default function Page() {
  return (
    <Section>
      <Heading level={1}>Title</Heading>
      <Section>
        <Heading level={2}>Heading</Heading>
        <Heading level={2}>Heading</Heading>
        <Heading level={2}>Heading</Heading>
        <Section>
          <Heading level={3}>Sub-heading</Heading>
          <Heading level={3}>Sub-heading</Heading>
          <Heading level={3}>Sub-heading</Heading>
          <Section>
            <Heading level={4}>Sub-sub-heading</Heading>
            <Heading level={4}>Sub-sub-heading</Heading>
            <Heading level={4}>Sub-sub-heading</Heading>
          </Section>
        </Section>
      </Section>
    </Section>
  );
}

// Section.js

export default function Section({ children }) {
  return (
    <section className="section">
      {children}
    </section>
  );
}

// Heading.js

export default function Heading({ level, children }) {
  switch (level) {
    case 1:
      return <h1>{children}</h1>;
    case 2:
      return <h2>{children}</h2>;
    case 3:
      return <h3>{children}</h3>;
    case 4:
      return <h4>{children}</h4>;
    case 5:
      return <h5>{children}</h5>;
    case 6:
      return <h6>{children}</h6>;
    default:
      throw Error('Unknown level: ' + level);
  }
}

<Section>
  <Heading level={3}>About</Heading>
  <Heading level={3}>Photos</Heading>
  <Heading level={3}>Videos</Heading>
</Section>

^ 각각의 <Heading>에 level prop을 전달

<Section level={3}>
  <Heading>About</Heading>
  <Heading>Photos</Heading>
  <Heading>Videos</Heading>
</Section>

^ <Section> 컴포넌트에 level prop을 전달

위와 같이 변경하려면, <Heading> 컴포넌트가 가장 가까운 <Section>의 레벨을 알아야 함

ㄴ 자식에게 트리 위 어딘가에 있는 데이터를 요청하는 방법이 필요

Props만으로는 불가능 --> Context 활용

Context 생성
데이터가 필요한 컴포넌트에서 context를 사용
데이터를 지정하는 컴포넌트에서 context를 제공

* Context는 부모가 트리 내부 전체에, 심지어 멀리 떨어진 컴포넌트에조차 데이터를 제공할 수 있도록 함

✔️ 1단계: Context 생성하기

먼저 context를 생성, 이후 컴포넌트에서 사용할 수 있도록 파일에서 내보내야 함

// LevelContext.js

import { createContext } from 'react';

export const LevelContext = createContext(1);

createContext의 유일한 인자는 기본값

ㄴ 객체를 포함한 모든 종류의 값 전달 가능

✔️ 2단계: Context 사용하기

React에서 useContext 훅과 생성한 Context를 가져옴

import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

지금은 Heading 컴포넌트가 props에서 level을 읽어오지만, level prop을 제거하고 위에서 가져온 context인 LevelContext에서 값을 읽도록 바꿈

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  // ...
}

Heading이 아닌 Section이 대신 level을 받도록 JSX 업데이트

<Section level={4}>
  <Heading>Sub-sub-heading</Heading>
  <Heading>Sub-sub-heading</Heading>
  <Heading>Sub-sub-heading</Heading>
</Section>

✔️ 3단계: Context 제공하기

// Section.js

import { LevelContext } from './LevelContext.js';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext value={level}>
        {children}
      </LevelContext>
    </section>
  );
}

이제 level prop을 각 Heading 컴포넌트에 전달할 필요 X

대신 위의 가장 가까운 Section에게 제목 레벨을 확인함

level prop을 <Section>에 전달
Section은 자식을 <LevelContext value={level}>로 감싸줌
Heading은 useContext(LevelContext)를 사용해 가장 근처의 LevelContext의 값을 요청

✔️ 같은 컴포넌트에서 context를 사용하며 제공하기

export default function Page() {
  return (
    <Section level={1}>
      ...
      <Section level={2}>
        ...
        <Section level={3}>
          ...

^ 지금은 각각의 섹션에 level을 수동으로 지정해야 함

Context를 통해 위의 컴포넌트에서 정보를 읽을 수 있으므로, 각 Section은 위의 Section에서 level을 읽고 자동으로 level+1을 아래로 전달할 수 있음

import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Section({ children }) {
  const level = useContext(LevelContext);
  return (
    <section className="section">
      <LevelContext value={level + 1}>
        {children}
      </LevelContext>
    </section>
  );
}

✔️ Context로 중간 컴포넌트 지나치기

Context를 사용하면 주변에 적응하고 렌더링되는 위치에 따라 자신을 다르게 표시하는 컴포넌트를 작성 가능

✔️ Context를 사용하기 전에 고려할 것

어떤 props를 여러 레벨 깊이로 전달해야 한다고 해서 해당 정보를 context에 넣어야 하는 것은 아님

context를 사용하기 전 고려해볼 몇 가지 대안

Props 전달하기로 시작하기
- 사소한 컴포넌트들이 아니라면 여러 개의 props가 여러 컴포넌트를 거쳐 가는 것은 그리 이상한 일이 X
- 데이터의 흐름이 props를 통해 분명해져 코드를 유지보수 하기에도 좋음
컴포넌트를 추출하고 JSX를 children으로 전달하기
- 컴포넌트를 추출하는 것을 잊은 겨웅 多
- ex) posts처럼 직접 사용하지 않는 props를 <Layout posts={posts} />와 같이 전달 가능

✔️ Context 사용 예시

테마 지정하기
- 사용자가 모양을 변경할 수 있는 애플리케이션의 경우에 context provider를 앱 최상단에 두고 시각적으로 조정이 필요한 컴포넌트에서 context를 사용할 수 있음
현재 계정
- 로그인한 사용자를 알아야 하는 컴포넌트가 많을 수 있음
- Context에 놓으면 트리 어디에서나 편하게 알아낼 수 있음
라우팅
- 대부분의 라우팅 솔루션은 현재 경로를 유지하기 위해 내부적으로 context를 사용
- 이것이 모든 링크의 활성화 여부를 알 수 있는 방법
상태 관리
- 애플리케이션이 커지면 결국 앱 상단에 수많은 state가 생기게 됨
- reducer를 context와 함께 사용하는 것은 복잡한 state를 관리하고 번거로운 작업 없이 멀리 있는 컴포넌트까지 값을 전달하는 방법

Reducer와 Context로 앱 확장하기

Reducer를 사용하면 컴포넌트의 state 업데이트 로직 통합 가능
Context를 사용하면 다른 컴포넌트들에 정보 전달 가능
Reducer와 context를 함께 사용하면 복잡한 화면의 state를 관리 가능

✔️ Reducer와 context를 결합하기

Reducer는 이벤트 핸들러를 짧고 간결하게 유지하는 데 도움이 됨

// App.js

import { useReducer } from 'react';
import AddTask from './AddTask.js';
import TaskList from './TaskList.js';

export default function TaskApp() {
  const [tasks, dispatch] = useReducer(
    tasksReducer,
    initialTasks
  );

  function handleAddTask(text) {
    dispatch({
      type: 'added',
      id: nextId++,
      text: text,
    });
  }

  function handleChangeTask(task) {
    dispatch({
      type: 'changed',
      task: task
    });
  }

  function handleDeleteTask(taskId) {
    dispatch({
      type: 'deleted',
      id: taskId
    });
  }

  return (
    <>
      <h1>Day off in Kyoto</h1>
      <AddTask
        onAddTask={handleAddTask}
      />
      <TaskList
        tasks={tasks}
        onChangeTask={handleChangeTask}
        onDeleteTask={handleDeleteTask}
      />
    </>
  );
}

function tasksReducer(tasks, action) {
  switch (action.type) {
    case 'added': {
      return [...tasks, {
        id: action.id,
        text: action.text,
        done: false
      }];
    }
    case 'changed': {
      return tasks.map(t => {
        if (t.id === action.task.id) {
          return action.task;
        } else {
          return t;
        }
      });
    }
    case 'deleted': {
      return tasks.filter(t => t.id !== action.id);
    }
    default: {
      throw Error('Unknown action: ' + action.type);
    }
  }
}

let nextId = 3;
const initialTasks = [
  { id: 0, text: 'Philosopher’s Path', done: true },
  { id: 1, text: 'Visit the temple', done: false },
  { id: 2, text: 'Drink matcha', done: false }
];

// AppTask.js

import { useState } from 'react';

export default function AddTask({ onAddTask }) {
  const [text, setText] = useState('');
  return (
    <>
      <input
        placeholder="Add task"
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <button onClick={() => {
        setText('');
        onAddTask(text);
      }}>Add</button>
    </>
  )
}

// TaskList.js

import { useState } from 'react';

export default function TaskList({
  tasks,
  onChangeTask,
  onDeleteTask
}) {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          <Task
            task={task}
            onChange={onChangeTask}
            onDelete={onDeleteTask}
          />
        </li>
      ))}
    </ul>
  );
}

function Task({ task, onChange, onDelete }) {
  const [isEditing, setIsEditing] = useState(false);
  let taskContent;
  if (isEditing) {
    taskContent = (
      <>
        <input
          value={task.text}
          onChange={e => {
            onChange({
              ...task,
              text: e.target.value
            });
          }} />
        <button onClick={() => setIsEditing(false)}>
          Save
        </button>
      </>
    );
  } else {
    taskContent = (
      <>
        {task.text}
        <button onClick={() => setIsEditing(true)}>
          Edit
        </button>
      </>
    );
  }
  return (
    <label>
      <input
        type="checkbox"
        checked={task.done}
        onChange={e => {
          onChange({
            ...task,
            done: e.target.checked
          });
        }}
      />
      {taskContent}
      <button onClick={() => onDelete(task.id)}>
        Delete
      </button>
    </label>
  );
}

^ 현재 task state 및 dispatch 함수는 최상위 TaskApp 컴포넌트에서만 사용 가능

ㄴ 다른 컴포넌트가 작업 목록을 읽거나 변경하려면 현재 state와 해당 state를 변경하는 이벤트 핸들러를 명시적으로 props로 전달해야 함

Reducer와 context를 결합하는 방법

Context를 생성
State와 dispatch 함수를 context에 넣음
트리 안에서 context를 사용

✔️ 1단계: Context 생성

useReducer 훅은 현재 tasks와 업데이트할 수 있는 dispatch 함수를 반환

const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

트리를 통해 전달하려면, 두 개의 별개의 context를 생성해야 함

TaskContext는 현재 tasks 리스트를 제공
TaskDispatchContext는 컴포넌트에서 action을 dispatch하는 함수를 제공

// TasksContext.js

import { createContext } from 'react';

export const TasksContext = createContext(null);
export const TasksDispatchContext = createContext(null);

^ 두 context에 모두 기본값으로 null을 전달, 실제 값은 TaskApp 컴포넌트에서 제공될 것

✔️ 2단계: State와 dispatch 함수를 context에 넣기

이제 TaskApp 컴포넌트에서 두 context를 모두 가져올 수 있음

useReducer()에서 반환된 tasks 및 dispatch를 가져와 아래 트리 전체에 제공

import { TasksContext, TasksDispatchContext } from './TasksContext.js';

export default function TaskApp() {
  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
  // ...
  return (
    <TasksContext value={tasks}>
      <TasksDispatchContext value={dispatch}>
        ...
      </TasksDispatchContext>
    </TasksContext>
  );
}

✔️ 3단계: 트리 안에서 context 사용하기

// TaskList.js

import { useState, useContext } from 'react';
import { TasksContext, TasksDispatchContext } from './TasksContext.js';

export default function TaskList() {
  const tasks = useContext(TasksContext);
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          <Task task={task} />
        </li>
      ))}
    </ul>
  );
}

function Task({ task }) {
  const [isEditing, setIsEditing] = useState(false);
  const dispatch = useContext(TasksDispatchContext);
  let taskContent;
  if (isEditing) {
    taskContent = (
      <>
        <input
          value={task.text}
          onChange={e => {
            dispatch({
              type: 'changed',
              task: {
                ...task,
                text: e.target.value
              }
            });
          }} />
        <button onClick={() => setIsEditing(false)}>
          Save
        </button>
      </>
    );
  } else {
    taskContent = (
      <>
        {task.text}
        <button onClick={() => setIsEditing(true)}>
          Edit
        </button>
      </>
    );
  }
  return (
    <label>
      <input
        type="checkbox"
        checked={task.done}
        onChange={e => {
          dispatch({
            type: 'changed',
            task: {
              ...task,
              done: e.target.checked
            }
          });
        }}
      />
      {taskContent}
      <button onClick={() => {
        dispatch({
          type: 'deleted',
          id: task.id
        });
      }}>
        Delete
      </button>
    </label>
  );
}

✔️ 하나의 파일로 합치기

반드시 이런 방식으로 작성하지 않아도 되지만, reducer와 context를 모두 하나의 파일에 작성하면 컴포넌트들을 조금 더 정리 가능

Reducer를 같은 파일로 옮기고 TasksProvider 컴포넌트를 새로 선언

ㄴ 해당 컴포넌트는 모든 것을 하나로 묶는 역할을 함

Reducer로 state를 관리
두 context를 모두 하위 컴포넌트에 제공
children을 prop으로 받기 때문에 JSX를 전달 가능

export function TasksProvider({ children }) {
  const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

  return (
    <TasksContext value={tasks}>
      <TasksDispatchContext value={dispatch}>
        {children}
      </TasksDispatchContext>
    </TasksContext>
  );
}

TasksContext.js에서 context를 사용하기 위한 use 함수들도 내보낼 수 있음

export function useTasks() {
  return useContext(TasksContext);
}

export function useTasksDispatch() {
  return useContext(TasksDispatchContext);
}

이 함수를 사용하여 컴포넌트에서 context를 읽을 수 있음

const tasks = useTasks();
const dispatch = useTasksDispatch();

TasksProvider는 tasks를 화면의 한 부분으로 tasks를 관리

useTasks로 tasks를 읽을 수 있고, useTasksDispatch로 컴포넌트들에서 tasks를 업데이트할 수 있음

섹션 12. 사이드 이펙트와 컴포넌트 최적화

favor — Fri, 22 May 2026 02:48:32 +0900

useId

웹 접근성(Web Accessibility) : 모든 사용자가 어떤 신체적, 기술적 조건에 구애받지 않고 웹사이트의 모든 정보에 동등하게 접근하고 이해할 수 있도록 보장하는 것

<input>의 id 속성과 <label>의 htmlFor 속성을 동일한 값으로 매칭하여 참조관계 생성

스크린 리더가 인풋창을 읽을 때 라벨 텍스트를 함께 읽어줌
라벨 텍스트를 클릭해도 인풋창에 자동으로 포커스 --> UX 향상

useId 훅 : 컴포넌트 내부에 고유하고 독립적인 id 값을 생성하기 위한 리액트 내장 훅

--> 컴포넌트가 여러 번 렌더링되어도 리액트가 알아서 서버와 클라이언트 모두에서 겹치지 않는 안전한 고유 ID 문자열을 뱉어줌

// App.tsx

import Checkbox from "./components/Checkbox";

export default function App() {
  return (
    <>
      <Checkbox />
      <Checkbox />
      
    </>
  );
}

// Checkbox.tsx

import { useId } from "react";

export default function Checkbox() {

  const uuid = useId();

  return (
    <div>
      <input type="checkbox" id={uuid} />
      <label htmlFor={uuid}>사과</label>
    </div>
  );
}

할 일 관리 앱(useId)

기존 코드

// Checkbox.tsx

type CheckboxProps = Omit<React.ComponentPropsWithoutRef<"input">, "type"> & {
  type?: "checkbox";
  parentClassName: string;
};
export default function Checkbox(props: CheckboxProps) {
  const { parentClassName, children, ...rest } = props;
  return (
    <>
      <div className={parentClassName}>
        <input {...rest} />
        <label>{children}</label>
      </div>
    </>
  );
}

useId 사용 코드

// Checkbox.tsx

import { useId } from "react";

type CheckboxProps = Omit<React.ComponentPropsWithoutRef<"input">, "type"> & {
  type?: "checkbox";
  parentClassName: string;
};
export default function Checkbox(props: CheckboxProps) {
  const { parentClassName, children, ...rest } = props;
  const uuid = useId();
  return (
    <>
      <div className={parentClassName}>
        <input id={uuid} {...rest} />
        <label htmlFor={uuid}>{children}</label>
      </div>
    </>
  );
}

useEffect 이론

컴포넌트의 주된 목적 : 컴포넌트에서 반환하는 JSX 요소를 바탕으로 화면을 렌더링하는 것

사이드 이펙트(Side Effect) : 화면 렌더링을 제외한 다른 작업들

ex) API 통신, 로컬&세션 스토리지 작업, 외부 라이브러리 연동

useEffect(effect함수, 의존성배열([]))

의존성 배열에 따라 effect 함수를 호출

effect 함수를 호출하는 세 가지 상황

컴포넌트 생성(=마운트)
컴포넌트 삭제(=언마운트)
컴포넌트 변경(=업데이트)

useEffect 실습

// Counter.tsx

import { useEffect, useState } from "react";

export default function Count() {
  const [count, setCount] = useState(0);

  // 의존성 배열이 비어있다면) 컴포넌트가 생성될 때만 호출됨 
  useEffect(() => {
    console.log("Count 컴포넌트 생성");

    // useEffect 내부 return) 컴포넌트가 삭제될 때만 호출됨
    return () => {
      console.log("Count 컴포넌트 삭제");
    }
  }, []);

  // 의존성 배열에 상태 변경을 감지하고 싶은 값을 넣는다면) 컴포넌트 상태가 변경될 때만 호출됨 
  useEffect(() => {console.log("Count Change : " + count)}, [count]);

  return (
    <>
      <h1>Count: {count} </h1>
      <button onClick={() => setCount((count) => count + 1)}>증가</button>
    </>
  );
}

할 일 관리 앱(useEffect)

새로고침을 해도 값을 유지하게 하는 방법 : 데이터베이스 사용 or 로컬 세션 스토리지 or 쿠키

기존 코드

// Todo.tsx

import { useEffect, useState } from "react";
import TodoEditor from "./TodoEditor";
import TodoHeader from "./TodoHeader";
import TodoList from "./TodoList";

export default function Todo() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const addTodo = (text: string) => {
    setTodos((todos) => [
      ...todos,
      {
        id: Date.now(),
        text,
        completed: false,
      },
    ]);
  };
  const toggleTodo = (id: number) => {
    setTodos((todos) =>
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };
  const deleteTodo = (id: number) => {
    setTodos((todos) => todos.filter((todo) => todo.id !== id));
  };
  const modifyTodo = (id: number, text: string) => {
    setTodos((todos) =>
      todos.map((todo) => (todo.id === id ? { ...todo, text } : todo))
    );
  };

  return (
    <>
      <div className="todo">
        <TodoHeader />
        {/* 할 일 등록  */}
        <TodoEditor addTodo={addTodo} />
        {/* 할 일 목록  */}
        <TodoList
          todos={todos}
          toggleTodo={toggleTodo}
          deleteTodo={deleteTodo}
          modifyTodo={modifyTodo}
        />
      </div>
    </>
  );
}

useEffect 사용 코드

// Todo.tsx

import { useEffect, useState } from "react";
import TodoEditor from "./TodoEditor";
import TodoHeader from "./TodoHeader";
import TodoList from "./TodoList";

export default function Todo() {
  const [todos, setTodos] = useState<Todo[]>(JSON.parse(localStorage.getItem("todos") || "[]"));
  const addTodo = (text: string) => {
    setTodos((todos) => [
      ...todos,
      {
        id: Date.now(),
        text,
        completed: false,
      },
    ]);
  };
  const toggleTodo = (id: number) => {
    setTodos((todos) =>
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };
  const deleteTodo = (id: number) => {
    setTodos((todos) => todos.filter((todo) => todo.id !== id));
  };
  const modifyTodo = (id: number, text: string) => {
    setTodos((todos) =>
      todos.map((todo) => (todo.id === id ? { ...todo, text } : todo))
    );
  };

  useEffect(() => {
    // console.log("todos 변경됨");
    localStorage.setItem("todos", JSON.stringify(todos))
  }, [todos]);

  return (
    <>
      <div className="todo">
        <TodoHeader />
        {/* 할 일 등록  */}
        <TodoEditor addTodo={addTodo} />
        {/* 할 일 목록  */}
        <TodoList
          todos={todos}
          toggleTodo={toggleTodo}
          deleteTodo={deleteTodo}
          modifyTodo={modifyTodo}
        />
      </div>
    </>
  );
}

컴포넌트 리렌더링 조건

리렌더링 : React에서 컴포넌트가 다시 렌더링되는 것

리렌더링이 발생하는 세 가지 경우

컴포넌트의 정의한 상태가 변경되었을 때
컴포넌트로 전달하는 props가 변경되었을 때
부모 컴포넌트가 리렌더링 되었을 때

React.memo

불필요한 리렌더링 : 화면에 실질적인 데이터 변화가 없음에도 불구하고 렌더링이 발생하는 현상

ex) 부모 컴포넌트가 리렌더링되면, 자식 컴포넌트는 props의 변경 여부와 상관 없이 무조건 다시 호출됨

--> 컴포넌트 구조가 복잡하거나 자식 컴포넌트의 개수가 많을 경우 성능 저하로 이어질 수 있음

React.memo : 함수형 컴포넌트를 메모이제이션(memoization)하여 컴포넌트 자체를 메모리에 저장해두는 도구

React.memo 작동 방식

컴포넌트가 새로운 props를 받았을 때, 이전 props와 새로운 props를 얕은 비교
두 props가 동일하다면, 컴포넌트 함수를 다시 실행하지 않고 메모리에 저장해둔 이전 렌더링 결과를 그대로 재사용
props가 변경되었다면, 컴포넌트 함수를 실행하여 화면을 다시 그림

// ChildA.tsx

import React from "react";
import ChildB from "./ChildB";

export default React.memo(function ChildA() {
  console.log("ChildA");
  return (
    <>
      <h1>ChildA Component</h1>
      <ChildB />
    </>
  );
});

React.memo가 풀리는 순간

React.memo를 통해 컴포넌트를 메모리에 저장해두었더라도, 아래 조건이 만족되면 메모리가 해제되고 리렌더링이 수행됨

컴포넌트 자체의 상태가 변경될 때
컴포넌트로 전달되는 props의 값이 변경될 때

useCallback

useCallback 훅 : 컴포넌트 내부의 함수 자체를 메모이제이션하여, 리렌더링 시 함수가 불필요하게 새로 생성되는 것을 방지

ㄴ 리액트 컴포넌트는 리렌더링될 때마다 내부의 함수들을 매번 처음부터 다시 만듦

--> useCallback으로 감싸두면, 컴포넌트가 리렌더링되어도 동일한 메모리 주소(참조값)를 가진 기존 함수를 그대로 재사용 가능

useCallback(callback함수, 의존성배열([]))

의존성 배열의 작동 원리

빈 배열인 경우
- 컴포넌트가 처음 화면에 나타날 때(마운트 시) 함수를 딱 한 번만 메모리에 저장
- 이후, 컴포넌트가 아무리 리렌더링되어도 처음에 저장해둔 똑같은 함수를 계속 가져다 씀
배열에 특정 상태값이 들어있는 경우
- 평소에는 메모리에 있는 함수를 재사용하다가, 배열 안의 상태값이 변경되는 순간에만 함수를 새로 만들어 메모리를 업데이트

useMemo

useMemo 훅 : 컴포넌트 내부에서 발생하는 복잡한 연산의 결과 값을 메모이제이션하여 재사용하는 훅

useMemo(() => { return ... }, 의존성배열([]))

의존성 배열의 작동 원리

빈 배열인 경우
- 컴포넌트가 처음 화면에 나타날 때(마운트 시) 연산을 딱 한 번만 수행하고 그 결과를 메모리에 저장
배열의 특정 상태값이 들어있는 경우
- 평소에는 메모리에 있는 값을 재사용하다가, 배열 안의 상태값이 변경되는 순간에만 연산 함수를 다시 실행하여 메모리를 업데이트

lazy

파일 상단에 정적으로 선언된 컴포넌트는, 당장 화면에 보이지 않더라도 초기 번들 파일에 무조건 포함됨

--> 앱의 규모가 커질수록 초기 다운로드해야 하는 자바스크립트 파일이 너무 무거워지고, 첫 화면이 뜨기까지 오랜 시간이 걸림

코드 분할 : 거대한 하나의 자바스크립트 번들 파일을 여러 개의 작은 조각 파일로 쪼개는 기술

ㄴ 당장 필요한 첫 화면 코드만 먼저 다운로드하고, 나머지 페이지나 무거운 컴포넌트들은 그것이 실제로 필요해지는 순간에 비동기적으로 다운로드

React에서는 컴포넌트 수준에서 코드를 분할할 수 있도록 React.lazy 함수를 제공

--> 특정 컴포넌트를 필요할 때 비동기적으로 로딩 가능

기존 코드

import ChildA from "./components/ChildA";
import ChildB from "./components/ChildB";

React.lazy 사용 코드

const ChildA = React.lazy(() => import("./components/ChildA"));
const ChildB = React.lazy(() => import("./components/ChildB"));

const ChildA = lazy(() => import("./components/ChildA"));
const ChildB = lazy(() => import("./components/ChildB"));

Suspense

React.lazy 함수의 문제점 : 컴포넌트가 실제 렌더링되는 순간에 서버에서 자바스크립트 파일을 다운로드(import)

--> 인터넷 환경이 느리거나 컴포넌트 파일 크기가 크다면 최초 로딩 시간이 그만큼 느려짐

Suspense 컴포넌트 : 자식 컴포넌트가 로딩(비동기 다운로드)되는 동안 화면이 끊기지 않도록, 임시 대체 UI를 띄워주는 React 내장 컴포넌트

ㄴ 로딩 상태를 관리하기 위해 컴포넌트 내부에 별도의 isLoading 같은 상태 변수나 if-else 분기 처리 해줄 필요 X

fallback 속성을 사용해 대체 UI 작성 가능

ㄴ HTML/JSX 형태 모두 가능

// App.js

import React, { Suspense, useState } from "react";
// import ChildA from "./components/ChildA";
// import ChildB from "./components/ChildB";

const ChildA = React.lazy(() => import("./components/ChildA"));
const ChildB = React.lazy(() => import("./components/ChildB"));

export default function App() {
  const [isShow, setIsShow] = useState(false);

  return (
    <>
      <button onClick={() => setIsShow((isShow) => !isShow)}>toggle</button>
      {isShow && (
        <>
          <Suspense fallback={<h1>ChildA Loading...</h1>}>
            <ChildA />
          </Suspense>
          <Suspense fallback={<h1>ChildB Loading...</h1>}>
            <ChildB />
          </Suspense>
        </>
      )}
    </>
  );
}

error-boundary

React는 컴포넌트 트리 중 단 한 곳에서라도 자바스크립트 런타임 에러가 발생하면, 에러가 발생한 컴포넌트뿐만 아니라 부모 트리 전체의 렌더링을 중단시킴

Error Boundary : 에러가 발생해도 전체 앱이 죽지 않고, 에러가 난 그 컴포넌트 위치에만 대체 UI를 출력하여 서비스의 나머지 기능은 정상 작동하도록 보

npm i react-error-boundary 명령어를 사용하여 다운로드

에러가 발생해도 전체 트리가 멈추는 것이 아니라, 해당 구역만 대체 UI로 교체됨

// App.tsx

import { lazy, Suspense, useState } from "react";
import { ErrorBoundary } from "react-error-boundary";
const ChildA = lazy(() => import("./components/ChildA"));
const ChildB = lazy(() => import("./components/ChildB"));

export default function App() {
  const [isShow, setIsShow] = useState(false);
  return (
    <>
      <button onClick={() => setIsShow((isShow) => !isShow)}>토글</button>
      {isShow && (
        <>
          <Suspense fallback={<h1>ChildA Loading..</h1>}>
            <ChildA />
          </Suspense>
          <ErrorBoundary fallback={<div>Something went worng</div>}>
            <Suspense fallback={<h1>ChildB Loading..</h1>}>
              <ChildB />
            </Suspense>
          </ErrorBoundary>
        </>
      )}
    </>
  );
}

fallback 속성 대신 FallbackComponent를 사용하게 되면 동적으로 활용 가능

ㄴ 리액트가 해당 컴포넌트의 props로 error와 resetErrorBoundary를 넘겨줌

// App.tsx

import { lazy, Suspense, useState } from "react";
import { ErrorBoundary } from "react-error-boundary";
const ChildA = lazy(() => import("./components/ChildA"));
const ChildB = lazy(() => import("./components/ChildB"));

function Fallback({
  error,
  resetErrorBoundary,
}: {
  error: Error;
  resetErrorBoundary: () => void;
}) {
  return (
    <div role="alert">
      <p>Something went wrong: </p>
      <pre style={{ color: "red" }}>{error.message}</pre>
      <button onClick={resetErrorBoundary}>retry</button>
    </div>
  );
}

export default function App() {
  const [isShow, setIsShow] = useState(false);
  return (
    <>
      <button onClick={() => setIsShow((isShow) => !isShow)}>토글</button>
      {isShow && (
        <>
          <Suspense fallback={<h1>ChildA Loading..</h1>}>
            <ChildA />
          </Suspense>
          <ErrorBoundary FallbackComponent={Fallback}>
            <Suspense fallback={<h1>ChildB Loading..</h1>}>
              <ChildB />
            </Suspense>
          </ErrorBoundary>
        </>
      )}
    </>
  );
}

인자로 받는 2가지 매개변수

error
- 어떤 자바스크립트 에러가 터졌는지 담고있는 객체
resetErrorBoundary
- 에러 바운더리를 무시하고 컴포넌트를 다시 한번 실행하게 하도록 리셋하는 함수