Sync with react.dev @ b1a249d (#1114)

🚧 현재 작업 진행중입니다! Merge나 Close 하지 말아주세요.

By @lumirlumir 

---

This PR was automatically generated.

Merge changes from
[react.dev](https://github.com/reactjs/react.dev/commits/main) at
b1a249d

The following files have conflicts and may need new translations:

 * [x] [README.md](/reactjs/react.dev/commits/main/README.md)
* [x]
[src/content/blog/2024/04/25/react-19-upgrade-guide.md](/reactjs/react.dev/commits/main/src/content/blog/2024/04/25/react-19-upgrade-guide.md)
* [x]
[src/content/blog/2024/12/05/react-19.md](/reactjs/react.dev/commits/main/src/content/blog/2024/12/05/react-19.md)
* [x]
[src/content/learn/index.md](/reactjs/react.dev/commits/main/src/content/learn/index.md)
* [x]
[src/content/learn/manipulating-the-dom-with-refs.md](/reactjs/react.dev/commits/main/src/content/learn/manipulating-the-dom-with-refs.md)
* [x]
[src/content/learn/react-compiler.md](/reactjs/react.dev/commits/main/src/content/learn/react-compiler.md)
* [x]
[src/content/learn/react-developer-tools.md](/reactjs/react.dev/commits/main/src/content/learn/react-developer-tools.md)
* [x]
[src/content/reference/react-dom/client/createRoot.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/client/createRoot.md)
* [x]
[src/content/reference/react-dom/client/hydrateRoot.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/client/hydrateRoot.md)
* [x]
[src/content/reference/react-dom/components/common.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/components/common.md)
* [x]
[src/content/reference/react-dom/components/form.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/components/form.md)
* [x]
[src/content/reference/react-dom/components/link.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/components/link.md)
* [x]
[src/content/reference/react-dom/components/meta.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/components/meta.md)
* [x]
[src/content/reference/react-dom/components/script.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/components/script.md)
* [x]
[src/content/reference/react-dom/components/style.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/components/style.md)
* [x]
[src/content/reference/react-dom/components/title.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/components/title.md)
* [x]
[src/content/reference/react-dom/findDOMNode.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/findDOMNode.md)
* [x]
[src/content/reference/react-dom/hooks/index.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/hooks/index.md)
* [x]
[src/content/reference/react-dom/hooks/useFormStatus.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/hooks/useFormStatus.md)
* [x]
[src/content/reference/react-dom/hydrate.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/hydrate.md)
* [x]
[src/content/reference/react-dom/index.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/index.md)
* [x]
[src/content/reference/react-dom/preconnect.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/preconnect.md)
* [x]
[src/content/reference/react-dom/prefetchDNS.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/prefetchDNS.md)
* [x]
[src/content/reference/react-dom/preload.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/preload.md)
* [x]
[src/content/reference/react-dom/preloadModule.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/preloadModule.md)
* [x]
[src/content/reference/react-dom/render.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/render.md)
* [x]
[src/content/reference/react-dom/server/index.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/server/index.md)
* [x]
[src/content/reference/react-dom/server/renderToNodeStream.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/server/renderToNodeStream.md)
* [x]
[src/content/reference/react-dom/server/renderToStaticNodeStream.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/server/renderToStaticNodeStream.md)
* [x]
[src/content/reference/react-dom/server/renderToString.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/server/renderToString.md)
* [x]
[src/content/reference/react-dom/unmountComponentAtNode.md](/reactjs/react.dev/commits/main/src/content/reference/react-dom/unmountComponentAtNode.md)
* [x]
[src/content/reference/react/Component.md](/reactjs/react.dev/commits/main/src/content/reference/react/Component.md)
* [x]
[src/content/reference/react/StrictMode.md](/reactjs/react.dev/commits/main/src/content/reference/react/StrictMode.md)
* [x]
[src/content/reference/react/Suspense.md](/reactjs/react.dev/commits/main/src/content/reference/react/Suspense.md)
* [x]
[src/content/reference/react/cache.md](/reactjs/react.dev/commits/main/src/content/reference/react/cache.md)
* [x]
[src/content/reference/react/createContext.md](/reactjs/react.dev/commits/main/src/content/reference/react/createContext.md)
* [x]
[src/content/reference/react/createElement.md](/reactjs/react.dev/commits/main/src/content/reference/react/createElement.md)
* [x]
[src/content/reference/react/createFactory.md](/reactjs/react.dev/commits/main/src/content/reference/react/createFactory.md)
* [x]
[src/content/reference/react/experimental_taintUniqueValue.md](/reactjs/react.dev/commits/main/src/content/reference/react/experimental_taintUniqueValue.md)
* [x]
[src/content/reference/react/legacy.md](/reactjs/react.dev/commits/main/src/content/reference/react/legacy.md)
* [x]
[src/content/reference/react/startTransition.md](/reactjs/react.dev/commits/main/src/content/reference/react/startTransition.md)
* [x]
[src/content/reference/react/use.md](/reactjs/react.dev/commits/main/src/content/reference/react/use.md)
* [x]
[src/content/reference/react/useActionState.md](/reactjs/react.dev/commits/main/src/content/reference/react/useActionState.md)
* [x]
[src/content/reference/react/useDeferredValue.md](/reactjs/react.dev/commits/main/src/content/reference/react/useDeferredValue.md)
* [x]
[src/content/reference/react/useImperativeHandle.md](/reactjs/react.dev/commits/main/src/content/reference/react/useImperativeHandle.md)
* [x]
[src/content/reference/react/useOptimistic.md](/reactjs/react.dev/commits/main/src/content/reference/react/useOptimistic.md)
* [x]
[src/content/reference/react/useRef.md](/reactjs/react.dev/commits/main/src/content/reference/react/useRef.md)
* [x]
[src/content/reference/react/useTransition.md](/reactjs/react.dev/commits/main/src/content/reference/react/useTransition.md)
* [x]
[src/content/reference/rsc/directives.md](/reactjs/react.dev/commits/main/src/content/reference/rsc/directives.md)
* [x]
[src/content/reference/rsc/server-actions.md](/reactjs/react.dev/commits/main/src/content/reference/rsc/server-actions.md)
* [x]
[src/content/reference/rsc/server-components.md](/reactjs/react.dev/commits/main/src/content/reference/rsc/server-components.md)
* [x]
[src/content/reference/rsc/use-client.md](/reactjs/react.dev/commits/main/src/content/reference/rsc/use-client.md)
* [x]
[src/content/reference/rsc/use-server.md](/reactjs/react.dev/commits/main/src/content/reference/rsc/use-server.md)
* [x]
[src/content/versions.md](/reactjs/react.dev/commits/main/src/content/versions.md)
* [x]
[src/sidebarReference.json](/reactjs/react.dev/commits/main/src/sidebarReference.json)

Please fix the conflicts by pushing new commits to this pull request,
either by editing the files directly on GitHub or by checking out this
branch.

## DO NOT SQUASH MERGE THIS PULL REQUEST!

Doing so will "erase" the commits from main and cause them to show up as
conflicts the next time we merge.

.github/CODEOWNERS

@@ -1 +1 @@
-*       @hg-pyun @taehwanno @simsim0709 @gnujoow @b9words @taggon @MaxKim-J @eomttt @lumirlumir
+*       @hg-pyun @gnujoow @eomttt @lumirlumir

src/components/Icon/IconRocket.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import {memo} from 'react';
+
+export const IconRocket = memo<
+  JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
+>(function IconRocket({className, size = 'md'}) {
+  return (
+    <svg
+      className={className}
+      aria-hidden="true"
+      width={size === 's' ? '1.2em' : '1.5em'}
+      height={size === 's' ? '1.2em' : '1.5em'}
+      fill="currentColor"
+      version="1.1"
+      viewBox="0 0 1200 1200"
+      xmlns="http://www.w3.org/2000/svg">
+      <g fillRule="evenodd">
+        <path d="m911.8 288.2c65.051 65.051 65.051 170.6 0 235.65-65.051 65.051-170.6 65.051-235.65 0-65.051-65.051-65.051-170.6 0-235.65 65.051-65.051 170.6-65.051 235.65 0zm-53.051 53.051c-35.75-35.801-93.801-35.801-129.55 0-35.801 35.75-35.801 93.801 0 129.55 35.75 35.801 93.801 35.801 129.55 0 35.801-35.75 35.801-93.801 0-129.55z" />
+        <path d="m1122.2 103.4s96.648 328.1-194.4 619.1c-130.75 130.75-303.25 226.75-440.75 250.5-12.102 2.0508-24.449-1.8984-33.102-10.648l-231.55-234.8c-8.6484-8.8008-12.449-21.301-10.102-33.398 26.102-135.4 135.45-292.2 265.2-421.95 291-291.05 619.1-194.4 619.1-194.4 12.352 3.6016 22 13.25 25.602 25.602zm-67.5 41.898c-70.898-12.898-308.6-35.602-524.15 179.9-112.35 112.35-210.4 245.4-240.4 364.25 0 0 203.05 205.9 203.1 205.9 121.75-26.852 268.4-112.75 381.55-225.9 215.5-215.55 192.8-453.25 179.9-524.15z" />
+        <path d="m151.55 543.85 124 20.648c20.398 3.3984 34.25 22.75 30.801 43.148-3.3984 20.449-22.699 34.25-43.148 30.852l-144.35-24.051c-22.148-3.6992-40.699-18.949-48.602-40-7.9492-21.051-4.0508-44.699 10.199-62.148l122.85-150.15c15.051-18.398 36.898-30 60.551-32.148l179.55-16.301c20.602-1.8984 38.852 13.352 40.75 33.949 1.8516 20.602-13.352 38.852-33.949 40.75l-179.55 16.301c-3.6484 0.35156-7 2.1016-9.3008 4.9492z" />
+        <path d="m656.15 1048.4 134.2-109.8c2.8516-2.3008 4.6016-5.6484 4.9492-9.3008l16.301-179.55c1.8984-20.602 20.148-35.801 40.75-33.949 20.602 1.8984 35.852 20.148 33.949 40.75l-16.301 179.55c-2.1484 23.648-13.75 45.5-32.148 60.551l-150.15 122.85c-17.449 14.25-41.102 18.148-62.148 10.199-21.051-7.8984-36.301-26.449-40-48.602l-29.25-175.7c-3.3984-20.398 10.398-39.75 30.801-43.148 20.449-3.3984 39.75 10.449 43.148 30.852l25.898 155.3z" />
+        <path d="m310.9 560.4c-14.648-14.648-14.648-38.398 0-53.051 14.648-14.648 38.398-14.648 53.051 0l328.7 328.7c14.648 14.648 14.648 38.398 0 53.051-14.648 14.648-38.398 14.648-53.051 0z" />
+        <path d="m383.95 982.15c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-91.352 91.301c-14.602 14.648-38.398 14.648-53 0-14.648-14.602-14.648-38.398 0-53z" />
+        <path d="m237.85 909.1c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-127.85 127.85c-14.648 14.648-38.398 14.648-53.051 0-14.648-14.648-14.648-38.398 0-53.051z" />
+        <path d="m164.8 763c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-91.352 91.301c-14.602 14.648-38.398 14.648-53 0-14.648-14.602-14.648-38.398 0-53z" />
+      </g>
+    </svg>
+  );
+});

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -16,7 +16,7 @@ interface SidebarLinkProps {
   selected?: boolean;
   title: string;
   level: number;
-  canary?: boolean;
+  version?: 'canary' | 'major';
   icon?: React.ReactNode;
   isExpanded?: boolean;
   hideArrow?: boolean;
@@ -27,7 +27,7 @@ export function SidebarLink({
   href,
   selected = false,
   title,
-  canary,
+  version,
   level,
   isExpanded,
   hideArrow,
@@ -75,10 +75,17 @@ export function SidebarLink({
       {/* This here needs to be refactored ofc */}
       <div>
         {title}{' '}
-        {canary && (
+        {version === 'major' && (
+          <span
+            title="- This feature is available in React 19 beta and the React canary channel"
+            className={`text-xs px-1 ms-1 rounded bg-gray-10 dark:bg-gray-40 dark:bg-opacity-20 text-gray-40 dark:text-gray-40`}>
+            React 19
+          </span>
+        )}
+        {version === 'canary' && (
           <IconCanary
             title=" - This feature is available in the latest Canary"
-            className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
+            className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
           />
         )}
       </div>

src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -87,7 +87,7 @@ export function SidebarRouteTree({
             path,
             title,
             routes,
-            canary,
+            version,
             heading,
             hasSectionHeader,
             sectionHeader,
@@ -121,7 +121,7 @@ export function SidebarRouteTree({
                   selected={selected}
                   level={level}
                   title={title}
-                  canary={canary}
+                  version={version}
                   isExpanded={isExpanded}
                   hideArrow={isForceExpanded}
                 />
@@ -145,7 +145,7 @@ export function SidebarRouteTree({
                   selected={selected}
                   level={level}
                   title={title}
-                  canary={canary}
+                  version={version}
                 />
               </li>
             );

src/components/Layout/getRouteMeta.tsx

@@ -19,8 +19,8 @@ export type RouteTag =
 export interface RouteItem {
   /** Page title (for the sidebar) */
   title: string;
-  /** Optional canary flag for heading */
-  canary?: boolean;
+  /** Optional version flag for heading */
+  version?: 'canary' | 'major';
   /** Optional page description for heading */
   description?: string;
   /* Additional meta info for page tagging */

src/components/MDX/ExpandableCallout.tsx

@@ -8,8 +8,16 @@ import {IconNote} from '../Icon/IconNote';
 import {IconWarning} from '../Icon/IconWarning';
 import {IconPitfall} from '../Icon/IconPitfall';
 import {IconCanary} from '../Icon/IconCanary';
+import {IconRocket} from '../Icon/IconRocket';
 
-type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary';
+type CalloutVariants =
+  | 'deprecated'
+  | 'pitfall'
+  | 'note'
+  | 'wip'
+  | 'canary'
+  | 'major'
+  | 'rsc';
 
 interface ExpandableCalloutProps {
   children: React.ReactNode;
@@ -59,6 +67,22 @@ const variantMap = {
     overlayGradient:
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
+  major: {
+    title: 'React 19',
+    Icon: IconRocket,
+    containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
+    textColor: 'text-blue-50 dark:text-blue-40',
+    overlayGradient:
+      'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+  },
+  rsc: {
+    title: 'React 서버 컴포넌트',
+    Icon: null,
+    containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
+    textColor: 'text-blue-50 dark:text-blue-40',
+    overlayGradient:
+      'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
+  },
 };
 
 function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
@@ -72,9 +96,11 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
         variant.containerClasses
       )}>
       <h3 className={cn('text-2xl font-display font-bold', variant.textColor)}>
-        <variant.Icon
-          className={cn('inline me-3 mb-1 text-lg', variant.textColor)}
-        />
+        {variant.Icon && (
+          <variant.Icon
+            className={cn('inline me-2 mb-1 text-lg', variant.textColor)}
+          />
+        )}
         {variant.title}
       </h3>
       <div className="relative">

src/components/MDX/MDXComponents.tsx

@@ -97,6 +97,14 @@ const Canary = ({children}: {children: React.ReactNode}) => (
   <ExpandableCallout type="canary">{children}</ExpandableCallout>
 );
 
+const NextMajor = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="major">{children}</ExpandableCallout>
+);
+
+const RSC = ({children}: {children: React.ReactNode}) => (
+  <ExpandableCallout type="rsc">{children}</ExpandableCallout>
+);
+
 const CanaryBadge = ({title}: {title: string}) => (
   <span
     title={title}
@@ -111,6 +119,26 @@ const CanaryBadge = ({title}: {title: string}) => (
   </span>
 );
 
+const NextMajorBadge = ({title}: {title: string}) => (
+  <span
+    title={title}
+    className={
+      'text-base font-display px-2 py-0.5 font-bold bg-blue-10 dark:bg-blue-60 text-gray-60 dark:text-gray-10 rounded'
+    }>
+    React 19
+  </span>
+);
+
+const RSCBadge = ({title}: {title: string}) => (
+  <span
+    title={title}
+    className={
+      'text-base font-display px-2 py-0.5 font-bold bg-blue-10 dark:bg-blue-50 text-gray-60 dark:text-gray-10 rounded'
+    }>
+    RSC
+  </span>
+);
+
 const Blockquote = ({
   children,
   ...props
@@ -483,6 +511,10 @@ export const MDXComponents = {
   Note,
   Canary,
   CanaryBadge,
+  NextMajor,
+  NextMajorBadge,
+  RSC,
+  RSCBadge,
   PackageImport,
   ReadBlogPost,
   Recap,

src/components/MDX/Sandpack/template.ts

@@ -28,8 +28,8 @@ root.render(
           eject: 'react-scripts eject',
         },
         dependencies: {
-          react: '^18.0.0',
-          'react-dom': '^18.0.0',
+          react: '19.0.0-rc-3edc000d-20240926',
+          'react-dom': '19.0.0-rc-3edc000d-20240926',
           'react-scripts': '^5.0.0',
         },
       },

src/content/blog/2020/12/21/data-fetching-with-react-server-components.md

@@ -1,8 +1,8 @@
 ---
-title: "제로 번들 사이즈 React 서버 컴포넌트 소개"
+title: "제로 번들 사이즈 React 서버 컴포넌트를 소개합니다"
 author: Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbage
 date: 2020/12/21
-description: 2020년은 긴 한 해였습니다. 연말이 다가옴에 따라 제로 번들 사이즈의 React 서버 컴포넌트 연구에 대한 특별한 홀리데이 업데이트를 공유하고자 합니다.
+description: 2020년은 긴 한 해였습니다. 연말이 다가옴에 따라 제로 번들 사이즈의 React 서버 컴포넌트 연구에 대한 특별 연휴 업데이트를 공유하고자 합니다.
 ---
 
 2020년 12월 21일, [Dan Abramov](https://twitter.com/dan_abramov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS), [Sebastian Markbåge](https://twitter.com/sebmarkbage)
@@ -11,24 +11,24 @@ description: 2020년은 긴 한 해였습니다. 연말이 다가옴에 따라 
 
 <Intro>
 
-2020년은 긴 한 해였습니다. 연말이 다가옴에 따라 제로 번들 사이즈의 **React 서버 컴포넌트** 연구에 대한 특별한 홀리데이 업데이트를 공유하고자 합니다.
+2020년은 긴 한 해였습니다. 연말이 다가옴에 따라 제로 번들 사이즈 **React 서버 컴포넌트** 연구에 대한 특별 연휴 업데이트를 공유하고자 합니다.
 
 </Intro>
 
 ---
 
-React 서버 컴포넌트를 소개하기 위해 강연과 데모를 준비했습니다. 이는 연휴 기간 또는 새해에 업무가 재개되는 시점에서 확인할 수 있습니다.
+React 서버 컴포넌트를 소개하기 위해 강연과 데모를 준비했습니다. 이는 연휴 기간 또는 새해에 업무가 재개되는 시점에 확인할 수 있습니다.
 
 <YouTubeIframe src="https://www.youtube.com/embed/TQQPAU21ZUw" />
 
-**React 서버 컴포넌트는 아직 연구 개발 단계입니다.** 우리는 투명성의 정신으로 React 커뮤니티로부터 초기 피드백을 받기 위해 이 작업을 공유하고 있습니다. 시간이 오래 걸릴 것이므로 **지금 당장 따라잡아야 한다고 느끼지 마세요!**
+**React 서버 컴포넌트는 아직 연구 개발 단계입니다.** 투명성을 유지하고 React 커뮤니티로부터 초기 피드백을 받기 위해 작업을 공유하고 있습니다. 시간이 오래 걸릴 것이므로 **지금 당장 따라잡아야 한다고 느끼지 마세요!**
 
-이를 확인하려면 다음과 같은 순서로 진행하시면 됩니다.
+이를 확인하기 위해 아래와 같은 순서를 따르는 것을 추천합니다.
 
 1. **강연**을 시청하여 React 서버 컴포넌트에 대해 학습하고 데모를 확인하세요.
 
-2. **[데모를 클론](http://github.com/reactjs/server-components-demo)** 하여 컴퓨터에서 React 서버 컴포넌트를 사용해 보세요.
+2. <strong>[데모를 클론](http://github.com/reactjs/server-components-demo)</strong>하여 컴퓨터에서 React 서버 컴포넌트를 사용해 보세요.
 
-3. 자세한 기술 분석과 피드백을 제공하려면 **[RFC 확인하기(FAQ가 마지막에 포함되어 있습니다)](https://github.com/reactjs/rfcs/pull/188)** 를 참조하세요.
+3. 자세한 기술 분석과 피드백 제공을 위해 <strong>[RFC(FAQ가 마지막에 포함되어 있습니다)](https://github.com/reactjs/rfcs/pull/188)</strong>를 읽어보세요.
 
 RFC 또는 [@reactjs](https://twitter.com/reactjs) 트위터 계정에서 여러분의 의견을 기다리겠습니다. 즐거운 연말연시 안전하게 보내시고 내년에 뵙겠습니다!