diff --git a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js index 250e0a1e5..f89eeea5c 100644 --- a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js +++ b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js @@ -128,4 +128,4 @@ async function run() { run().catch(error => { console.error(error); process.exitCode = 1; -}); +}); \ No newline at end of file diff --git a/eslint-local-rules/rules/metadata.js b/eslint-local-rules/rules/metadata.js index fb58a37c2..d8e862433 100644 --- a/eslint-local-rules/rules/metadata.js +++ b/eslint-local-rules/rules/metadata.js @@ -374,4 +374,4 @@ module.exports = { removeCompilerExpectedLines, setCompilerExpectedLines, stringifyFenceMetadata, -}; +}; \ No newline at end of file diff --git a/eslint-local-rules/rules/react-compiler.js b/eslint-local-rules/rules/react-compiler.js index 26d3878ee..f2e3e1e4d 100644 --- a/eslint-local-rules/rules/react-compiler.js +++ b/eslint-local-rules/rules/react-compiler.js @@ -119,4 +119,4 @@ function runReactCompiler(code, filename) { module.exports = { hasRelevantCode, runReactCompiler, -}; +}; \ No newline at end of file diff --git a/src/content/blog/2025/10/01/react-19-2.md b/src/content/blog/2025/10/01/react-19-2.md index 4c0d55d98..588512536 100644 --- a/src/content/blog/2025/10/01/react-19-2.md +++ b/src/content/blog/2025/10/01/react-19-2.md @@ -1,33 +1,33 @@ --- title: "React 19.2" -author: The React Team +author: React 팀 date: 2025/10/01 -description: React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. +description: React 19.2에는 Activity, React 성능 트랙, useEffectEvent 등의 새로운 기능이 추가되었습니다. --- -October 1, 2025 by [The React Team](/community/team) +2025년 10월 1일, React 팀 --- -React 19.2 is now available on npm! +React 19.2가 npm에 공개되었습니다! -This is our third release in the last year, following React 19 in December and React 19.1 in June. In this post, we'll give an overview of the new features in React 19.2, and highlight some notable changes. +이번 릴리즈는 지난 12월 React 19, 6월 React 19.1에 이어 지난 한 해 동안 세 번째 릴리즈입니다. 이 글에서는 React 19.2의 새로운 기능 개요와 주목할 만한 변경 사항을 중점적으로 다룰 예정입니다. --- -## New React Features {/*new-react-features*/} +## 새로운 React 기능 {/*new-react-features*/} ### `` {/*activity*/} -`` lets you break your app into "activities" that can be controlled and prioritized. +``를 사용하면 앱을 제어하고 우선순위를 지정할 수 있는 "활동"으로 나눌 수 있습니다. -You can use Activity as an alternative to conditionally rendering parts of your app: +Activity는 앱의 특정 부분을 조건부로 렌더링하는 대안으로 사용할 수 있습니다. ```js // Before @@ -39,24 +39,24 @@ You can use Activity as an alternative to conditionally rendering parts of your ``` -In React 19.2, Activity supports two modes: `visible` and `hidden`. +React 19.2에서 Activity는 `visible`과 `hidden` 두 가지 모드를 지원합니다. -- `hidden`: hides the children, unmounts effects, and defers all updates until React has nothing left to work on. -- `visible`: shows the children, mounts effects, and allows updates to be processed normally. +- `hidden`: 자식 요소를 숨기고, 이펙트를 마운트 해제하며, React가 더 이상 작업할 것이 없을 때까지 모든 업데이트를 지연시킵니다. +- `visible`: 자식 요소를 표시하고, 이펙트를 마운트하며, 업데이트가 정상적으로 처리되도록 허용합니다. -This means you can pre-render and keep rendering hidden parts of the app without impacting the performance of anything visible on screen. +이는 앱의 숨겨진 부분을 화면에 보이는 어떤 것의 성능에도 영향을 미치지 않으면서 미리 렌더링하고 계속 렌더링할 수 있음을 의미합니다. -You can use Activity to render hidden parts of the app that a user is likely to navigate to next, or to save the state of parts the user navigates away from. This helps make navigations quicker by loading data, css, and images in the background, and allows back navigations to maintain state such as input fields. +Activity를 사용하면 사용자가 다음에 탐색할 가능성이 있는 앱의 숨겨진 부분을 렌더링하거나, 사용자가 떠난 부분의 상태를 저장할 수 있습니다. 이는 백그라운드에서 데이터, CSS, 이미지를 로드하여 탐색을 더 빠르게 하고, 뒤로 가기 탐색 시 입력 필드와 같은 상태를 유지하는 데 도움이 됩니다. -In the future, we plan to add more modes to Activity for different use cases. +앞으로는 다양한 사용 사례를 위해 Activity에 더 많은 모드를 추가할 계획입니다. -For examples on how to use Activity, check out the [Activity docs](/reference/react/Activity). +Activity 사용 방법에 대한 예시는 [Activity 문서](/reference/react/Activity)를 참조하세요. --- ### `useEffectEvent` {/*use-effect-event*/} -One common pattern with `useEffect` is to notify the app code about some kind of "events" from an external system. For example, when a chat room gets connected, you might want to display a notification: +`useEffect`의 일반적인 패턴 중 하나는 외부 시스템으로부터 어떤 종류의 "이벤트"에 대해 앱 코드에 알리는 것입니다. 예를 들어, 채팅방이 연결될 때 알림을 표시하고 싶을 수 있습니다. ```js {5,11} function ChatRoom({ roomId, theme }) { @@ -73,11 +73,11 @@ function ChatRoom({ roomId, theme }) { // ... ``` -The problem with the code above is that a change to any values used inside such an "event" will cause the surrounding Effect to re-run. For example, changing the `theme` will cause the chat room to reconnect. This makes sense for values related to the Effect logic itself, like `roomId`, but it doesn't make sense for `theme`. +위 코드의 문제는 이러한 "이벤트" 내에서 사용되는 값의 변경이 주변 Effect를 다시 실행하게 만든다는 것입니다. 예를 들어, `theme`을 변경하면 채팅방이 다시 연결됩니다. 이는 `roomId`처럼 Effect 로직 자체와 관련된 값에는 타당하지만, `theme`에는 타당하지 않습니다. -To solve this, most users just disable the lint rule and exclude the dependency. But that can lead to bugs since the linter can no longer help you keep the dependencies up to date if you need to update the Effect later. +이 문제를 해결하기 위해 대부분의 사용자는 린트 규칙을 비활성화하고 의존성을 제외합니다. 그러나 나중에 Effect를 업데이트해야 할 때 린터가 더 이상 의존성을 최신 상태로 유지하는 데 도움을 줄 수 없으므로 버그가 발생할 수 있습니다. -With `useEffectEvent`, you can split the "event" part of this logic out of the Effect that emits it: +`useEffectEvent`를 사용하면 이 로직의 "이벤트" 부분을 이를 내보내는 Effect에서 분리할 수 있습니다. ```js {2,3,4,9} function ChatRoom({ roomId, theme }) { @@ -92,21 +92,21 @@ function ChatRoom({ roomId, theme }) { }); connection.connect(); return () => connection.disconnect(); - }, [roomId]); // ✅ All dependencies declared (Effect Events aren't dependencies) + }, [roomId]); // ✅ 모든 의존성이 선언됨 (Effect Events는 의존성이 아님) // ... ``` -Similar to DOM events, Effect Events always "see" the latest props and state. +DOM 이벤트와 유사하게, Effect 이벤트는 항상 최신 props와 상태를 "봅니다". -**Effect Events should _not_ be declared in the dependency array**. You'll need to upgrade to `eslint-plugin-react-hooks@latest` so that the linter doesn't try to insert them as dependencies. Note that Effect Events can only be declared in the same component or Hook as "their" Effect. These restrictions are verified by the linter. +**Effect 이벤트는 의존성 배열에 선언해서는 안 됩니다**. 린터가 이를 의존성으로 삽입하려고 하지 않도록 `eslint-plugin-react-hooks@latest`로 업그레이드해야 합니다. Effect 이벤트는 "자신"의 Effect와 동일한 컴포넌트 또는 Hook 내에서만 선언할 수 있습니다. 이러한 제약은 린터에 의해 검증됩니다. -#### When to use `useEffectEvent` {/*when-to-use-useeffectevent*/} +#### `useEffectEvent`를 사용해야 하는 경우 {/*when-to-use-useeffectevent*/} -You should use `useEffectEvent` for functions that are conceptually "events" that happen to be fired from an Effect instead of a user event (that's what makes it an "Effect Event"). You don't need to wrap everything in `useEffectEvent`, or to use it just to silence the lint error, as this can lead to bugs. +`useEffectEvent`는 사용자 이벤트 대신 Effect에서 발생(발화)하는 개념적으로 "이벤트"인 함수에 사용해야 합니다 (이것이 "Effect 이벤트"인 이유입니다). 모든 것을 `useEffectEvent`로 감쌀 필요는 없으며, 린트 오류를 숨기기 위해서만 사용해서는 안 됩니다. 이는 버그로 이어질 수 있습니다. -For a deep dive on how to think about Event Effects, see: [Separating Events from Effects](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects). +이벤트 Effect를 생각하는 방법에 대한 자세한 내용은 [이벤트와 Effect 분리하기](/learn/separating-events-from-effects#extracting-non-reactive-logic-out-of-effects)를 참조하세요. @@ -116,11 +116,11 @@ For a deep dive on how to think about Event Effects, see: [Separating Events fro -`cacheSignal` is only for use with [React Server Components](/reference/rsc/server-components). +`cacheSignal`은 [리액트 서버 컴포넌트](/reference/rsc/server-components)에서만 사용됩니다. -`cacheSignal` allows you to know when the [`cache()`](/reference/react/cache) lifetime is over: +`cacheSignal`을 사용하면 [`cache()`](/reference/react/cache)의 수명이 끝났을 때 알 수 있습니다. ``` import {cache, cacheSignal} from 'react'; @@ -131,19 +131,19 @@ async function Component() { } ``` -This allows you to clean up or abort work when the result will no longer be used in the cache, such as: +이를 통해 결과가 더 이상 캐시에서 사용되지 않을 때 작업을 정리하거나 중단할 수 있습니다. 예를 들어: -- React has successfully completed rendering -- The render was aborted -- The render has failed +- React가 렌더링을 성공적으로 완료한 경우 +- 렌더링이 중단된 경우 +- 렌더링이 실패한 경우 -For more info, see the [`cacheSignal` docs](/reference/react/cacheSignal). +자세한 내용은 [`cacheSignal` 문서](/reference/react/cacheSignal)를 참조하세요. --- -### Performance Tracks {/*performance-tracks*/} +### 성능 트랙 {/*performance-tracks*/} -React 19.2 adds a new set of [custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) to Chrome DevTools performance profiles to provide more information about the performance of your React app: +React 19.2는 Chrome DevTools 성능 프로필에 새로운 [커스텀 트랙](https://developer.chrome.com/docs/devtools/performance/extension) 세트를 추가하여 React 앱의 성능에 대한 더 많은 정보를 제공합니다.
@@ -156,132 +156,132 @@ React 19.2 adds a new set of [custom tracks](https://developer.chrome.com/docs/d
-The [React Performance Tracks docs](/reference/dev-tools/react-performance-tracks) explain everything included in the tracks, but here is a high-level overview. +[React 성능 트랙 문서](/reference/dev-tools/react-performance-tracks)에 트랙에 포함된 모든 내용이 설명되어 있지만, 여기서는 개략적인 개요를 제공합니다. #### Scheduler ⚛ {/*scheduler-*/} -The Scheduler track shows what React is working on for different priorities such as "blocking" for user interactions, or "transition" for updates inside startTransition. Inside each track, you will see the type of work being performed such as the event that scheduled an update, and when the render for that update happened. +스케줄러 트랙은 사용자 상호작용을 위한 "블로킹(blocking)" 또는 `startTransition` 내부 업데이트를 위한 "트랜지션(transition)"과 같이 React가 다양한 우선순위에 대해 작업하는 내용을 보여줍니다. 각 트랙 내부에서는 업데이트를 예약한 이벤트 및 해당 업데이트의 렌더링이 발생한 시점과 같이 수행되는 작업 유형을 볼 수 있습니다. -We also show information such as when an update is blocked waiting for a different priority, or when React is waiting for paint before continuing. The Scheduler track helps you understand how React splits your code into different priorities, and the order it completed the work. +또한 업데이트가 다른 우선순위를 기다리면서 차단되는 시점 또는 React가 계속하기 전에 페인트를 기다리는 시점과 같은 정보도 표시합니다. 스케줄러 트랙은 React가 코드를 다양한 우선순위로 분할하고 작업을 완료한 순서를 이해하는 데 도움이 됩니다. -See the [Scheduler track](/reference/dev-tools/react-performance-tracks#scheduler) docs to see everything included. +포함된 모든 내용을 보려면 [스케쥴러 트랙](/reference/dev-tools/react-performance-tracks#scheduler) 문서를 참조하세요. #### Components ⚛ {/*components-*/} -The Components track shows the tree of components that React is working on either to render or run effects. Inside you'll see labels such as "Mount" for when children mount or effects are mounted, or "Blocked" for when rendering is blocked due to yielding to work outside React. +컴포넌트 트랙은 React가 렌더링하거나 이펙트를 실행하기 위해 작업하는 컴포넌트 트리를 보여줍니다. 내부에서는 자식 요소가 마운트되거나 이펙트가 마운트될 때 "마운트(Mount)" 또는 React 외부 작업에 양보하여 렌더링이 차단될 때 "차단(Blocked)"과 같은 레이블을 볼 수 있습니다. -The Components track helps you understand when components are rendered or run effects, and the time it takes to complete that work to help identify performance problems. +컴포넌트 트랙은 컴포넌트가 렌더링되거나 이펙트를 실행하는 시점과 해당 작업을 완료하는 데 걸리는 시간을 이해하여 성능 문제를 식별하는 데 도움이 됩니다. -See the [Components track docs](/reference/dev-tools/react-performance-tracks#components) for see everything included. +포함된 모든 내용을 보려면 [컴포넌트 트랙](/reference/dev-tools/react-performance-tracks#components) 문서를 참조하세요. --- -## New React DOM Features {/*new-react-dom-features*/} +## 새로운 React DOM 기능 {/*new-react-dom-features*/} -### Partial Pre-rendering {/*partial-pre-rendering*/} +### 부분 사전 렌더링 {/*partial-pre-rendering*/} -In 19.2 we're adding a new capability to pre-render part of the app ahead of time, and resume rendering it later. +19.2에서는 앱의 일부를 미리 렌더링하고 나중에 렌더링을 재개할 수 있는 새로운 기능을 추가했습니다. -This feature is called "Partial Pre-rendering", and allows you to pre-render the static parts of your app and serve it from a CDN, and then resume rendering the shell to fill it in with dynamic content later. +이 기능은 "부분 사전 렌더링(Partial Pre-rendering)"이라고 불리며, 앱의 정적 부분을 미리 렌더링하여 CDN에서 제공한 다음 셸(shell) 렌더링을 재개하여 나중에 동적 콘텐츠로 채울 수 있도록 합니다. -To pre-render an app to resume later, first call `prerender` with an `AbortController`: +앱을 나중에 재개하기 위해 미리 렌더링하려면 먼저 `AbortController`와 함께 `prerender`를 호출합니다: ``` const {prelude, postponed} = await prerender(, { signal: controller.signal, }); -// Save the postponed state for later +// 나중에 사용하기 위해 지연된(postponed) 상태를 저장합니다. await savePostponedState(postponed); -// Send prelude to client or CDN. +// prelude를 클라이언트 또는 CDN으로 전송합니다. ``` -Then, you can return the `prelude` shell to the client, and later call `resume` to "resume" to a SSR stream: +그런 다음, `prelude` 셸을 클라이언트에 반환하고, 나중에 `resume`을 호출하여 SSR 스트림으로 "재개"할 수 있습니다: ``` const postponed = await getPostponedState(request); const resumeStream = await resume(, postponed); -// Send stream to client. +// 스트림을 클라이언트로 전송합니다. ``` -Or you can call `resumeAndPrerender` to resume to get static HTML for SSG: +또는 `resumeAndPrerender`를 호출하여 SSG를 위한 정적 HTML을 얻기 위해 재개할 수 있습니다: ``` const postponedState = await getPostponedState(request); const { prelude } = await resumeAndPrerender(, postponedState); -// Send complete HTML prelude to CDN. +// 완성된 HTML prelude를 CDN으로 전송합니다. ``` -For more info, see the docs for the new APIs: +자세한 내용은 새로운 API 문서에서 확인할 수 있습니다: - `react-dom/server` - - [`resume`](/reference/react-dom/server/resume): for Web Streams. - - [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) for Node Streams. + - [`resume`](/reference/react-dom/server/resume): 웹 스트림용. + - [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream): Node 스트림용. - `react-dom/static` - - [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) for Web Streams. - - [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) for Node Streams. + - [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender): 웹 스트림용. + - [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream): Node 스트림용. -Additionally, the prerender apis now return a `postpone` state to pass to the `resume` apis. +또한, `prerender` API는 이제 `resume` API로 전달할 `postpone` 상태를 반환합니다. --- -## Notable Changes {/*notable-changes*/} +## 주목할 만한 변경 사항 {/*notable-changes*/} -### Batching Suspense Boundaries for SSR {/*batching-suspense-boundaries-for-ssr*/} +### SSR을 위한 Suspense Boundary 배치 {/*batching-suspense-boundaries-for-ssr*/} -We fixed a behavioral bug where Suspense boundaries would reveal differently depending on if they were rendered on the client or when streaming from server-side rendering. +클라이언트에서 렌더링될 때와 서버 사이드 렌더링에서 스트리밍될 때 Suspense Boundary가 다르게 나타나는 동작 버그를 수정했습니다. -Starting in 19.2, React will batch reveals of server-rendered Suspense boundaries for a short time, to allow more content to be revealed together and align with the client-rendered behavior. +19.2부터 React는 서버 렌더링된 Suspense Boundary의 노출을 짧은 시간 동안 배치(batch)하여 더 많은 콘텐츠가 함께 노출되고 클라이언트 렌더링 동작과 일치하도록 합니다. -Previously, during streaming server-side rendering, suspense content would immediately replace fallbacks. +이전에는 스트리밍 서버 사이드 렌더링 동안 Suspense 콘텐츠가 즉시 폴백을 대체했습니다. -In React 19.2, suspense boundaries are batched for a small amount of time, to allow revealing more content together. +React 19.2에서는 Suspense Boundary가 짧은 시간 동안 배치되어 더 많은 콘텐츠를 함께 노출할 수 있습니다. -This fix also prepares apps for supporting `` for Suspense during SSR. By revealing more content together, animations can run in larger batches of content, and avoid chaining animations of content that stream in close together. +이 수정은 또한 SSR 중 Suspense에 대한 `` 지원을 위한 앱을 준비합니다. 더 많은 콘텐츠를 함께 노출함으로써 애니메이션이 더 큰 콘텐츠 배치에서 실행될 수 있으며, 가깝게 스트리밍되는 콘텐츠의 체인 애니메이션을 피할 수 있습니다. -React uses heuristics to ensure throttling does not impact core web vitals and search ranking. +React는 스로틀링이 핵심 웹 바이탈 및 검색 순위에 영향을 미치지 않도록 휴리스틱을 사용합니다. -For example, if the total page load time is approaching 2.5s (which is the time considered "good" for [LCP](https://web.dev/articles/lcp)), React will stop batching and reveal content immediately so that the throttling is not the reason to miss the metric. +예를 들어, 총 페이지 로드 시간이 2.5초([LCP](https://web.dev/articles/lcp)에 대해 "좋음"으로 간주되는 시간)에 가까워지면 React는 배치를 중단하고 즉시 콘텐츠를 노출하여 스로틀링이 측정 항목을 놓치는 이유가 되지 않도록 합니다. --- -### SSR: Web Streams support for Node {/*ssr-web-streams-support-for-node*/} +### SSR: Node용 웹 스트림 지원 {/*ssr-web-streams-support-for-node*/} -React 19.2 adds support for Web Streams for streaming SSR in Node.js: -- [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) is now available for Node.js -- [`prerender`](/reference/react-dom/static/prerender) is now available for Node.js +React 19.2는 Node.js에서 스트리밍 SSR을 위한 웹 스트림(Web Streams) 지원을 추가합니다: +- [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream)은 이제 Node.js에서 사용할 수 있습니다 +- [`prerender`](/reference/react-dom/static/prerender)는 이제 Node.js에서 사용할 수 있습니다 -As well as the new `resume` APIs: -- [`resume`](/reference/react-dom/server/resume) is available for Node.js. -- [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) is available for Node.js. +새로운 `resume` API도 마찬가지입니다: +- [`resume`](/reference/react-dom/server/resume)은 Node.js에서 사용할 수 있습니다. +- [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender)는 Node.js에서 사용할 수 있습니다. -#### Prefer Node Streams for server-side rendering in Node.js {/*prefer-node-streams-for-server-side-rendering-in-nodejs*/} +#### Node.js에서 서버 사이드 렌더링에는 Node 스트림을 선호하세요 {/*prefer-node-streams-for-server-side-rendering-in-nodejs*/} -In Node.js environments, we still highly recommend using the Node Streams APIs: +Node.js 환경에서는 여전히 Node 스트림 API 사용을 강력히 권장합니다: - [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) - [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) - [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) - [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) -This is because Node Streams are much faster than Web Streams in Node, and Web Streams do not support compression by default, leading to users accidentally missing the benefits of streaming. +이는 Node에서 Node 스트림이 웹 스트림보다 훨씬 빠르며, 웹 스트림은 기본적으로 압축을 지원하지 않아 사용자가 의도치 않게 스트리밍의 이점을 놓칠 수 있기 때문입니다. @@ -289,51 +289,51 @@ This is because Node Streams are much faster than Web Streams in Node, and Web S ### `eslint-plugin-react-hooks` v6 {/*eslint-plugin-react-hooks*/} -We also published `eslint-plugin-react-hooks@latest` with flat config by default in the `recommended` preset, and opt-in for new React Compiler powered rules. +또한 `eslint-plugin-react-hooks@latest`를 공개했으며, `recommended` 프리셋에 기본적으로 플랫 config를 포함하고 새로운 React 컴파일러 기반 규칙을 옵트인(opt-in)할 수 있도록 했습니다. -To continue using the legacy config, you can change to `recommended-legacy`: +레거시 config를 계속 사용하려면 `recommended-legacy`로 변경할 수 있습니다: ```diff - extends: ['plugin:react-hooks/recommended'] + extends: ['plugin:react-hooks/recommended-legacy'] ``` -For a full list of compiler enabled rules, [check out the linter docs](/reference/eslint-plugin-react-hooks#recommended). +컴파일러 활성화 규칙의 전체 목록은 [린터 문서](/reference/eslint-plugin-react-hooks#recommended)를 참조하세요. -Check out the `eslint-plugin-react-hooks` [changelog for a full list of changes](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610). +전체 변경 사항 목록은 [`eslint-plugin-react-hooks` 변경 로그](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md#610)를 참조하세요. --- -### Update the default `useId` prefix {/*update-the-default-useid-prefix*/} +### 기본 `useId` 접두사 업데이트 {/*update-the-default-useid-prefix*/} -In 19.2, we're updating the default `useId` prefix from `:r:` (19.0.0) or `«r»` (19.1.0) to `_r_`. +19.2에서는 기본 `useId` 접두사를 `:r:`(19.0.0) 또는 `«r»`(19.1.0)에서 `_r_`로 업데이트하고 있습니다. -The original intent of using a special character that was not valid for CSS selectors was that it would be unlikely to collide with IDs written by users. However, to support View Transitions, we need to ensure that IDs generated by `useId` are valid for `view-transition-name` and XML 1.0 names. +CSS 선택자에 유효하지 않은 특수 문자를 사용하는 원래 의도는 사용자가 작성한 ID와 충돌할 가능성이 낮다는 것이었습니다. 그러나 View Transition을 지원하려면 `useId`에 의해 생성된 ID가 `view-transition-name` 및 XML 1.0 이름에 유효한지 확인해야 합니다. --- -## Changelog {/*changelog*/} +## 변경 로그 {/*changelog*/} -Other notable changes -- `react-dom`: Allow nonce to be used on hoistable styles [#32461](https://github.com/facebook/react/pull/32461) -- `react-dom`: Warn for using a React owned node as a Container if it also has text content [#32774](https://github.com/facebook/react/pull/32774) +기타 주목할 만한 변경 사항 +- `react-dom`: 호이스팅 가능한 스타일에서 nonce 사용 허용 [#32461](https://github.com/facebook/react/pull/32461) +- `react-dom`: React 소유 노드가 텍스트 콘텐츠도 포함하는 경우 컨테이너로 사용하는 것에 대한 경고 [#32774](https://github.com/facebook/react/pull/32774) -Notable bug fixes -- `react`: Stringify context as "SomeContext" instead of "SomeContext.Provider" [#33507](https://github.com/facebook/react/pull/33507) -- `react`: Fix infinite useDeferredValue loop in popstate event [#32821](https://github.com/facebook/react/pull/32821) -- `react`: Fix a bug when an initial value was passed to useDeferredValue [#34376](https://github.com/facebook/react/pull/34376) -- `react`: Fix a crash when submitting forms with Client Actions [#33055](https://github.com/facebook/react/pull/33055) -- `react`: Hide/unhide the content of dehydrated suspense boundaries if they resuspend [#32900](https://github.com/facebook/react/pull/32900) -- `react`: Avoid stack overflow on wide trees during Hot Reload [#34145](https://github.com/facebook/react/pull/34145) -- `react`: Improve component stacks in various places [#33629](https://github.com/facebook/react/pull/33629), [#33724](https://github.com/facebook/react/pull/33724), [#32735](https://github.com/facebook/react/pull/32735), [#33723](https://github.com/facebook/react/pull/33723) -- `react`: Fix a bug with React.use inside React.lazy-ed Component [#33941](https://github.com/facebook/react/pull/33941) -- `react-dom`: Stop warning when ARIA 1.3 attributes are used [#34264](https://github.com/facebook/react/pull/34264) -- `react-dom`: Fix a bug with deeply nested Suspense inside Suspense fallbacks [#33467](https://github.com/facebook/react/pull/33467) -- `react-dom`: Avoid hanging when suspending after aborting while rendering [#34192](https://github.com/facebook/react/pull/34192) +주목할 만한 버그 수정 +- `react`: Context를 "SomeContext.Provider" 대신 "SomeContext"로 문자열화 [#33507](https://github.com/facebook/react/pull/33507) +- `react`: popstate 이벤트에서 useDeferredValue의 무한 루프 수정 [#32821](https://github.com/facebook/react/pull/32821) +- `react`: useDeferredValue에 초기 값이 전달될 때의 버그 수정 [#34376](https://github.com/facebook/react/pull/34376) +- `react`: 클라이언트 액션(Client Actions)으로 양식을 제출할 때의 충돌 수정 [#33055](https://github.com/facebook/react/pull/33055) +- `react`: 다시 중단되는(resuspend) 탈수된(dehydrated) Suspense Boundary의 콘텐츠 숨기기/숨김 해제 [#32900](https://github.com/facebook/react/pull/32900) +- `react`: 핫 리로드(Hot Reload) 중 넓은 트리에서 스택 오버플로우 방지 [#34145](https://github.com/facebook/react/pull/34145) +- `react`: 다양한 위치에서 컴포넌트 스택 개선 [#33629](https://github.com/facebook/react/pull/33629), [#33724](https://github.com/facebook/react/pull/33724), [#32735](https://github.com/facebook/react/pull/32735), [#33723](https://github.com/facebook/react/pull/33723) +- `react`: React.lazy로 지연된 컴포넌트 내 React.use 사용 시 버그 수정 [#33941](https://github.com/facebook/react/pull/33941) +- `react-dom`: ARIA 1.3 속성 사용 시 경고 중단 [#34264](https://github.com/facebook/react/pull/34264) +- `react-dom`: 깊게 중첩된 Suspense 폴백 내 Suspense 버그 수정 [#33467](https://github.com/facebook/react/pull/33467) +- `react-dom`: 렌더링 중 중단 후 중단 시 행잉(hanging) 방지 [#34192](https://github.com/facebook/react/pull/34192) -For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md). +전체 변경 사항 목록은 [변경 로그](https://github.com/facebook/react/blob/main/CHANGELOG.md)를 참조하세요. --- -_Thanks to [Ricky Hanlon](https://bsky.app/profile/ricky.fm) for [writing this post](https://www.youtube.com/shorts/T9X3YkgZRG0), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), and [Joe Savona](https://x.com/en_JS) for reviewing this post._ +이 글을 작성해주신 [Ricky Hanlon](https://bsky.app/profile/ricky.fm), 그리고 이 글을 검토해주신 [Dan Abramov](https://bsky.app/profile/danabra.mov), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), [Joe Savona](https://x.com/en_JS)에게 감사드립니다. diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 77430b10f..47aea0cac 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -28,9 +28,9 @@ Today, we're announcing our plans to create the React Foundation and a new techn - + -React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. In this post ... +React 19.2에는 Activity, React 성능 트랙, useEffectEvent 등의 새로운 기능이 추가되었습니다. 이 글에서는... diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index 4b7b632fc..942e71284 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -11,6 +11,27 @@ "path": "/blog", "skipBreadcrumb": true, "routes": [ + { + "title": "React Compiler v1.0", + "titleForHomepage": "React Compiler v1.0", + "icon": "blog", + "date": "October 8, 2025", + "path": "/blog/2025/10/07/react-compiler-1" + }, + { + "title": "Introducing the React Foundation", + "titleForHomepage": "Introducing the React Foundation", + "icon": "blog", + "date": "October 7, 2025", + "path": "/blog/2025/10/07/introducing-the-react-foundation" + }, + { + "title": "React 19.2", + "titleForHomepage": "React 19.2에는 Activity, React 성능 트랙, useEffectEvent 등의 새로운 기능이 추가되었습니다. 이 글에서는...", + "icon": "blog", + "date": "October 1, 2025", + "path": "/blog/2025/10/01/react-19-2" + }, { "title": "React Conf 2025 Recap", "titleForHomepage": "React Conf 2025 Recap",