{title}{' '}
- {canary && (
+ {version === 'major' && (
+
+ React 19
+
+ )}
+ {version === 'canary' && (
)}
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx
index 3f058073c..54f02b925 100644
--- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx
+++ b/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}
/>
);
diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx
index 3564dd738..b3d14725d 100644
--- a/src/components/Layout/getRouteMeta.tsx
+++ b/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 */
diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx
index d1916da8a..dd7199d15 100644
--- a/src/components/MDX/ExpandableCallout.tsx
+++ b/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
)}>
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index 29c96a0c7..10fb5ba82 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -97,6 +97,14 @@ const Canary = ({children}: {children: React.ReactNode}) => (
{children}
);
+const NextMajor = ({children}: {children: React.ReactNode}) => (
+
{children}
+);
+
+const RSC = ({children}: {children: React.ReactNode}) => (
+
{children}
+);
+
const CanaryBadge = ({title}: {title: string}) => (
(
);
+const NextMajorBadge = ({title}: {title: string}) => (
+
+ React 19
+
+);
+
+const RSCBadge = ({title}: {title: string}) => (
+
+ RSC
+
+);
+
const Blockquote = ({
children,
...props
@@ -483,6 +511,10 @@ export const MDXComponents = {
Note,
Canary,
CanaryBadge,
+ NextMajor,
+ NextMajorBadge,
+ RSC,
+ RSCBadge,
PackageImport,
ReadBlogPost,
Recap,
diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts
index 9ead18a14..42f02f6a6 100644
--- a/src/components/MDX/Sandpack/template.ts
+++ b/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',
},
},
diff --git a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md
index 78709dc61..190461156 100644
--- a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md
+++ b/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년은 긴 한 해였습니다. 연말이 다가옴에 따라
-2020년은 긴 한 해였습니다. 연말이 다가옴에 따라 제로 번들 사이즈의 **React 서버 컴포넌트** 연구에 대한 특별한 홀리데이 업데이트를 공유하고자 합니다.
+2020년은 긴 한 해였습니다. 연말이 다가옴에 따라 제로 번들 사이즈 **React 서버 컴포넌트** 연구에 대한 특별 연휴 업데이트를 공유하고자 합니다.
---
-React 서버 컴포넌트를 소개하기 위해 강연과 데모를 준비했습니다. 이는 연휴 기간 또는 새해에 업무가 재개되는 시점에서 확인할 수 있습니다.
+React 서버 컴포넌트를 소개하기 위해 강연과 데모를 준비했습니다. 이는 연휴 기간 또는 새해에 업무가 재개되는 시점에 확인할 수 있습니다.
-**React 서버 컴포넌트는 아직 연구 개발 단계입니다.** 우리는 투명성의 정신으로 React 커뮤니티로부터 초기 피드백을 받기 위해 이 작업을 공유하고 있습니다. 시간이 오래 걸릴 것이므로 **지금 당장 따라잡아야 한다고 느끼지 마세요!**
+**React 서버 컴포넌트는 아직 연구 개발 단계입니다.** 투명성을 유지하고 React 커뮤니티로부터 초기 피드백을 받기 위해 작업을 공유하고 있습니다. 시간이 오래 걸릴 것이므로 **지금 당장 따라잡아야 한다고 느끼지 마세요!**
-이를 확인하려면 다음과 같은 순서로 진행하시면 됩니다.
+이를 확인하기 위해 아래와 같은 순서를 따르는 것을 추천합니다.
1. **강연**을 시청하여 React 서버 컴포넌트에 대해 학습하고 데모를 확인하세요.
-2. **[데모를 클론](http://github.com/reactjs/server-components-demo)** 하여 컴퓨터에서 React 서버 컴포넌트를 사용해 보세요.
+2.
[데모를 클론](http://github.com/reactjs/server-components-demo)하여 컴퓨터에서 React 서버 컴포넌트를 사용해 보세요.
-3. 자세한 기술 분석과 피드백을 제공하려면 **[RFC 확인하기(FAQ가 마지막에 포함되어 있습니다)](https://github.com/reactjs/rfcs/pull/188)** 를 참조하세요.
+3. 자세한 기술 분석과 피드백 제공을 위해
[RFC(FAQ가 마지막에 포함되어 있습니다)](https://github.com/reactjs/rfcs/pull/188)를 읽어보세요.
RFC 또는 [@reactjs](https://twitter.com/reactjs) 트위터 계정에서 여러분의 의견을 기다리겠습니다. 즐거운 연말연시 안전하게 보내시고 내년에 뵙겠습니다!
diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md
index e87d9740e..c9719277e 100644
--- a/src/content/blog/2021/06/08/the-plan-for-react-18.md
+++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md
@@ -1,8 +1,8 @@
---
-title: "React 18 계획"
+title: "React 18에 대한 계획"
author: Andrew Clark, Brian Vaughn, Christine Abernathy, Dan Abramov, Rachel Nabors, Rick Hanlon, Sebastian Markbage, and Seth Webster
date: 2021/06/08
-description: React 팀은 몇 가지 업데이트를 공유하게 되어 기쁩니다. 다음 주요 버전이 될 React 18 릴리즈에 대한 작업을 시작했습니다. 커뮤니티가 React 18의 새로운 기능을 점진적으로 채택할 수 있도록 준비하기 위해 워킹 그룹을 만들었습니다. 라이브러리 작성자가 사용해 보고 피드백을 제공할 수 있도록 React 18 알파를 게시했습니다...
+description: React 팀은 몇 가지 업데이트를 공유하게 되어 기쁩니다. 다음 주요 버전이 될 React 18 릴리즈에 대한 작업을 시작했습니다. 커뮤니티가 React 18의 새로운 기능을 점진적으로 채택할 수 있도록 준비하기 위해 워킹 그룹을 만들었습니다. 라이브러리 작성자가 사용해 보고 피드백을 제공할 수 있도록 React 18 Alpha를 게시했습니다...
---
2021년 6월 8일, [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://twitter.com/dan_abramov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), [Seth Webster](https://twitter.com/sethwebster)
@@ -13,11 +13,11 @@ description: React 팀은 몇 가지 업데이트를 공유하게 되어 기쁩
React 팀은 몇 가지 업데이트를 공유하게 되어 기쁩니다.
-1. 다음 주요 버전이 될 React 18 릴리즈에 대한 작업을 시작했습니다.
-2. 커뮤니티가 React 18의 새로운 기능을 점진적으로 채택할 수 있도록 준비하기 위해 워킹 그룹을 만들었습니다.
-3. 라이브러리 작성자가 사용해 보고 피드백을 제공할 수 있도록 React 18 알파를 게시했습니다.
+1. 다음번 주
Major, 主 버전이 될 React 18 릴리즈에 대한 작업을 시작했습니다.
+2. 커뮤니티가 React 18의 새로운 기능을 점진적으로 채택할 수 있도록 준비하기 위해 워킹 그룹
Working Group을 만들었습니다.
+3. 라이브러리 작성자가 사용해 보고 피드백을 제공할 수 있도록 React 18 Alpha를 게시했습니다.
-이 업데이트는 주로 서드파티 라이브러리 관리자를 대상으로 합니다. React를 배우거나 가르치거나 사용자 애플리케이션을 빌드하는 데 사용하는 경우 이 게시물을 무시해도 됩니다. 하지만 궁금한 점이 있으시다면 React 18 워킹 그룹에서 토론을 따라가셔도 좋습니다!
+이번 업데이트는 주로 서드파티
Third Party 라이브러리 관리자를 대상으로 합니다. React를 배우거나 가르치거나, 혹은 사용자 애플리케이션을 빌드하는 데 사용하는 경우 이 게시물을 무시해도 됩니다. 하지만 궁금한 점이 있으시다면 React 18 워킹 그룹의 토론에 참여하셔도 좋습니다!
---
@@ -25,47 +25,47 @@ React 팀은 몇 가지 업데이트를 공유하게 되어 기쁩니다.
## React 18의 새로운 기능 {/*whats-coming-in-react-18*/}
-React 18이 출시되면 [자동 일괄 처리](https://github.com/reactwg/react-18/discussions/21)와 같은 즉시 사용한 개선 사항 및 [`startTransition`](https://github.com/reactwg/react-18/discussions/41)과 같은 새로운 API, `React.lazy`를 기본으로 지원하는 [새로운 스트리밍 서버 렌더러](https://github.com/reactwg/react-18/discussions/37)가 포함될 예정입니다.
+React 18이 출시되면 [자동 일괄 처리
Automatic Batching](https://github.com/reactwg/react-18/discussions/21)와 같은 기본 개선 사항 및 [`startTransition`](https://github.com/reactwg/react-18/discussions/41)과 같은 새로운 API, `React.lazy`를 기본적으로 지원하는 [새로운 스트리밍 서버 렌더러
Streaming Server Renderer](https://github.com/reactwg/react-18/discussions/37)가 포함될 예정입니다.
-이러한 기능은 React 18에 추가되는 새로운 옵트인 메커니즘 덕분에 가능합니다. 이를 "동시 렌더링"이라고 하며, 이 기능을 통해 React는 동시에 여러 버전의 UI를 준비할 수 있습니다. 이 변경 사항은 대부분 보이지 않지만, 앱의 실제 성능과 체감 성능을 모두 개선할 수 있는 새로운 가능성을 열어줍니다.
+이러한 기능들은 React 18에 추가될 새로운 선택적
Opt-In 메커니즘 덕분에 가능해졌습니다. 이를 "동시성 렌더링
Concurrent Rendering"이라고 하며, 이 기능을 통해 React는 동시에 여러 버전의 UI를 준비할 수 있습니다. 이러한 변경 사항들은 대부분 직접 볼 수는 없지만, 앱의 실제 성능과 체감 성능을 모두 개선할 수 있는 새로운 가능성을 열어줍니다.
-React의 미래에 대한 저희의 연구를 계속 지켜보셨다면(그럴 필요는 없습니다!) "동시 모드"라는 기능에 대해 들어보셨거나 앱이 손상될 수 있다는 이야기를 들어보셨을 것입니다. 이러한 커뮤니티의 피드백을 반영하여 점진적인 도입을 위해 업그레이드 전략을 재설계했습니다. "모드"를 모두 사용하거나 사용하지 않는 대신, 동시 렌더링은 새로운 기능 중 하나에 의해 트리거되는 업데이트에 대해서만 활성화됩니다. 즉, **실제로는 재작성 없이 React 18을 도입하고 자신의 속도에 맞춰 새로운 기능을 사용해 볼 수 있습니다**.
+React의 미래에 대한 저희들의 연구를 계속 지켜보셨다면(물론, 그럴 필요는 없습니다!), "동시성 모드
Concurrent Mode"라는 기능에 대해 들어보셨거나, 그것이 여러분들의 앱을 망칠 수 있다는 이야기를 들으셨을 수도 있습니다. 이러한 커뮤니티의 피드백을 반영하여 점진적인 도입을 위한 업그레이드 전략을 재설계했습니다. "모드"를 모두 사용하거나 사용하지 않는 대신, 동시성 렌더링
Concurrent Rendering은 새로운 기능 중 하나에 의해 트리거되는 업데이트에 대해서만 활성화됩니다. 즉, **재작성 없이 React 18을 도입하고 자신의 속도에 맞춰 새로운 기능들을 사용해 볼 수 있습니다**.
## 점진적인 도입 전략 {/*a-gradual-adoption-strategy*/}
-React 18의 동시성은 옵트인 방식이므로 컴포넌트 동작에 대한 중요한 변경 사항은 없습니다. **애플리케이션 코드를 거의 또는 전혀 변경하지 않고도 일반적인 주요 React 릴리즈와 비슷한 수준의 노력으로 React 18로 업그레이드할 수 있습니다**. 여러 앱을 React 18로 전환한 경험에 비추어 볼 때, 많은 사용자가 하루 오후 안에 업그레이드할 수 있을 것으로 예상합니다.
+React 18의 동시성은 선택적
Opt-In이므로 컴포넌트 동작에 대한 중요 변경 사항
Breaking Changes은 없습니다. **애플리케이션 코드를 거의 또는 전혀 변경하지 않고도, 일반적인 주요 React 릴리즈와 비슷한 수준의 노력으로 React 18로 업그레이드할 수 있습니다**. 여러 앱을 React 18로 전환한 경험에 비추어 볼 때, 많은 사용자가 반나절 안에 업그레이드할 수 있을 것으로 예상합니다.
-우리는 Facebook에서 수만 개의 컴포넌트에 동시 기능을 성공적으로 제공했으며, 경험상 대부분의 React 컴포넌트가 추가 변경 없이 "바로 작동"하는 것으로 나타났습니다. 전체 커뮤니티를 위한 원활한 업그레이드가 될 수 있도록 최선을 다하고 있으며, 오늘 React 18 워킹 그룹을 발표합니다.
+우리는 페이스북
Facebook에서 수만 개의 컴포넌트에 동시성 기능들을 성공적으로 배포했으며, 경험상 대부분의 React 컴포넌트가 추가 변경 없이 "바로 작동"하였습니다. 커뮤니티 전체를 위한 원활한 업그레이드가 될 수 있도록 최선을 다하고 있으며, 오늘 React 18 워킹 그룹을 발표합니다.
## 커뮤니티와의 협력 {/*working-with-the-community*/}
-이번 릴리즈에서는 새로운 시도를 하고 있습니다. React 커뮤니티의 전문가, 개발자, 라이브러리 작성자, 교육자들로 구성된 패널을 [React 18 워킹 그룹](https://github.com/reactwg/react-18)에 초대하여 피드백을 제공하고, 질문하고, 릴리즈에 대해 협업할 수 있도록 했습니다. 이번 소규모 그룹에는 원하는 모든 분을 초대할 수는 없었지만, 이 실험이 성공한다면 앞으로 더 많은 분을 초대할 수 있기를 바랍니다!
+이번 릴리즈에서는 새로운 시도를 하고 있습니다. React 커뮤니티의 전문가, 개발자, 라이브러리 작성자, 교육자들로 구성된 패널을 [React 18 워킹 그룹](https://github.com/reactwg/react-18)에 초대하여 피드백을 제공하고, 질문하고, 릴리즈에 대해 협업할 수 있도록 했습니다. 이번 소규모 그룹에 원하는 모든 분들을 초대할 수는 없었지만, 이번 실험이 성공하여 앞으로 더 많은 분을 초대할 수 있기를 바랍니다!
-**React 18 워킹 그룹의 목표는 기본 애플리케이션과 라이브러리가 React 18을 원활하고 점진적으로 채택할 수 있도록 생태계를 준비하는 것입니다.** 워킹 그룹은 [GitHub 토론](https://github.com/reactwg/react-18/discussions)에서 호스팅되며, 일반인도 열람할 수 있습니다. 워킹 그룹의 구성원은 피드백을 남기고, 질문하고, 아이디어를 공유할 수 있습니다. 핵심 팀도 토론 리포지토리를 사용하여 연구 결과를 공유할 것입니다. 안정 버전 출시가 가까워지면 중요한 정보도 이 블로그에 게시될 예정입니다.
+**React 18 워킹 그룹의 목표는 기본 애플리케이션과 라이브러리가 React 18을 원활하고 점진적으로 채택할 수 있는 생태계를 준비하는 것입니다.** 워킹 그룹은 [깃허브 토론
GitHub Discussions](https://github.com/reactwg/react-18/discussions)에서 호스팅되며, 일반인도 열람할 수 있습니다. 워킹 그룹의 구성원은 피드백을 남기고, 질문하고, 아이디어를 공유할 수 있습니다. 핵심 팀도 토론 저장소
Repository를 사용하여 연구 결과를 공유할 것입니다. 안정적인 버전의 출시가 가까워지면, 중요 정보들을 블로그에 게시할 것입니다.
-React 18로 업그레이드하는 방법이나 릴리즈에 대한 추가 리소스에 대한 자세한 내용은 [React 18 발표 게시물](https://github.com/reactwg/react-18/discussions/4)을 참고하세요.
+React 18로 업그레이드하는 방법이나, 릴리즈에 대한 추가적인 정보들은 [React 18 발표 게시물](https://github.com/reactwg/react-18/discussions/4)을 참고하세요.
## React 18 워킹 그룹에 접근하기 {/*accessing-the-react-18-working-group*/}
-누구나 [React 18 워킹 그룹 리포지토리](https://github.com/reactwg/react-18)에서 토론 내용을 읽을 수 있습니다.
+누구나 [React 18 워킹 그룹 저장소](https://github.com/reactwg/react-18)에서 토론 내용을 읽을 수 있습니다.
-워킹 그룹에 대한 초기 관심이 급증할 것으로 예상되므로 초대받은 회원만 스레드를 만들거나 댓글을 달 수 있습니다. 그러나 토론글은 모든 사람에게 완전히 공개되므로 모든 사람이 동일한 정보에 접근할 수 있습니다. 이는 워킹 그룹 구성원을 위한 생산적인 환경을 조성하는 동시에 더 많은 커뮤니티와의 투명성을 유지하는 좋은 절충안이라고 생각합니다.
+워킹 그룹에 대한 초기 관심이 급증할 것으로 예상되므로, 초대받은 회원만 스레드를 만들거나 댓글을 달 수 있습니다. 그러나, 토론글은 모든 사람에게 완전히 공개되므로 모든 사람이 동일한 정보에 접근할 수 있습니다. 이는 워킹 그룹 구성원을 위한 생산적인 환경을 조성하는 동시에 더 많은 커뮤니티와의 투명성을 유지하는 좋은 절충안이라 생각합니다.
언제나 그렇듯이 [이슈 트래커](https://github.com/facebook/react/issues)에 버그 보고서, 질문 및 일반적인 피드백을 제출할 수 있습니다.
-## 지금 React 18 알파를 사용해 보는 방법 {/*how-to-try-react-18-alpha-today*/}
+## 지금 React 18 Alpha를 사용하는 방법 {/*how-to-try-react-18-alpha-today*/}
-새로운 알파는 [정기적으로 `@alpha` 태그를 사용하여 npm에 게시됩니다](https://github.com/reactwg/react-18/discussions/9). 이러한 릴리즈는 메인 리포지토리에 대한 가장 최근 커밋을 사용하여 빌드됩니다. 기능이나 버그 수정이 병합되면 다음 주일에 알파에 표시됩니다.
+새로운 Alpha는 [정기적으로 `@alpha` 태그를 통해 npm에 배포됩니다](https://github.com/reactwg/react-18/discussions/9). 이러한 릴리즈는 메인 저장소
Main Repo에 대한 가장 최근 커밋을 사용하여 빌드됩니다. 기능 혹은 버그 수정이 병합되면 그 다음주에 Alpha로 배포됩니다.
-알파 릴리즈 사이에는 중요한 동작 또는 API 변경이 있을 수 있습니다. **알파 릴리즈는 사용자를 대상으로 하는 프로덕션 애플리케이션에는 권장되지 않는다는 점**을 기억하세요.
+Alpha 릴리즈 사이에는 중요한 동작 또는 API 변경이 있을 수 있습니다. **Alpha 릴리즈는 사용자를 대상으로 하는 프로덕션 애플리케이션에 권장하지 않는다는 점**을 기억하세요.
## 예상 React 18 릴리즈 일정 {/*projected-react-18-release-timeline*/}
-구체적인 릴리즈 날짜는 예정되어 있지 않지만, 대부분의 프로덕션 애플리케이션에서 React 18을 사용할 수 있게 되려면 몇 달 동안 피드백과 반복 작업을 거쳐야 할 것으로 예상됩니다.
+구체적인 릴리즈 날짜는 예정되어 있지 않지만, 대부분의 프로덕션 애플리케이션에서 React 18을 사용할 수 있게 되려면 몇 달 동안 피드백과 반복 작업을 거쳐야 할 것으로 예상합니다.
-* 라이브러리 알파: 오늘 사용 가능
+* 라이브러리 Alpha: 오늘 사용 가능
* 공개 베타: 최소 몇 개월
-* 릴리즈 후보 (RC): 베타 출시 후 최소 몇 주 후
+* 릴리즈 후보 (RC): Beta 출시 후 최소 몇 주 후
* 일반 사용 가능: RC 이후 최소 몇 주 후
예상 릴리즈 일정에 대한 자세한 내용은 [워킹 그룹에서 확인](https://github.com/reactwg/react-18/discussions/9)할 수 있습니다. 공개 릴리즈에 가까워지면 이 블로그에 업데이트를 게시하겠습니다.
diff --git a/src/content/blog/2021/12/17/react-conf-2021-recap.md b/src/content/blog/2021/12/17/react-conf-2021-recap.md
index d512b6dbf..70ae528ea 100644
--- a/src/content/blog/2021/12/17/react-conf-2021-recap.md
+++ b/src/content/blog/2021/12/17/react-conf-2021-recap.md
@@ -2,7 +2,7 @@
title: "React Conf 2021 요약"
author: Jesslyn Tannady and Rick Hanlon
date: 2021/12/17
-description: 지난주, 우리는 6번째 React Conf를 개최했습니다. 지난 몇 년 동안 우리는 React Conf 무대를 통해 React Native, React Hooks 와 같은 업계 변화를 알리는 발표를 해왔습니다. 올해는 React 18의 출시와 동시 기능의 점진적인 도입을 시작으로 React의 멀티 플랫폼 비전을 공유했습니다.
+description: 지난주, 6번째 React Conf를 개최했습니다. 지난 몇 년 동안 React Conf 무대를 통해 React Native, React Hook과 같은 업계 변화를 알리는 발표를 했습니다. 올해는 React 18의 출시 및 동시성 기능의 점진적 도입을 시작으로 React의 멀티 플랫폼 비전을 공유했습니다.
---
2021년 12월 17일, [Jesslyn Tannady](https://twitter.com/jtannady), [Rick Hanlon](https://twitter.com/rickhanlonii)
@@ -11,29 +11,29 @@ description: 지난주, 우리는 6번째 React Conf를 개최했습니다. 지
-지난주, 우리는 6번째 React Conf를 개최했습니다. 지난 몇 년 동안 우리는 React Conf 무대를 통해 [_React Native_](https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/), [_React Hooks_](https://reactjs.org/docs/hooks-intro.html)와 같은 업계 변화를 알리는 발표를 해왔습니다. 올해는 React 18의 출시와 동시 기능의 점진적인 도입을 시작으로 React의 멀티 플랫폼 비전을 공유했습니다.
+지난주, 6번째 React Conf를 개최했습니다. 지난 몇 년 동안 React Conf 무대를 통해 [_React Native_](https://engineering.fb.com/2015/03/26/android/react-native-bringing-modern-web-techniques-to-mobile/), [_React Hook_](https://reactjs.org/docs/hooks-intro.html)과 같은 업계 변화를 알리는 발표를 했습니다. 올해는 React 18의 출시 및 동시성 기능의 점진적 도입을 시작으로 React의 멀티 플랫폼 비전을 공유했습니다.
---
-React Conf가 온라인으로 개최된 것은 이번이 처음이며, 8개 언어로 번역되어 무료로 스트리밍되었습니다. 전 세계의 참가자들은 모든 시간대에서 접근성을 위해 컨퍼런스 Discord와 리플레이 이벤트에 참여했습니다. 50,000명 이상이 등록했으며, 19개 강연의 조회수는 60,000회를 넘었고, 두 이벤트에 걸쳐 5,000명이 Discord에 참여했습니다.
+React Conf가 온라인으로 개최된 것은 이번이 처음이며, 8개 언어로 번역되어 무료로 스트리밍되었습니다. 전 세계의 참가자들은 다양한 시간대에서의 참여를 위해 컨퍼런스 Discord와 리플레이 이벤트를 이용했습니다. 50,000명 이상이 등록했으며, 19개 강연의 조회수는 60,000회를 넘었고, 두 이벤트에 걸쳐 5,000명이 Discord에 참여했습니다.
-모든 강연은 [온라인으로 스트리밍 가능](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa)합니다.
+모든 강연은 [온라인 스트리밍이 가능](https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa)합니다.
-무대에서 공유된 내용을 요약해 보았습니다:
+무대에서 공유된 내용을 요약하였습니다.
-## React 18 및 동시 기능 {/*react-18-and-concurrent-features*/}
+## React 18 및 동시성 기능 {/*react-18-and-concurrent-features*/}
-기조연설에서 저희는 React 18을 시작으로 React의 미래에 대한 비전을 공유했습니다.
+기조연설에서 React 18을 시작으로 React의 미래에 대한 비전을 공유했습니다.
-React 18은 오랫동안 기다려온 동시 renderer를 추가하고 Suspense를 큰 변경 없이 업데이트했습니다. 앱은 React 18로 업그레이드하여 다른 주요 출시와 동등한 수준의 노력으로 동시 기능을 점진적으로 도입할 수 있습니다.
+React 18은 오랫동안 기다려온 동시성 렌더러
Concurrent Renderer를 추가하고 Suspense를 주
Major, 主(역자. Breaking Change를 일으키는) 변경 없이 업데이트했습니다. 앱은 React 18로 업그레이드하여 다른 주
Major, 主 릴리즈와 동등한 수준의 노력으로 동시성 기능을 점진적으로 도입할 수 있습니다.
-**이는 동시 모드가 없고 동시 기능만 있음을 의미합니다.**
+**이는 동시성 모드가 없고 동시성 기능만 있음을 의미합니다.**
기조연설에서는 Suspense, 서버 컴포넌트, 새로운 React 워킹 그룹에 대한 비전과 React Native에 대한 장기적인 멀티플랫폼 비전도 공유했습니다.
-[Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Rick Hanlon](https://twitter.com/rickhanlonii)의 기조연설 전문을 여기에서 시청하세요:
+[Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Rick Hanlon](https://twitter.com/rickhanlonii)의 기조연설 전문을 아래에서 시청하세요.
@@ -41,13 +41,13 @@ React 18은 오랫동안 기다려온 동시 renderer를 추가하고 Suspense
기조연설에서는 React 18 RC를 지금 바로 사용해볼 수 있다는 사실도 발표했습니다. 추가 피드백을 기다리는 중이며, 내년 초에 정식 버전으로 출시할 예정입니다.
-React 18 RC를 사용해 보려면 의존성을 업그레이드하세요:
+React 18 RC를 사용해 보려면 의존성
Dependencies을 업그레이드하세요.
```bash
npm install react@rc react-dom@rc
```
-를 클릭하고 새로운 `createRoot` API로 전환하세요:
+그리고 새로운 `createRoot` API로 전환하세요.
```js
// before
@@ -60,15 +60,15 @@ const root = ReactDOM.createRoot(container);
root.render(
);
```
-React 18로 업그레이드하는 데모는 여기에서 [Shruti Kapoor](https://twitter.com/shrutikapoor08)의 강연을 참조하세요:
+React 18 업그레이드 데모는 아래의 [Shruti Kapoor](https://twitter.com/shrutikapoor08)의 강연을 참조하세요.
## Suspense가 있는 스트리밍 서버 렌더링 {/*streaming-server-rendering-with-suspense*/}
-React 18에는 Suspense를 사용한 서버 측 렌더링 성능 개선 사항도 포함되어 있습니다.
+React 18에는 Suspense를 사용한 서버 측 렌더링
SSR, Server Side Rendering 성능 개선 사항도 포함되어 있습니다.
-스트리밍 서버 렌더링을 사용하면 서버의 React 컴포넌트에서 HTML을 생성하고 해당 HTML을 사용자에게 스트리밍할 수 있습니다. React 18에서는 'Suspense'를 사용하여 앱을 더 작은 독립 단위로 분해하여 나머지 앱을 차단하지 않고 서로 독립적으로 스트리밍할 수 있습니다. 이는 사용자가 콘텐츠를 더 빨리 보고 훨씬 빠르게 상호작용을 시작할 수 있다는 것을 의미합니다.
+스트리밍 서버 렌더링을 사용하면, 서버의 React 컴포넌트에서 HTML을 생성하고 해당 HTML을 사용자에게 스트리밍할 수 있습니다. React 18에서는 `Suspense`를 사용하여 앱을 더 작은 독립 단위로 분해하여, 나머지 앱을 차단하지 않고 서로 독립적으로 스트리밍할 수 있습니다. 이는 사용자가 콘텐츠를 더 빨리 보고 훨씬 빠르게 상호작용할 수 있다는 것을 의미합니다.
더 자세히 알아보려면 [Shaundai Person](https://twitter.com/shaundai)의 강연을 참조하세요:
@@ -76,48 +76,48 @@ React 18에는 Suspense를 사용한 서버 측 렌더링 성능 개선 사항
## 첫 번째 React 워킹 그룹 {/*the-first-react-working-group*/}
-React 18에서는 전문가, 개발자, 라이브러리 관리자, 교육자들로 구성된 패널과 협력하기 위해 첫 번째 워킹 그룹을 만들었습니다. 우리는 함께 점진적인 채택 전략을 세우고 `useId`, `useSyncExternalStore`, `useInsertionEffect`와 같은 새로운 API를 개선하기 위해 노력했습니다.
+React 18에서는 전문가, 개발자, 라이브러리 관리자, 교육자들로 구성된 패널과 협력하기 위한 첫 번째 워킹 그룹을 만들었습니다. 저희는 함께 점진적인 채택 전략을 세우고 `useId`, `useSyncExternalStore`, `useInsertionEffect`와 같은 새로운 API를 개선하기 위해 노력했습니다.
-이 작업에 대한 개요는 [Aakansha' Doshi](https://twitter.com/aakansha1216)의 강연을 참조하세요:
+해당 작업에 대한 개요는 [Aakansha' Doshi](https://twitter.com/aakansha1216)의 강연을 참조하세요.
## React 개발자 도구 {/*react-developer-tooling*/}
-이번 릴리즈의 새로운 기능을 지원하기 위해 새로 구성된 React 개발자 도구 팀과 개발자가 React 앱을 디버깅하는 데 도움이 되는 새로운 타임라인 프로파일러도 발표했습니다.
+이번 릴리즈의 새로운 기능을 지원하기 위해 새로 구성된 React 개발자 도구 팀과 개발자가 React 앱 디버깅에 도움이 되는 새로운 타임라인 프로파일러
Timeline Profiler도 발표했습니다.
-새로운 개발자 도구 기능에 대한 자세한 내용과 데모는 [Brian Vaughn](https://twitter.com/brian_d_vaughn)의 강연을 참조하세요:
+새로운 개발자 도구 기능에 대한 자세한 내용과 데모는 [Brian Vaughn](https://twitter.com/brian_d_vaughn)의 강연을 참조하세요.
## memo 없는 React {/*react-without-memo*/}
-미래를 내다보며, [Xuan Huang(黄玄)](https://twitter.com/Huxpro)이 자동 메모화 컴파일러에 대한 React Labs 연구의 업데이트를 공유했습니다. 이 강연에서 자세한 정보와 컴파일러 프로토타입 데모를 확인하세요:
+미래를 내다보며, [Xuan Huang(黄玄)](https://twitter.com/Huxpro)이 자동 메모화 컴파일러에 대한 React Labs 연구의 업데이트를 공유했습니다. 이 강연에서 자세한 정보와 컴파일러 프로토타입 데모를 확인하세요.
## React 문서 기조연설 {/*react-docs-keynote*/}
-[Rachel Nabors](https://twitter.com/rachelnabors)가 React의 새로운 문서에 대한 투자에 대한 기조연설로 React로 학습하고 디자인하는 방법에 대한 강연을 시작했습니다([현재 react.dev로 제공됨](/blog/2023/03/16/introducing-react-dev)):
+[Rachel Nabors](https://twitter.com/rachelnabors)가 React의 새로운 문서에 대한 투자와 관련한 기조연설로, React로 학습하고 디자인하는 방법에 대한 강연을 했습니다. ([현재 react.dev로 배포되었습니다.](/blog/2023/03/16/introducing-react-dev))
## 그리고... {/*and-more*/}
-**React로 학습하고 디자인하는 방법에 대한 강연:**
+**React로 학습하고 디자인하는 방법에 대한 강연**
* Debbie O'Brien: [새로운 React 문서에서 배운 것들](https://youtu.be/-7odLW_hG7s).
* Sarah Rainsberger: [브라우저에서 학습하기](https://youtu.be/5X-WEQflCL0).
-* Linton Ye: [React로 디자인함에서의 ROI](https://youtu.be/7cPWmID5XAk).
-* Delba de Oliveira: [React를 이용한 인터랙티브 놀이터](https://youtu.be/zL8cz2W0z34).
+* Linton Ye: [React 디자인에서의 ROI](https://youtu.be/7cPWmID5XAk).
+* Delba de Oliveira: [React를 이용한 상호작용 놀이터](https://youtu.be/zL8cz2W0z34).
-**Relay, React Native, PyTorch 팀의 강연:**
+**Relay, React Native, PyTorch 팀의 강연**
-* Robert Balicki: [Relay 다시 소개](https://youtu.be/lhVGdErZuN4).
+* Robert Balicki: [Relay 재소개](https://youtu.be/lhVGdErZuN4).
* Eric Rozell과 Steven Moyes: [React Native 데스크톱](https://youtu.be/9L4FFrvwJwY).
-* Roman Rädle: [React Native를 위한 온디바이스 머신러닝](https://youtu.be/NLj73vrc2I8)
+* Roman Rädle: [React Native를 위한 온디바이스 머신러닝](https://youtu.be/NLj73vrc2I8).
-**접근성, 툴링 및 서버 컴포넌트에 대한 커뮤니티 강연:**
+**접근성, 툴링 및 서버 컴포넌트에 대한 커뮤니티 강연**
* Daishi Kato: [외부 스토어 라이브러리를 위한 React 18](https://youtu.be/oPfSC5bQPR8).
* Diego Haz: [React 18에서 접근 가능한 컴포넌트 구축하기](https://youtu.be/dcm8fjBfro8).
diff --git a/src/content/blog/2022/03/08/react-18-upgrade-guide.md b/src/content/blog/2022/03/08/react-18-upgrade-guide.md
index a1733f0df..a08353f1d 100644
--- a/src/content/blog/2022/03/08/react-18-upgrade-guide.md
+++ b/src/content/blog/2022/03/08/react-18-upgrade-guide.md
@@ -11,7 +11,7 @@ description: React 18은 릴리스 노트에서 언급한 대로 새로운 동
-React 18은 [릴리스 노트](/blog/2022/03/29/react-v18)에서 언급한 대로 새로운 동시성 렌더러를 도입하여 기존 애플리케이션에 점진적으로 적용할 계획입니다. 이 글에서는 React 18로 업그레이드하는 방법을 단계별로 소개하겠습니다.
+React 18은 [릴리스 노트](/blog/2022/03/29/react-v18)에서 언급한 대로 새로운 동시성 렌더러Concurrent Renderer를 도입하여 기존 애플리케이션에 점진적으로 적용할 계획입니다. 이 글에서는 React 18로 업그레이드하는 방법을 단계별로 소개하겠습니다.
React 18로 업그레이드하는 과정에서 발생하는 [문제를 알려주세요](https://github.com/facebook/react/issues/new/choose).
@@ -19,7 +19,7 @@ React 18로 업그레이드하는 과정에서 발생하는 [문제를 알려주
-React Native 사용자의 경우, React 18은 React Native의 향후 버전에 탑재될 것입니다. 이는 새로운 기능을 활용하기 위해 React 18이 이 글에서 소개되는 새로운 React Native 아키텍처에 의존하기 때문입니다. 자세한 정보는 [React Conf 키노트](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s)를 확인해주세요.
+React Native 사용자의 경우, React 18은 React Native의 향후 버전에 탑재될 것입니다. 이는 새로운 기능을 활용하기 위해 React 18이 이 글에서 소개되는 새로운 React Native 아키텍처에 의존하기 때문입니다. 자세한 정보는 [React Conf 기조연설](https://www.youtube.com/watch?v=FZ0cG47msEk&t=1530s)을 확인해주세요.
@@ -33,13 +33,13 @@ React Native 사용자의 경우, React 18은 React Native의 향후 버전에
npm install react react-dom
```
-혹은 yarn을 사용한다면 다음 명령어를 입력하세요.
+`yarn`을 사용한다면 다음 명령어를 입력하세요.
```bash
yarn add react react-dom
```
-## 클라이언트 렌더링 API 관련 업데이트 {/*updates-to-client-rendering-apis*/}
+## 클라이언트 렌더링 API 업데이트 {/*updates-to-client-rendering-apis*/}
React 18을 처음 설치하면 콘솔 창에 다음과 같은 경고 메시지가 표시될 것입니다.
@@ -49,7 +49,7 @@ ReactDOM.render is no longer supported in React 18. Use createRoot instead. Unti
-React 18은 사용자들이 더 편리하게 root 요소들을 관리할 수 있는 최신 root API를 도입합니다. 이에 더불어 최신 root API는 새로운 동시성 렌더러를 동작시켜 동시성 기능을 사용할 수 있게 합니다.
+React 18은 사용자들이 더 편리하게 Root 요소들을 관리할 수 있는 최신 Root API를 도입했습니다. 이에 더불어 최신 Root API는 새로운 동시성 렌더러를 동작시켜 동시성 기능Concurrent Features을 사용할 수 있게 합니다.
```js
// 변경 전
@@ -74,7 +74,7 @@ unmountComponentAtNode(container);
root.unmount();
```
-또한 Suspense를 사용할 때 일반적으로 기대한 결과가 나오지 않기 때문에 콜백 함수를 렌더링 메서드에서 제거했습니다.
+Suspense를 사용할 때 일반적으로 기대한 결과가 나오지 않기 때문에 콜백 함수를 렌더링 메서드에서 제거했습니다.
```js
// 변경 전
@@ -99,11 +99,11 @@ root.render();
-구형 렌더링 콜백 API에 정확히 대응하는 대안은 없으며, 사용자의 사용 방식에 따라 다를 수 있습니다. 자세한 정보는 현재 진행 중인 그룹 포스트인 [Replacing render with createRoot](https://github.com/reactwg/react-18/discussions/5)를 확인할 수 있습니다.
+옛 렌더링 콜백 API에 정확히 대응하는 대안은 없으며, 사용자의 사용 방식에 따라 다를 수 있습니다. 자세한 정보는 현재 진행 중인 그룹 포스트인 [Replacing render with `createRoot`](https://github.com/reactwg/react-18/discussions/5)를 확인할 수 있습니다.
-마지막으로, hydration으로 서버 측 렌더링(SSR)을 이용할 경우에는 `hydrate`를 `hydrateRoot`로 업그레이드하세요.
+마지막으로, Hydration으로 서버 측 렌더링SSR, Server Side Rendering을 이용할 경우에는 `hydrate`를 `hydrateRoot`로 업그레이드하세요.
```js
// 변경 전
@@ -118,17 +118,17 @@ const root = hydrateRoot(container, );
// createRoot와는 달리, root.render()를 별도로 호출할 필요가 없습니다.
```
-자세한 정보는 [진행 중인 디스커션](https://github.com/reactwg/react-18/discussions/5)을 확인할 수 있습니다.
+자세한 정보는 [진행 중인 토론](https://github.com/reactwg/react-18/discussions/5)에서 확인할 수 있습니다.
-**업그레이드 이후에도 앱이 작동하지 않는다면 ``로 감싸여 있지 않은지 확인해 보세요.** [React 18에서는 Strict 모드가 더 엄격해져서](#updates-to-strict-mode), 모든 컴포넌트가 개발 모드의 추가된 검사 항목을 만족시키지 못할 수 있습니다. Strict 모드를 제거함으로써 문제를 해결할 수 있다면, 업그레이드 중에 제거한 다음, 통합 개발 환경이나 코드 편집기가 표시하는 오류들을 해결된 후에 다시 추가할 수 있습니다 (트리의 상단 또는 일부분에).
+**업그레이드 이후에도 앱이 작동하지 않는다면 ``로 감싸여 있지 않은지 확인해 보세요.** [React 18에서는 Strict 모드가 더 엄격해져서](#updates-to-strict-mode), 모든 컴포넌트가 개발 모드의 추가된 검사 항목을 만족하지 못할 수 있습니다. Strict 모드를 제거함으로써 문제를 해결할 수 있다면, 업그레이드 중에 제거한 다음, 통합 개발 환경이나 코드 편집기가 표시하는 오류들을 해결한 후에 (트리의 상단 또는 일부분에) 다시 추가할 수 있습니다.
## Updates to Server Rendering APIs {/*updates-to-server-rendering-apis*/}
-이번 배포에서는 서버와 스트리밍 SSR에서 Suspense를 최대한 지원하기 위해 `react-dom/server` API를 개편했습니다. 이 개편을 통해, 서버에서 점진적인 Suspense 스트리밍을 지원하지 않는 구형 Node 스트리밍 API를 더 이상 사용하지 않게 되었습니다.
+이번 릴리즈에서는 서버와 스트리밍 SSR에서 Suspense를 최대한 지원하기 위해 `react-dom/server` API를 개편했습니다. 이번 개편을 통해, 서버에서 점진적인 Suspense 스트리밍을 지원하지 않는 구형 Node 스트리밍 API를 더 이상 사용하지 않게 되었습니다.
이 API를 사용하면 다음과 같은 경고가 표시됩니다.
@@ -140,7 +140,7 @@ const root = hydrateRoot(container, );
더불어 Deno나 Cloudflare workers와 같은 최신 런타임 환경에서 Suspense를 활용하여 스트리밍 SSR를 지원하기 위해 새로운 API를 도입합니다.
* `renderToReadableStream`: **새로 추가됨 ✨**
-다음 API들은 계속 작동되긴 하지만, Suspense 지원이 제한될 것입니다.
+다음 API들은 계속 동작하긴 하지만, Suspense 지원이 제한될 것입니다.
* `renderToString`: **제한됨** ⚠️
* `renderToStaticMarkup`: **제한됨** ⚠️
@@ -151,7 +151,7 @@ const root = hydrateRoot(container, );
## TypeScript 사용 시 타입 작성에 대한 업데이트 {/*updates-to-typescript-definitions*/}
-프로젝트에 TypeScript를 사용하고 있다면, `@types/react`와 `@types/react-dom` 의존성을 최신 버전으로 업데이트해야 합니다. 새로운 타입들을 사용하면 더 안전하게 작업할 수 있으며, 기존의 타입 체커가 감지하지 못했던 이슈들을 찾아낼 수 있습니다. 가장 눈에 띄는 변화는 `children` 프로퍼티를 명확한 리스트로 정의해야 한다는 것입니다. 아래의 예시를 확인해보세요.
+프로젝트에 TypeScript를 사용하고 있다면, `@types/react`와 `@types/react-dom` 의존성을 최신 버전으로 업데이트해야 합니다. 새로운 타입들을 사용하면 더 안전하게 작업할 수 있으며, 기존의 타입 검사가 감지하지 못했던 이슈들을 찾아낼 수 있습니다. 가장 눈에 띄는 변화는 `children` 프로퍼티를 명확한 리스트로 정의해야 한다는 것입니다. 아래 예시를 확인해보세요.
```typescript{3}
interface MyButtonProps {
@@ -162,49 +162,49 @@ interface MyButtonProps {
[React 18 typings pull request](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210)에서 타입 변경 내용을 전체적으로 확인할 수 있습니다. 이 링크는 라이브러리 타입 수정 내용을 담고 있어 코드를 어떻게 수정해야 하는지 확인할 수 있습니다. [automated migration script](https://github.com/eps1lon/types-react-codemod)를 사용하여 애플리케이션 코드에 최신이고 더 안전한 타입을 빠르게 적용할 수 있습니다.
-타이핑에 버그를 발견하면 DefinitelyTyped 저장소에 [이슈를 제기해 주세요](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package).
+타이핑에 버그를 발견하면 DefinitelyTyped 저장소에 [이슈를 보내주세요](https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/new?category=issues-with-a-types-package).
## 자동 Batching {/*automatic-batching*/}
-React 18은 자동으로 더 많은 batching을 수행하여 놀라운 성능 향상을 이뤘습니다. Batching이란 더 나은 성능을 위해 여러 개의 상태 업데이트를 단 한 번의 리렌더링으로 처리하는 것을 말합니다. React 18 이전에는 React 이벤트 핸들러 내에서의 상태 업데이트만 batching을 수행해 왔습니다. 그러나 프로미스, setTimeout, 네이티브 이벤트 핸들러 또는 다른 이벤트들은 React에서 기본적으로 batching을 수행하지 않았죠. 다음 예시를 확인하세요.
+React 18은 자동으로 더 많은 Batching을 수행하여 놀라운 성능 향상을 이뤘습니다. Batching이란 더 나은 성능을 위해 여러 개의 상태 업데이트를 단 한 번의 리렌더링으로 처리하는 것을 말합니다. React 18 이전에는 React 이벤트 핸들러 내에서의 상태 업데이트만 Batching을 수행해 왔습니다. 그러나 프로미스, `setTimeout`, 네이티브 이벤트 핸들러 또는 다른 이벤트들은 React에서 기본적으로 Batching을 수행하지 않았죠. 다음 예시를 확인하세요.
```js
-// React 18 이전에는 오직 React 이벤트들만 batch되었습니다.
+// React 18 이전에는 오직 React 이벤트들만 Batch되었습니다.
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
- // React는 마지막에 단 한 번만 리렌더링합니다. (그게 batching이죠!)
+ // React는 마지막에 단 한 번만 리렌더링합니다. (그게 Batching이죠!)
}
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
- // React는 각 상태 업데이트마다 한 번씩, 총 두 번 렌더링합니다. (batching 없음)
+ // React는 각 상태 업데이트마다 한 번씩, 총 두 번 렌더링합니다. (Batching 없음)
}, 1000);
```
+React 18를 시작으로 `createRoot`를 사용하여 모든 업데이트가 자동으로 Batch될 것입니다. 이는 `setTimeout`, 프로미스, 네이티브 이벤트 핸들러 또는 다른 이벤트 내의 업데이트도 React 이벤트 내의 업데이트와 같이 Batch 될 것임을 의미합니다.
-React 18를 시작으로 `createRoot`를 사용하여 모든 업데이트가 자동으로 배치될 것입니다. 이는 timeout, 프로미스, 네이티브 이벤트 핸들러 또는 다른 이벤트 내의 업데이트도 React 이벤트 내의 업데이트와 같이 batch 될 것임을 의미합니다.
```js
-// React 18 이후로 timeout, 프로미스,
-// 네이티브 이벤트 핸들러 또는 다른 이벤트 내의 업데이트도 batch 됩니다.
+// React 18 이후로 setTimeout, 프로미스,
+// 네이티브 이벤트 핸들러 또는 다른 이벤트 내의 업데이트도 Batch 됩니다.
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
- // React는 마지막에 단 한 번만 리렌더링합니다. (그게 batching이죠!)
+ // React는 마지막에 단 한 번만 리렌더링합니다. (그게 Batching이죠!)
}
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
- // React는 마지막에 단 한 번만 리렌더링합니다. (그게 batching이죠!)
+ // React는 마지막에 단 한 번만 리렌더링합니다. (그게 Batching이죠!)
}, 1000);
```
-이는 엄청난 변화이지만, 이를 통해 렌더링 작업에 수고를 줄일 수 있고, 애플리케이션의 성능도 향상될 것으로 예상합니다. 자동 batching을 원하지 않는 경우, `flushSync`를 사용할 수도 있습니다.
+이는 엄청난 변화이지만, 이를 통해 렌더링 작업에 수고를 줄일 수 있고, 애플리케이션의 성능도 향상될 것으로 예상합니다. 자동 Batching을 원하지 않는 경우, `flushSync`를 사용할 수도 있습니다.
```js
import { flushSync } from 'react-dom';
@@ -225,41 +225,41 @@ function handleClick() {
## 라이브러리를 위한 새로운 API {/*new-apis-for-libraries*/}
-React 18 워킹 그룹은 스타일이나 외부 저장 장치와 같은 특정 목적을 위한 동시성 렌더링을 지원하기 위해 라이브러리 관리자들과 협력하여 새로운 API를 개발했습니다. React 18을 지원하기 위해서는 일부 라이브러리들은 다음 API 중 하나로 변경해야 할 수도 있습니다.
+React 18 워킹 그룹은 스타일이나 외부 저장 장치와 같은 특정 목적을 위한 동시성 렌더링을 지원하기 위해 라이브러리 관리자들과 협력하여 새로운 API를 개발했습니다. React 18을 지원하기 위해 일부 라이브러리들은 다음 API 중 하나로 변경해야 할 수도 있습니다.
-* `useSyncExternalStore`는 외부 저장 장치의 업데이트를 실시간으로 반영하여 외부 저장 장치가 동시성 불러오기를 지원할 수 있도록 하는 새로운 Hook입니다. 이 API는 React 외부의 상태를 포함하는 라이브러리에서 사용하는 것을 추천합니다. 자세한 정보는 [useSyncExternalStore overview post](https://github.com/reactwg/react-18/discussions/70)와 [useSyncExternalStore API details](https://github.com/reactwg/react-18/discussions/86)에서 확인할 수 있습니다.
+* `useSyncExternalStore`는 외부 저장 장치의 업데이트를 실시간으로 반영하여 외부 저장 장치가 동시성 불러오기Concurrent Read를 지원할 수 있도록 하는 새로운 Hook입니다. 이 API는 React 외부의 상태를 포함하는 라이브러리에서 사용하는 것을 추천합니다. 자세한 정보는 [`useSyncExternalStore` overview post](https://github.com/reactwg/react-18/discussions/70)와 [`useSyncExternalStore` API details](https://github.com/reactwg/react-18/discussions/86)에서 확인할 수 있습니다.
-* `useInsertionEffect`는 CSS-in-JS 라이브러리가 렌더링 시 스타일 주입과 같은 성능 이슈를 개선하는 새로운 Hook입니다. 이미 CSS-in-JS 라이브러리를 만든 경우가 아니라면 이 hook을 사용할 필요는 없을 것입니다. 이 hook은 DOM이 변경된 후 실행되지만, 레이아웃 effect가 새로운 레이아웃을 읽어 들이기 전에 실행됩니다. 자세한 정보는 [Library Upgrade Guide for `