Skip to content

Commit 1369aa4

Browse files
lumirlumirlumirlumir
authored
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.
2 parents afd8a22 + f3fea30 commit 1369aa4

File tree

111 files changed

+3681
-4361
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

111 files changed

+3681
-4361
lines changed

โ€Ž.github/CODEOWNERSโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
* @hg-pyun @taehwanno @simsim0709 @gnujoow @b9words @taggon @MaxKim-J @eomttt @lumirlumir
1+
* @hg-pyun @gnujoow @eomttt @lumirlumir

โ€Žpublic/images/team/lauren.jpgโ€Ž

949 KB
Loading

โ€Žsrc/components/Icon/IconRocket.tsxโ€Ž

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*/
4+
5+
import {memo} from 'react';
6+
7+
export const IconRocket = memo<
8+
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
9+
>(function IconRocket({className, size = 'md'}) {
10+
return (
11+
<svg
12+
className={className}
13+
aria-hidden="true"
14+
width={size === 's' ? '1.2em' : '1.5em'}
15+
height={size === 's' ? '1.2em' : '1.5em'}
16+
fill="currentColor"
17+
version="1.1"
18+
viewBox="0 0 1200 1200"
19+
xmlns="http://www.w3.org/2000/svg">
20+
<g fillRule="evenodd">
21+
<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" />
22+
<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" />
23+
<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" />
24+
<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" />
25+
<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" />
26+
<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" />
27+
<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" />
28+
<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" />
29+
</g>
30+
</svg>
31+
);
32+
});

