현재 프로젝트의 react version:

• react: 19.1.0
• react-dom: 19.1.0
• react-router-dom: 7.6.0
• vite: 6.3.5
• @vitejs/plugin-react-swc": 3.9.0

• 기존 앱에서 프레임워크로 마이그레이션 하거나 Vite, Parcel, RSBuild 와 같은 빌드 도구로 마이그레이션 권장

• Next.js , React Router , Expo 와 같은 프레임워크를 새로운 프로젝트에 권장

• 프레임워크로 마이그레이션

  • 클라이언트측 CSR, SPA 지원

선언적(declarative)/ 데이터(data) / framework 세가지가 있다.

framework/library

1. declarative

import { BrowserRouter } from "react-router";

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

2. data

import { createBrowserRouter, RouterProvider } from "react-router";

let router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    loader: loadRootData,
  },
]);

ReactDOM.createRoot(root).render(<RouterProvider router={router} />);

3. framework mode : Vite 플러그인

• 타입세이프 href
• 유형 안전 경로 모듈 API
• 지능형 코드 분할
• SPA, SSR 및 정적 렌더링 전략

// routes.ts
import { index, route } from "@react-router/dev/routes";

export default [index("./home.tsx"), route("products/:pid", "./product.tsx")];

//product.tsx
import { index, route } from "@react-router/dev/routes";

export default [index("./home.tsx"), route("products/:pid", "./product.tsx")];

import {RouterProvider, createBrowserRouter} from 'react-router';

import Home from './Home';
import Dashboard from './Dashboard';

// ✅ Each route has it's own URL
const router = createBrowserRouter([
  {path: '/', element: <Home />},
  {path: '/dashboard', element: <Dashboard />}
]);

export default function App() {
  return (
    <RouterProvider value={router} />
  )

• Network Waterfalls : 코드 다운로드 중에 데이터를 병렬로 가져오는 대신 앱이 렌더링될 때 데이터를 가져오는 경우 발생합니다.
• 컴포넌트가 렌더링되기 전에 요청이 시작되도록 데이터를 미리 가져오는 옵션을 제공합니다. 경로 수준에서 데이터 종속성을 지정하기 위해 라우팅 "로더" 패턴과 통합할 때 가장 잘 작동하며, 이를 통해 라우터가 데이터 패치를 최적화할 수 있습니다.

export default function Dashboard() {
  const [data, setData] = useState(null);

  // ❌ Fetching data in a component causes network waterfalls
  useEffect(() => {
    fetch("/api/data")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export async function loader() {
  const response = await fetch(`/api/data`);
  const data = await response.json();
  return data;
}

// ✅ Fetching data in parallel while the code is downloading
export default function Dashboard({ loaderData }) {
  return (
    <div>
      {loaderData.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

• 초기 로드 시 라우터는 경로가 렌더링되기 직전에 데이터를 가져올 수 있습니다. 사용자가 앱을 탐색할 때 라우터는 데이터와 경로를 동시에 가져와서 가져오기 작업을 병렬화할 수 있습니다. 이를 통해 화면에 콘텐츠를 표시하는 데 걸리는 시간을 줄이고 사용자 경험을 향상시킬 수 있습니다.

• 앱의 로더를 올바르게 구성해야 하며 복잡성을 감수해야 성능이 저하됩니다.

• 코드가 다운로드되는 동안 병렬로 코드를 가져오는 라우터 기능을 사용하는 것입니다. 예를 들어, React Router는 lazy경로가 로드될 때 코드 분할 및 최적화되도록 지정하는 옵션을 제공합니다.

import Home from "./Home";
import Dashboard from "./Dashboard";

// ✅ Routes are downloaded before rendering
const router = createBrowserRouter([
  { path: "/", lazy: () => import("./Home") },
  { path: "/dashboard", lazy: () => import("Dashboard") },
]);

• 라우터 및 데이터 로딩 솔루션과 통합하여 캐싱을 극대화하고, 페치를 병렬화하며, "상호 작용 시 가져오기" 패턴을 지원하는 것이 가장 효과적입니다.

• React Hook
• v.18이랑 조금 다름
• UI의 일부를 백그라운드에서 렌더링 할 수 있도록 해주는 React Hook - UI 반응성을 유지(state)
• 우선순위를 줘서 startTransition

const [isPending, startTransition] = useTransition()

• 사용법

import { useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  // ...
}

1. isPending 플래그는 대기 중인 Transition 이 있는지 알려줍니다.
2. startTransition 함수는 상태 업데이트를 Transition 으로 표시할 수 있게 해주는 함수입니다.

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

• startTransition 내에서 호출되는 함수를 “Actions”이라고 합니다. 따라서 시작 트랜지션 내에서 호출되는 모든 콜백(예: 콜백 프로퍼티)의 이름은 action이거나 “Action” 접미사를 포함해야 합니다.
• 진행 중인 Transition에 대해 사용자에게 피드백을 제공하기 위해 isPending 상태는 startTransition을 처음 호출할 때 true로 전환되며, 모든 Action이 완료되어 최종 상태가 사용자에게 표시될 때까지 true 상태를 유지합니다.
• Transition이 진행 중일 때 useOptimistic을 사용하여 즉각적인 피드백을 제공할 수 있습니다.

function SubmitButton({ submitAction }) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      disabled={isPending}
      onClick={() => {
        startTransition(() => {
          submitAction();
        });
      }}
    >
      Submit
    </button>
  );
}

참고-Action과 일반 이벤트 처리의 차이점

• 비동기 처리도 우선 순위를 준다

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

• useActionState를 컴포넌트의 최상위 레벨에서 호출하여 폼 액션이 실행될 때 업데이트되는 컴포넌트 State를 생성하세요. useActionState는 기존의 폼 액션 함수와 초기 State를 전달받고, 폼에서 사용할 새로운 액션을 반환합니다. 또한 최신 폼 State와 액션이 대기 중인지 여부isPending도 반환합니다. 이때 최신 폼 State는 useActionState에 전달한 함수에도 함께 전달됩니다.

• 반환값: 세가지 값을 담은 배열

• 1.현재 State입니다. 첫 렌더링 시에는 initialState와 일치하며, 액션이 실행된 후에는 해당 액션이 반환한 값과 일치합니다.

• 2. form 컴포넌트의 action Prop이나, 폼 내부 button 컴포넌트의 formAction Prop에 전달할 수 있는 새 액션입니다. 이 액션은 startTransition 내에서 수동으로 호출할 수도 있습니다.
• 3. 현재 Transition이 대기 중인지 알려주는 isPending 플래그입니다.

import { useActionState } from 'react';
import { action } from './actions.js';

function MyComponent() {
  const [state, formAction] = useActionState(action, null);
  // ...
  return (
    <form action={formAction}>
      {/* ... */}
    </form>
  );
}

useActionState가 반환하는 배열은 다음과 같은 요소를 갖습니다.

1. 폼의 현재 State는, 처음에는 전달한 초기 State(null)로 설정되며, 폼이 제출된 후에는 전달한 액션의 반환값으로 설정됩니다.
2. <form>의 action Prop에 전달하거나 startTransition 안에서 직접 호출할 수 있는새로운 액션입니다.(formAction)
3. 액션이 처리되는 동안 사용할 수 있는 대기 Pending State입니다.

• 폼이 제출되면, 제공한 액션 함수가 호출되며, 해당 함수의 반환값이 새로운 현재 State로 설정됩니다.
• 이 액션 함수는 첫 번째 인수로 현재 State를 추가로 전달받습니다. 처음 제출될 때는초기 State가 전달되며, 이후 제출부터는 직전 호출 시 반환된 값이 전달됩니다. 나머지 인수들은 useActionState를 사용하지 않았을 때와 동일합니다.

예시)

//App.js
import { useActionState } from "react";
import { addToCart } from "./actions.js";

function AddToCartForm({itemID, itemTitle}) {
  const [message, formAction, isPending] = useActionState(addToCart, null);
  return (
    <form action={formAction}>
      <h2>{itemTitle}</h2>
      <input type="hidden" name="itemID" value={itemID} />
      <button type="submit">Add to Cart</button>
      {isPending ? "Loading..." : message}
    </form>
  );
}

export default function App() {
  return (
    <>
      <AddToCartForm itemID="1" itemTitle="JavaScript: The Definitive Guide" />
      <AddToCartForm itemID="2" itemTitle="JavaScript: The Good Parts" />
    </>
  );
}

//actions.js
"use server";

export async function addToCart(prevState, queryData) {
  const itemID = queryData.get('itemID');
  if (itemID === "1") {
    return "Added to cart";
  } else {
    // Add a fake delay to make waiting noticeable.
    await new Promise(resolve => {
      setTimeout(resolve, 2000);
    });
    return "Couldn't add to cart: the item is sold out.";
  }
}

• useOptimistic 는 UI를 낙관적으로 업데이트할 수 있게 해주는 React Hook입니다.

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

• React Hook으로, 비동기 작업이 진행 중일 때 다른 상태를 보여줄 수 있게 해줍니다. 인자로 주어진 일부 상태를 받아, 네트워크 요청과 같은 비동기 작업 기간 동안 달라질 수 있는 그 상태의 복사본을 반환합니다. 현재 상태와 작업의 입력을 취하는 함수를 제공하고, 작업이 대기 중일 때 사용할 낙관적인 상태를 반환합니다.
• 이 상태는 “낙관적” 상태라고 불리는데, 실제로 작업을 완료하는 데 시간이 걸리더라도 사용자에게 즉시 작업의 결과를 표시하기 위해 일반적으로 사용됩니다.

ex) 좋아요 user가 좋아요 눌렀을때 ? : frontend > backend > db까지가지 않고 useOptimistic을 써서 낙관적 상태로 표시하고 사용할 수 있다.

• 매개변수

  • state: 작업이 대기 중이지 않을 때 초기에 반환될 값입니다.
  • updateFn(currentState, optimisticValue): 현재 상태와 addOptimistic에 전달된 낙관적인 값을 취하는 함수로, 결과적인 낙관적인 상태를 반환합니다. 순수 함수여야 합니다. updateFn은 두 개의 매개변수를 취합니다. currentState와 optimisticValue. 반환 값은 currentState와 optimisticValue의 병합된 값입니다.

• 반환값

  • optimisticState: 결과적인 낙관적인 상태입니다. 작업이 대기 중이지 않을 때는 state와 동일하며, 그렇지 않은 경우 updateFn에서 반환된 값과 동일합니다.
  • addOptimistic: addOptimistic는 낙관적인 업데이트가 있을 때 호출하는 dispatch 함수입니다. 어떠한 타입의 optimisticValue라는 하나의 인자를 취하며, state와 optimisticValue로 updateFn을 호출합니다.

• useActionState는 폼 액션의 결과를 기반으로 State를 업데이트할 수 있도록 제공하는 Hook입니다.

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

• 상태 정보를 제공받기 위해 Submit 컴포넌트를 <form> 내부에 렌더링해야 합니다. 이 Hook은 폼이 현재 제출하고 있는 상태인지를 의미하는 pending 프로퍼티와 같은 상태 정보를 반환합니다.

• useFormStatus Hook은 form 내부에 렌더링한 컴포넌트에서 호출해야 합니다.

• useFormStatus는 오직 상위 form에 대한 상태 정보만 반환합니다. 동일한 컴포넌트나 자식 컴포넌트에서 렌더링한 form의 상태 정보는 반환하지 않습니다.

• 반환값

  • pending: 불리언 값입니다. true라면 상위 form이 아직 제출 중이라는 것을 의미합니다. 그렇지 않으면 false입니다.

  • data: FormData 인터페이스를 구현한 객체로, 상위 form이 제출하는 데이터를 포함합니다. 활성화된 제출이 없거나 상위에 form이 없는 경우에는 null입니다.

  • method: 'get' 또는 'post' 중 하나의 문자열 값입니다. 이 프로퍼티는 상위 form이 GET 또는 POST HTTP 메서드를 사용하여 제출되는지를 나타냅니다. 기본적으로 form은 GET 메서드를 사용하며 method 프로퍼티를 통해 지정할 수 있습니다.

  • action: 상위 form의 action Prop에 전달한 함수의 레퍼런스입니다. 상위

    이 없는 경우에는 이 프로퍼티는 null입니다. action Prop에 URI 값이 제공되었거나 action prop를 지정하지 않았을 경우에는 status.action은 null입니다.

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

cache

• React 19에서 새롭게 제공되는 cache() API를 활용해 이를 최소화하는 방법을 소개한다. 중복 요청을 방지하고 캐싱을 활용해 불필요한 대기 시간을 줄임으로써, 서버 컴포넌트의 성능을 한층 개선할 수 있다는 점이 핵심이다.
• 서버 컴포넌트에서 데이터 요청이 부모→자식으로 순차적으로 이뤄져 전체 렌더링을 지연시키는 문제가 있는데, 이를 Waterfall Fetching이라 부른다.
• React 19 cache()API를 사용하면 데이터 가져오기 또는 계산 결과를 캐시할 수 있습니다. 이 API는 React Server Components와 함께 사용하도록 설계되었습니다.

const getUser = cache(async (userId: string) => {
  return db.getUser(userId);
})

• Next.js의 프리로드패턴을 사용해 데이터 미리 로드하는 것 방지

Reference :

• Youtubu
• React v.19.1
• cache