โ€Žsrc/components/Layout/Sidebar/SidebarLink.tsxโ€Ž

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ interface SidebarLinkProps {
1616
selected?: boolean;
1717
title: string;
1818
level: number;
19-
canary?: boolean;
19+
version?: 'canary' | 'major';
2020
icon?: React.ReactNode;
2121
isExpanded?: boolean;
2222
hideArrow?: boolean;
@@ -27,7 +27,7 @@ export function SidebarLink({
2727
href,
2828
selected = false,
2929
title,
30-
canary,
30+
version,
3131
level,
3232
isExpanded,
3333
hideArrow,
@@ -75,10 +75,17 @@ export function SidebarLink({
7575
{/* This here needs to be refactored ofc */}
7676
<div>
7777
{title}{' '}
78-
{canary && (
78+
{version === 'major' && (
79+
<span
80+
title="- This feature is available in React 19 beta and the React canary channel"
81+
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`}>
82+
React 19
83+
</span>
84+
)}
85+
{version === 'canary' && (
7986
<IconCanary
8087
title=" - This feature is available in the latest Canary"
81-
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
88+
className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
8289
/>
8390
)}
8491
</div>

โ€Žsrc/components/Layout/Sidebar/SidebarRouteTree.tsxโ€Ž

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export function SidebarRouteTree({
8787
path,
8888
title,
8989
routes,
90-
canary,
90+
version,
9191
heading,
9292
hasSectionHeader,
9393
sectionHeader,
@@ -121,7 +121,7 @@ export function SidebarRouteTree({
121121
selected={selected}
122122
level={level}
123123
title={title}
124-
canary={canary}
124+
version={version}
125125
isExpanded={isExpanded}
126126
hideArrow={isForceExpanded}
127127
/>
@@ -145,7 +145,7 @@ export function SidebarRouteTree({
145145
selected={selected}
146146
level={level}
147147
title={title}
148-
canary={canary}
148+
version={version}
149149
/>
150150
</li>
151151
);

โ€Žsrc/components/Layout/getRouteMeta.tsxโ€Ž

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export type RouteTag =
1919
export interface RouteItem {
2020
/** Page title (for the sidebar) */
2121
title: string;
22-
/** Optional canary flag for heading */
23-
canary?: boolean;
22+
/** Optional version flag for heading */
23+
version?: 'canary' | 'major';
2424
/** Optional page description for heading */
2525
description?: string;
2626
/* Additional meta info for page tagging */

โ€Žsrc/components/MDX/ExpandableCallout.tsxโ€Ž

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,16 @@ import {IconNote} from '../Icon/IconNote';
88
import {IconWarning} from '../Icon/IconWarning';
99
import {IconPitfall} from '../Icon/IconPitfall';
1010
import {IconCanary} from '../Icon/IconCanary';
11+
import {IconRocket} from '../Icon/IconRocket';
1112

12-
type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary';
13+
type CalloutVariants =
14+
| 'deprecated'
15+
| 'pitfall'
16+
| 'note'
17+
| 'wip'
18+
| 'canary'
19+
| 'major'
20+
| 'rsc';
1321

1422
interface ExpandableCalloutProps {
1523
children: React.ReactNode;
@@ -59,6 +67,22 @@ const variantMap = {
5967
overlayGradient:
6068
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
6169
},
70+
major: {
71+
title: 'React 19',
72+
Icon: IconRocket,
73+
containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
74+
textColor: 'text-blue-50 dark:text-blue-40',
75+
overlayGradient:
76+
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
77+
},
78+
rsc: {
79+
title: 'React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ',
80+
Icon: null,
81+
containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
82+
textColor: 'text-blue-50 dark:text-blue-40',
83+
overlayGradient:
84+
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
85+
},
6286
};
6387

6488
function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
@@ -72,9 +96,11 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
7296
variant.containerClasses
7397
)}>
7498
<h3 className={cn('text-2xl font-display font-bold', variant.textColor)}>
75-
<variant.Icon
76-
className={cn('inline me-3 mb-1 text-lg', variant.textColor)}
77-
/>
99+
{variant.Icon && (
100+
<variant.Icon
101+
className={cn('inline me-2 mb-1 text-lg', variant.textColor)}
102+
/>
103+
)}
78104
{variant.title}
79105
</h3>
80106
<div className="relative">

โ€Žsrc/components/MDX/MDXComponents.tsxโ€Ž

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,14 @@ const Canary = ({children}: {children: React.ReactNode}) => (
9797
<ExpandableCallout type="canary">{children}</ExpandableCallout>
9898
);
9999

100+
const NextMajor = ({children}: {children: React.ReactNode}) => (
101+
<ExpandableCallout type="major">{children}</ExpandableCallout>
102+
);
103+
104+
const RSC = ({children}: {children: React.ReactNode}) => (
105+
<ExpandableCallout type="rsc">{children}</ExpandableCallout>
106+
);
107+
100108
const CanaryBadge = ({title}: {title: string}) => (
101109
<span
102110
title={title}
@@ -111,6 +119,26 @@ const CanaryBadge = ({title}: {title: string}) => (
111119
</span>
112120
);
113121

122+
const NextMajorBadge = ({title}: {title: string}) => (
123+
<span
124+
title={title}
125+
className={
126+
'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'
127+
}>
128+
React 19
129+
</span>
130+
);
131+
132+
const RSCBadge = ({title}: {title: string}) => (
133+
<span
134+
title={title}
135+
className={
136+
'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'
137+
}>
138+
RSC
139+
</span>
140+
);
141+
114142
const Blockquote = ({
115143
children,
116144
...props
@@ -483,6 +511,10 @@ export const MDXComponents = {
483511
Note,
484512
Canary,
485513
CanaryBadge,
514+
NextMajor,
515+
NextMajorBadge,
516+
RSC,
517+
RSCBadge,
486518
PackageImport,
487519
ReadBlogPost,
488520
Recap,

โ€Žsrc/components/MDX/Sandpack/template.tsโ€Ž

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ root.render(
2828
eject: 'react-scripts eject',
2929
},
3030
dependencies: {
31-
react: '^18.0.0',
32-
'react-dom': '^18.0.0',
31+
react: '19.0.0-rc-3edc000d-20240926',
32+
'react-dom': '19.0.0-rc-3edc000d-20240926',
3333
'react-scripts': '^5.0.0',
3434
},
3535
},

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: "์ œ๋กœ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ์†Œ๊ฐœ"
2+
title: "์ œ๋กœ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค"
33
author: Dan Abramov, Lauren Tan, Joseph Savona, and Sebastian Markbage
44
date: 2020/12/21
5-
description: 2020๋…„์€ ๊ธด ํ•œ ํ•ด์˜€์Šต๋‹ˆ๋‹ค. ์—ฐ๋ง์ด ๋‹ค๊ฐ€์˜ด์— ๋”ฐ๋ผ ์ œ๋กœ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ์˜ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ์—ฐ๊ตฌ์— ๋Œ€ํ•œ ํŠน๋ณ„ํ•œ ํ™€๋ฆฌ๋ฐ์ด ์—…๋ฐ์ดํŠธ๋ฅผ ๊ณต์œ ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.
5+
description: 2020๋…„์€ ๊ธด ํ•œ ํ•ด์˜€์Šต๋‹ˆ๋‹ค. ์—ฐ๋ง์ด ๋‹ค๊ฐ€์˜ด์— ๋”ฐ๋ผ ์ œ๋กœ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ์˜ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ ์—ฐ๊ตฌ์— ๋Œ€ํ•œ ํŠน๋ณ„ ์—ฐํœด ์—…๋ฐ์ดํŠธ๋ฅผ ๊ณต์œ ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.
66
---
77

88
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๋…„์€ ๊ธด ํ•œ ํ•ด์˜€์Šต๋‹ˆ๋‹ค. ์—ฐ๋ง์ด ๋‹ค๊ฐ€์˜ด์— ๋”ฐ๋ผ
1111

1212
<Intro>
1313

14-
2020๋…„์€ ๊ธด ํ•œ ํ•ด์˜€์Šต๋‹ˆ๋‹ค. ์—ฐ๋ง์ด ๋‹ค๊ฐ€์˜ด์— ๋”ฐ๋ผ ์ œ๋กœ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ์˜ **React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ** ์—ฐ๊ตฌ์— ๋Œ€ํ•œ ํŠน๋ณ„ํ•œ ํ™€๋ฆฌ๋ฐ์ด ์—…๋ฐ์ดํŠธ๋ฅผ ๊ณต์œ ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.
14+
2020๋…„์€ ๊ธด ํ•œ ํ•ด์˜€์Šต๋‹ˆ๋‹ค. ์—ฐ๋ง์ด ๋‹ค๊ฐ€์˜ด์— ๋”ฐ๋ผ ์ œ๋กœ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ **React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ** ์—ฐ๊ตฌ์— ๋Œ€ํ•œ ํŠน๋ณ„ ์—ฐํœด ์—…๋ฐ์ดํŠธ๋ฅผ ๊ณต์œ ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.
1515

1616
</Intro>
1717

1818
---
1919

20-
React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์†Œ๊ฐœํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ•์—ฐ๊ณผ ๋ฐ๋ชจ๋ฅผ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์—ฐํœด ๊ธฐ๊ฐ„ ๋˜๋Š” ์ƒˆํ•ด์— ์—…๋ฌด๊ฐ€ ์žฌ๊ฐœ๋˜๋Š” ์‹œ์ ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
20+
React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์†Œ๊ฐœํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ•์—ฐ๊ณผ ๋ฐ๋ชจ๋ฅผ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” ์—ฐํœด ๊ธฐ๊ฐ„ ๋˜๋Š” ์ƒˆํ•ด์— ์—…๋ฌด๊ฐ€ ์žฌ๊ฐœ๋˜๋Š” ์‹œ์ ์— ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
2121

2222
<YouTubeIframe src="https://www.youtube.com/embed/TQQPAU21ZUw" />
2323

24-
**React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” ์•„์ง ์—ฐ๊ตฌ ๊ฐœ๋ฐœ ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค.** ์šฐ๋ฆฌ๋Š” ํˆฌ๋ช…์„ฑ์˜ ์ •์‹ ์œผ๋กœ React ์ปค๋ฎค๋‹ˆํ‹ฐ๋กœ๋ถ€ํ„ฐ ์ดˆ๊ธฐ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›๊ธฐ ์œ„ํ•ด ์ด ์ž‘์—…์„ ๊ณต์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆด ๊ฒƒ์ด๋ฏ€๋กœ **์ง€๊ธˆ ๋‹น์žฅ ๋”ฐ๋ผ์žก์•„์•ผ ํ•œ๋‹ค๊ณ  ๋Š๋ผ์ง€ ๋งˆ์„ธ์š”!**
24+
**React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋Š” ์•„์ง ์—ฐ๊ตฌ ๊ฐœ๋ฐœ ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค.** ํˆฌ๋ช…์„ฑ์„ ์œ ์ง€ํ•˜๊ณ  React ์ปค๋ฎค๋‹ˆํ‹ฐ๋กœ๋ถ€ํ„ฐ ์ดˆ๊ธฐ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›๊ธฐ ์œ„ํ•ด ์ž‘์—…์„ ๊ณต์œ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‹œ๊ฐ„์ด ์˜ค๋ž˜ ๊ฑธ๋ฆด ๊ฒƒ์ด๋ฏ€๋กœ **์ง€๊ธˆ ๋‹น์žฅ ๋”ฐ๋ผ์žก์•„์•ผ ํ•œ๋‹ค๊ณ  ๋Š๋ผ์ง€ ๋งˆ์„ธ์š”!**
2525

26-
์ด๋ฅผ ํ™•์ธํ•˜๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ˆœ์„œ๋กœ ์ง„ํ–‰ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
26+
์ด๋ฅผ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ์•„๋ž˜์™€ ๊ฐ™์€ ์ˆœ์„œ๋ฅผ ๋”ฐ๋ฅด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.
2727

2828
1. **๊ฐ•์—ฐ**์„ ์‹œ์ฒญํ•˜์—ฌ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•ด ํ•™์Šตํ•˜๊ณ  ๋ฐ๋ชจ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.
2929

30-
2. **[๋ฐ๋ชจ๋ฅผ ํด๋ก ](http://github.com/reactjs/server-components-demo)** ํ•˜์—ฌ ์ปดํ“จํ„ฐ์—์„œ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”.
30+
2. <strong>[๋ฐ๋ชจ๋ฅผ ํด๋ก ](http://github.com/reactjs/server-components-demo)</strong>ํ•˜์—ฌ ์ปดํ“จํ„ฐ์—์„œ React ์„œ๋ฒ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”.
3131

32-
3. ์ž์„ธํ•œ ๊ธฐ์ˆ  ๋ถ„์„๊ณผ ํ”ผ๋“œ๋ฐฑ์„ ์ œ๊ณตํ•˜๋ ค๋ฉด **[RFC ํ™•์ธํ•˜๊ธฐ(FAQ๊ฐ€ ๋งˆ์ง€๋ง‰์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค)](https://github.com/reactjs/rfcs/pull/188)** ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.
32+
3. ์ž์„ธํ•œ ๊ธฐ์ˆ  ๋ถ„์„๊ณผ ํ”ผ๋“œ๋ฐฑ ์ œ๊ณต์„ ์œ„ํ•ด <strong>[RFC(FAQ๊ฐ€ ๋งˆ์ง€๋ง‰์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค)](https://github.com/reactjs/rfcs/pull/188)</strong>๋ฅผ ์ฝ์–ด๋ณด์„ธ์š”.
3333

3434
RFC ๋˜๋Š” [@reactjs](https://twitter.com/reactjs) ํŠธ์œ„ํ„ฐ ๊ณ„์ •์—์„œ ์—ฌ๋Ÿฌ๋ถ„์˜ ์˜๊ฒฌ์„ ๊ธฐ๋‹ค๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฆ๊ฑฐ์šด ์—ฐ๋ง์—ฐ์‹œ ์•ˆ์ „ํ•˜๊ฒŒ ๋ณด๋‚ด์‹œ๊ณ  ๋‚ด๋…„์— ๋ต™๊ฒ ์Šต๋‹ˆ๋‹ค!

0 commit comments

Comments
ย (0)