From 356b61cf6a7fc5c0f8dc3c92c1484331d41af74a Mon Sep 17 00:00:00 2001 From: Minju Kim Date: Mon, 10 Jun 2024 10:00:28 +0900 Subject: [PATCH 0001/1012] Translate: form (#909) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * translate partial useFormstate * docs: 피드백 반영 * translate form * apply comment * remove space --- .../reference/react-dom/components/form.md | 84 ++++++++++--------- 1 file changed, 44 insertions(+), 40 deletions(-) diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 8f6ab00e0..8bbcf834e 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -5,14 +5,14 @@ canary: true -React's extensions to `
` are currently only available in React's canary and experimental channels. In stable releases of React, `` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +React의 익스텐션인 ``은 현재 React Canary(카나리)와 실험적 채널에서만 사용할 수 있습니다. React에서의 안정적인 배포를 위해 ``은 [내장 브라우저 HTML 컴포넌트](https://react.dev/reference/react-dom/components#all-html-components)로서만 동작합니다. 더 자세한 사항은 [React 배포 채널](/community/versioning-policy#all-release-channels)을 확인하세요. -The [built-in browser `` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) lets you create interactive controls for submitting information. +[내장 브라우저 `` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)는 정보 제출을 위한 대화형 컨트롤을 만들 수 있습니다. ```js @@ -27,11 +27,11 @@ The [built-in browser `` component](https://developer.mozilla.org/en-US/do --- -## Reference {/*reference*/} +## 레퍼런스 {/*reference*/} ### `` {/*form*/} -To create interactive controls for submitting information, render the [built-in browser `` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form). +정보 제출을 위한 대화형 컨트롤을 생성하기 위해, [내장된 브라우저 `` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)를 렌더하세요. ```js @@ -40,25 +40,26 @@ To create interactive controls for submitting information, render the [built-in ``` -[See more examples below.](#usage) +[아래 예시를 보세요.](#usage) #### Props {/*props*/} -`
` supports all [common element props.](/reference/react-dom/components/common#props) +``은 모든 [공통 엘리먼트 props](/reference/react-dom/components/common#props)를 지원합니다. -[`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission. The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a ` - - -
- - -``` - -```js src/index.js active -import './styles.css'; -import { render, unmountComponentAtNode } from 'react-dom'; -import App from './App.js'; - -const domNode = document.getElementById('root'); - -document.getElementById('render').addEventListener('click', () => { - render(, domNode); -}); - -document.getElementById('unmount').addEventListener('click', () => { - unmountComponentAtNode(domNode); -}); -``` - -```js src/App.js -export default function App() { - return

Hello, world!

; -} -``` - - From c5ed7b8972bed810e962aea411a6e9594975b47c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Fri, 3 Jan 2025 21:06:30 +0900 Subject: [PATCH 0350/1012] docs: update `client/index.md` --- src/content/reference/react-dom/client/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md index 498d78760..16bbf609a 100644 --- a/src/content/reference/react-dom/client/index.md +++ b/src/content/reference/react-dom/client/index.md @@ -4,7 +4,7 @@ title: Client React DOM APIs -`react-dom/client` API를 사용하면 클라이언트(브라우저)에서 React 컴포넌트를 렌더링 할 수 있습니다. 이러한 API는 일반적으로 앱의 최상위 수준에서 React 트리를 초기화하기 위해 사용됩니다. [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)가 대신 호출할 수도 있습니다. 대부분의 컴포넌트는 이를 가져오거나 사용할 필요가 없습니다. +`react-dom/client` API를 사용하면 클라이언트(브라우저)에서 React 컴포넌트를 렌더링 할 수 있습니다. 이러한 API는 일반적으로 앱의 최상위 수준에서 React 트리를 초기화하기 위해 사용합니다. [프레임워크](/learn/start-a-new-react-project#production-grade-react-frameworks)가 대신 호출할 수도 있습니다. 대부분의 컴포넌트는 이를 가져오거나 사용할 필요가 없습니다. --- @@ -12,7 +12,7 @@ title: Client React DOM APIs ## Client APIs {/*client-apis*/} * [`createRoot`](/reference/react-dom/client/createRoot)를 사용하면 브라우저 DOM 노드 안에 React 컴포넌트를 표시하는 루트를 생성할 수 있습니다. -* [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)를 사용하면 이전에 [`react-dom/server`.](/reference/react-dom/server)에 의해 생성된 HTML 콘텐츠가 있는 브라우저 DOM 노드 안에 React 컴포넌트를 표시할 수 있습니다. +* [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)를 사용하면 이전에 [`react-dom/server`](/reference/react-dom/server)에 의해 생성된 HTML 콘텐츠가 있는 브라우저 DOM 노드 안에 React 컴포넌트를 표시할 수 있습니다. --- ## 지원 브라우저 {/*browser-support*/} From 77e99b60dfe178b1a9e8c129e9a844372ac85bb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sat, 4 Jan 2025 01:23:54 +0900 Subject: [PATCH 0351/1012] docs: update `createRoot.md` --- .../reference/react-dom/client/createRoot.md | 57 +++++++++++-------- 1 file changed, 32 insertions(+), 25 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 6a8435aa3..584020571 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -36,25 +36,17 @@ root.render(); 온전히 React만으로 작성된 앱에서는 일반적으로 루트 컴포넌트에 대한 `createRoot` 호출이 하나만 있습니다. 페이지의 일부에 React를 "뿌려서" 사용하는 페이지의 경우에는 루트를 필요로 하는 만큼 작성할 수 있습니다. -[아래에서 더 많은 예시를 확인하세요.](#usage) +[아래 예시를 참고하세요.](#usage) #### 매개변수 {/*parameters*/} -* `domNode`: [DOM 엘리먼트.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React는 DOM 엘리먼트에 대한 루트를 생성하고 렌더링된 React 콘텐츠를 표시하는 `render`와 같은 함수를 루트에서 호출할 수 있도록 합니다. +* `domNode`: [DOM 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/API/Element). React는 DOM 엘리먼트에 대한 루트를 생성하고 렌더링된 React 콘텐츠를 표시하는 `render`와 같은 함수를 루트에서 호출할 수 있도록 합니다. * **optional** `options`: React 루트에 대한 옵션을 가진 객체입니다. - -<<<<<<< HEAD - * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. - * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`. - * **optional** `onRecoverableError`: React가 오류로부터 자동으로 복구될 때 호출되는 콜백. - * **optional** `identifierPrefix` : React가 [`useId`](/reference/react/useId)에 의해 생성된 ID에 사용하는 문자열 접두사. 같은 페이지에서 여러개의 루트를 사용할 때 충돌을 피하는 데 유용합니다. -======= * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`. - * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. ->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc + * **optional** `onRecoverableError`: React가 오류로부터 자동으로 복구될 때 호출되는 콜백. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. + * **optional** `identifierPrefix`: React가 [`useId`](/reference/react/useId)에 의해 생성된 ID에 사용하는 문자열 접두사. 같은 페이지에서 여러개의 루트를 사용할 때 충돌을 피하는 데 유용합니다. #### 반환값 {/*returns*/} @@ -69,7 +61,7 @@ root.render(); ### `root.render(reactNode)` {/*root-render*/} -`root.render`를 호출하여 [JSX](/learn/writing-markup-with-jsx)조각("React 노드")을 React 루트의 브라우저 DOM 노드에 표시합니다. +`root.render`를 호출하여 [JSX](/learn/writing-markup-with-jsx) 조각("React 노드")을 React 루트의 브라우저 DOM 노드에 표시합니다. ```js root.render(); @@ -77,7 +69,7 @@ root.render(); React는 `root`에 ``을 표시하고 그 안에 있는 DOM을 관리합니다. -[아래에서 더 많은 예시를 확인하세요.](#usage) +[아래 예시를 참고하세요.](#usage) #### 매개변수 {/*root-render-parameters*/} @@ -110,7 +102,7 @@ root.unmount(); 이 함수는 주로 React 루트의 DOM 노드(또는 그 조상 노드)가 다른 코드에 의해 DOM에서 제거될 수 있는 경우에 유용합니다. 예를 들어 DOM에서 비활성 탭을 제거하는 jQuery 탭 패널을 상상해 보세요. 탭이 제거되면 그 안에 있는 모든 것(내부의 React 루트를 포함)이 DOM에서 제거됩니다. 이 경우 `root.unmount`를 호출하여 제거된 루트의 콘텐츠 관리를 "중지"하도록 React에 지시해야 합니다. 그렇지 않으면 제거된 루트 내부의 컴포넌트는 구독과 같은 전역 리소스를 정리하고 확보하는 법을 모르는 채로 있게 됩니다. -`root.unmount`를 호출하면 루트에 있는 모든 컴포넌트가 마운트 해제되고, 트리상의 이벤트 핸들러나 state가 제거되며, 루트 DOM 노드에서 React가 "분리"됩니다. +`root.unmount`를 호출하면 루트에 있는 모든 컴포넌트가 마운트 해제되고, 트리상의 이벤트 핸들러나 State가 제거되며, 루트 DOM 노드에서 React가 "분리"됩니다. #### 매개변수 {/*root-unmount-parameters*/} @@ -126,7 +118,7 @@ root.unmount(); * `root.unmount`를 호출하면 트리의 모든 컴포넌트가 마운트 해제되고 루트 DOM 노드에서 React가 "분리"됩니다. -* `root.unmount`를 한 번 호출한 후에는 같은 루트에서 `root.render`를 다시 호출할 수 없습니다. 마운트 해제된 루트에서 `root.render`를 호출하려고 하면 "마운트 해제된 root를 업데이트할 수 없습니다." 오류가 발생합니다. 그러나 해당 노드의 이전 루트가 마운트 해제된 후 동일한 DOM 노드에 새로운 루트를 만들 수는 있습니다. +* `root.unmount`를 한 번 호출한 후에는 같은 루트에서 `root.render`를 다시 호출할 수 없습니다. 마운트 해제된 루트에서 `root.render`를 호출하려고 하면 "마운트 해제된 root를 업데이트할 수 없습니다.Cannot update an unmounted root" 오류가 발생합니다. 그러나 해당 노드의 이전 루트가 마운트 해제된 후 동일한 DOM 노드에 새로운 루트를 만들 수는 있습니다. --- @@ -196,7 +188,7 @@ function Counter() { **앱이 온전히 React만으로 작성된 경우, 추가적으로 루트를 더 만들거나 [`root.render`](#root-render)를 다시 호출할 필요가 없습니다.** -이 시점부터 React는 전체 앱의 DOM을 관리합니다. 컴포넌트를 더 추가하려면 [ `App` 컴포넌트 안에 중첩](/learn/importing-and-exporting-components)시키세요. UI 업데이트는 각 컴포넌트의 [state를 통해](/reference/react/useState) 수행할 수 있습니다. 모달이나 툴팁과 같은 추가 콘텐츠를 DOM 노드 외부에 표시해야 하는 경우 [portal로 렌더링](/reference/react-dom/createPortal)하세요. +이 시점부터 React는 전체 앱의 DOM을 관리합니다. 컴포넌트를 더 추가하려면 [ `App` 컴포넌트 안에 중첩](/learn/importing-and-exporting-components)시키세요. UI 업데이트는 각 컴포넌트의 [State를 통해](/reference/react/useState) 수행할 수 있습니다. 모달이나 툴팁과 같은 추가 콘텐츠를 DOM 노드 외부에 표시해야 하는 경우 [Portal로 렌더링](/reference/react-dom/createPortal)하세요. @@ -206,13 +198,13 @@ HTML이 비어있으면, 앱의 자바스크립트 코드가 로드되고 실행
``` -이것은 매우 느리게 느껴질 수 있습니다! 이 문제를 해결하기 위해 [서버에서 또는 빌드 중에](/reference/react-dom/server) 컴포넌트로부터 초기 HTML을 생성할 수 있습니다. 그러면 방문자는 자바스크립트 코드가 로드되기 전에 텍스트를 읽고, 이미지를 보고, 링크를 클릭할 수 있습니다. 이 최적화를 기본적으로 수행하는 [프레임워크를 사용](/learn/start-a-new-react-project#production-grade-react-frameworks)하는 것이 좋습니다. 실행 시점에 따라 이를 *서버 측 렌더링(SSR)* 또는 *정적 사이트 생성(SSG)* 이라고 합니다. +이것은 매우 느리게 느껴질 수 있습니다! 이 문제를 해결하기 위해 [서버에서 또는 빌드 중에](/reference/react-dom/server) 컴포넌트로부터 초기 HTML을 생성할 수 있습니다. 그러면 방문자는 자바스크립트 코드가 로드되기 전에 텍스트를 읽고, 이미지를 보고, 링크를 클릭할 수 있습니다. 이 최적화를 기본적으로 수행하는 [프레임워크를 사용](/learn/start-a-new-react-project#production-grade-react-frameworks)하는 것이 좋습니다. 실행 시점에 따라 이를 *서버 측 렌더링SSR* 또는 *정적 사이트 생성SSG* 이라고 합니다.
-**서버 렌더링이나 정적 생성을 사용하는 앱은 `createRoot` 대신 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)를 호출해야 합니다.** 그러면 React는 DOM 노드를 파괴하고 다시 생성하는 대신 HTML으로부터 *hydrate*(재사용)합니다. +**서버 측 렌더링이나 정적 사이트 생성을 사용하는 앱은 `createRoot` 대신 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)를 호출해야 합니다.** 그러면 React는 DOM 노드를 파괴하고 다시 생성하는 대신 HTML으로부터 *Hydrate*(재사용)합니다. --- @@ -221,7 +213,7 @@ HTML이 비어있으면, 앱의 자바스크립트 코드가 로드되고 실행 페이지가 [React만으로 작성되지 않은 경우](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), React가 관리하는 각 최상위 UI에 대한 루트를 생성하기 위해 `createRoot`를 여러 번 호출할 수 있습니다. 루트마다 [`root.render`](#root-render)를 호출함으로써 각각 다른 콘텐츠를 표시할 수 있습니다. -다음 예시에서는 서로 다른 두 개의 React 컴포넌트가 `index.html` 파일에 정의된 두 개의 DOM 노드에 렌더링합니다. +다음 예시에서는 서로 다른 두 개의 React 컴포넌트를 `index.html` 파일에 정의된 두 개의 DOM 노드에 렌더링합니다. @@ -316,7 +308,7 @@ root.unmount(); ### Updating a root component {/*updating-a-root-component*/} -같은 루트에서 `render`를 두 번 이상 호출할 수도 있습니다. 컴포넌트 트리 구조가 이전 렌더링과 일치하는 한, React는 [기존 state를 유지](/learn/preserving-and-resetting-state)합니다. 다음 예시에서 input에 어떻게 타이핑하든 관계없이, 매 초 반복되는 `render` 호출로 인한 업데이트가 아무런 문제를 일으키지 않음을 주목하세요. +같은 루트에서 `render`를 두 번 이상 호출할 수도 있습니다. 컴포넌트 트리 구조가 이전 렌더링과 일치하는 한, React는 [기존 State를 유지](/learn/preserving-and-resetting-state)합니다. 다음 예시에서 입력 창에 어떻게 타이핑하든 관계없이, 매 초 반복되는 `render` 호출로 인한 업데이트가 아무런 문제를 일으키지 않음을 주목하세요. @@ -347,7 +339,7 @@ export default function App({counter}) { -`render`를 여러 번 호출하는 경우는 흔하지 않습니다. 일반적으로는, 컴포넌트가 [state를 업데이트](/reference/react/useState)합니다. +`render`를 여러 번 호출하는 경우는 흔하지 않습니다. 일반적으로는, 컴포넌트가 [State를 업데이트](/reference/react/useState)합니다. ### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/} @@ -1136,7 +1128,7 @@ root.render(); --- -### "대상 컨테이너가 DOM 엘리먼트가 아닙니다" 라는 오류가 발생합니다. {/*im-getting-an-error-target-container-is-not-a-dom-element*/} +### I'm getting an error: "You passed a second argument to root.render" {/*im-getting-an-error-you-passed-a-second-argument-to-root-render*/} A common mistake is to pass the options for `createRoot` to `root.render(...)`: @@ -1156,6 +1148,21 @@ const root = createRoot(container, {onUncaughtError}); root.render(); ``` +--- + +### "대상 컨테이너가 DOM 엘리먼트가 아닙니다" 라는 오류가 발생합니다. {/*im-getting-an-error-target-container-is-not-a-dom-element*/} + +This error means that whatever you're passing to `createRoot` is not a DOM node. + +If you're not sure what's happening, try logging it: + +```js {2} +const domNode = document.getElementById('root'); +console.log(domNode); // ??? +const root = createRoot(domNode); +root.render(); +``` + 예를 들어 `domNode`가 `null`이면 [`getElementById`](https://developer.mozilla.org/ko/docs/Web/API/Document/getElementById) 가 `null`을 반환했음을 의미합니다. 이는 호출 시점에 문서에 지정된 ID를 가진 노드가 없는 경우에 발생합니다. 여기에는 몇 가지 이유가 있을 수 있습니다. 1. 찾고자 하는 ID가 HTML 파일에서 사용한 ID와 다를 수 있습니다. 오타가 있는지 확인하세요! @@ -1169,7 +1176,7 @@ root.render(); 이 오류는 `root.render`에 전달하는 것이 React 컴포넌트가 아님을 의미합니다. -이 오류는 `` 대신 `Component`로 `root.render`를 호출할 때 발생할 수 있습니다 +이 오류는 `` 대신 `Component`로 `root.render`를 호출할 때 발생할 수 있습니다. ```js {2,5} // 🚩 Wrong: App is a function, not a Component. @@ -1193,7 +1200,7 @@ root.render(createApp()); ### 서버에서 렌더링된 HTML이 처음부터 다시 생성됩니다 {/*my-server-rendered-html-gets-re-created-from-scratch*/} -앱이 서버에서 렌더링 되고 React의 초기 HTML을 포함하는 경우에, 루트를 생성해서 `root.render`를 호출하면, 모든 HTML이 삭제되고 모든 DOM 노드가 처음부터 다시 생성되는 것을 볼 수 있습니다. 이렇게 하면 속도가 느려지고, 포커스와 스크롤 위치가 재설정되며, 그 밖의 다른 사용자 입력들이 손실될 수 있습니다. +앱이 서버에서 렌더링되고 React의 초기 HTML을 포함하는 경우에, 루트를 생성해서 `root.render`를 호출하면, 모든 HTML이 삭제되고 모든 DOM 노드가 처음부터 다시 생성되는 것을 볼 수 있습니다. 이렇게 하면 속도가 느려지고, 포커스와 스크롤 위치가 재설정되며, 그 밖의 다른 사용자 입력들이 손실될 수 있습니다. 서버에서 렌더링된 앱은 `createRoot` 대신 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)를 사용해야 합니다. From bbb67f5577f01322f520055ae198ed678a0d3290 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sat, 4 Jan 2025 15:02:18 +0900 Subject: [PATCH 0352/1012] docs: update `hydrateRoot.md` --- .../reference/react-dom/client/createRoot.md | 8 +- .../reference/react-dom/client/hydrateRoot.md | 196 ++++++++---------- 2 files changed, 90 insertions(+), 114 deletions(-) diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 584020571..3215ac45d 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -50,11 +50,11 @@ root.render(); #### 반환값 {/*returns*/} -`createRoot`는 [`render`](#root-render)와 [`unmount`](#root-unmount) 두 가지 메서드가 있는 객체를 반환합니다. +`createRoot`는 [`render`](#root-render)와 [`unmount`](#root-unmount) 두 가지 메서드를 포함한 객체를 반환합니다. #### 주의 사항 {/*caveats*/} * 앱이 서버에서 렌더링 되는 경우 `createRoot()`는 사용할 수 없습니다. 대신 [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot)를 사용하세요. -* 앱에 `createRoot` 호출이 단 하나만 있을 가능성이 높습니다. 프레임워크를 사용하는 경우 프레임워크가 이 호출을 대신 수행할 수도 있습니다. +* 앱에서 `createRoot` 호출이 단 한번만 있을 가능성이 높습니다. 프레임워크를 사용하는 경우 프레임워크가 이 호출을 대신 수행할 수도 있습니다. * 컴포넌트의 자식이 아닌 DOM 트리의 다른 부분(예: 모달 또는 툴팁)에 JSX 조각을 렌더링하려는 경우, `createRoot` 대신 [`createPortal`](/reference/react-dom/createPortal)을 사용하세요. --- @@ -92,7 +92,7 @@ React는 `root`에 ``을 표시하고 그 안에 있는 DOM을 관리합 ### `root.unmount()` {/*root-unmount*/} -`root.unmount`를 호출하면 React 루트 내부에서 렌더링 된 트리를 삭제합니다. +`root.unmount`를 호출하면 React 루트 내부에서 렌더링된 트리를 삭제합니다. ```js root.unmount(); @@ -118,7 +118,7 @@ root.unmount(); * `root.unmount`를 호출하면 트리의 모든 컴포넌트가 마운트 해제되고 루트 DOM 노드에서 React가 "분리"됩니다. -* `root.unmount`를 한 번 호출한 후에는 같은 루트에서 `root.render`를 다시 호출할 수 없습니다. 마운트 해제된 루트에서 `root.render`를 호출하려고 하면 "마운트 해제된 root를 업데이트할 수 없습니다.Cannot update an unmounted root" 오류가 발생합니다. 그러나 해당 노드의 이전 루트가 마운트 해제된 후 동일한 DOM 노드에 새로운 루트를 만들 수는 있습니다. +* `root.unmount`를 한 번 호출한 후에는 같은 루트에서 `root.render`를 다시 호출할 수 없습니다. 마운트 해제된 루트에서 `root.render`를 호출하려고 하면 "마운트 해제된 루트를 업데이트할 수 없습니다.Cannot update an unmounted root" 오류가 발생합니다. 그러나 해당 노드의 이전 루트가 마운트 해제된 후 동일한 DOM 노드에 새로운 루트를 만들 수는 있습니다. --- diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 34fd04f4b..db0a3b9d7 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -4,7 +4,7 @@ title: hydrateRoot -`hydrateRoot`는 [`react-dom/server`](/reference/react-dom/server)를 통해 사전에 만들어진 HTML로 그려진 브라우저 DOM 노드 내부에 React 컴포넌트를 렌더링합니다. +`hydrateRoot`는 이전에 [`react-dom/server`](/reference/react-dom/server)로 생성된 HTML 콘텐츠를 가진 브라우저 DOM 노드 안에 React 컴포넌트를 표시할 수 있게 해줍니다. ```js const root = hydrateRoot(domNode, reactNode, options?) @@ -20,7 +20,7 @@ const root = hydrateRoot(domNode, reactNode, options?) ### `hydrateRoot(domNode, reactNode, options?)` {/*hydrateroot*/} -서버 환경에서 React로 앞서 만들어진 HTML에 후에 만들어진 React를 `hydrateRoot`를 호출해 "붙입니다". +`hydrateRoot`를 호출하여 이미 서버 환경에서 렌더링된 기존 HTML에 React를 "붙여넣기" 합니다. ```js import { hydrateRoot } from 'react-dom/client'; @@ -29,82 +29,78 @@ const domNode = document.getElementById('root'); const root = hydrateRoot(domNode, reactNode); ``` -React는 `domNode` 내부의 HTML에 붙어, 내부 DOM을 직접 관리할 것입니다. App을 React로 전부 만들었다면 보통은 단 하나의 root 컴포넌트와 함께 `hydrateRoot`를 한 번 호출할 것입니다. +React는 `domNode` 내부에 존재하는 HTML에 연결되어, 그 내부의 DOM 관리를 맡게 됩니다. React로 완전히 구축된 앱은 일반적으로 루트 컴포넌트와 함께 하나의 `hydrateRoot` 호출만 가집니다. -[아래 여러 예시를 확인해보세요.](#usage) +[아래 예시를 참고하세요.](#usage) -#### Parameters {/*parameters*/} +#### 매개변수 {/*parameters*/} -* `domNode`: 서버에서 root 엘리먼트로 렌더링된 [DOM 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/API/Element) +* `domNode`: 서버에서 루트 요소Element로 렌더링된 [DOM 요소](https://developer.mozilla.org/en-US/docs/Web/API/Element). -* `reactNode`: 앞서 존재하는 HTML에 렌더링하기 위한 "React 노드" 입니다. 주로 `ReactDOM Server`의 `renderToPipeableStream()`와 같은 메소드로 렌더링된 ``같은 JSX 조각들입니다. - -* **optional** `options`: React root에 옵션을 주기 위한 객체입니다. +* `reactNode`: 기존 HTML에 렌더링하기 위한 "React 노드" 입니다. 주로 `ReactDOM Server`의 `renderToPipeableStream()`와 같은 메서드로 렌더링된 ``과 같은 JSX 조각들입니다. +* **optional** `options`: React 루트에 대한 옵션을 가진 객체입니다. * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`. - * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server. - - * **optional** `onRecoverableError`: React가 에러에서 자동으로 회복되었을 때 호출하는 콜백함수. - * **optional** `identifierPrefix`: React가 ID로 사용하는 접두사로 [`useId`](/reference/react/useId)로 만들어진 값입니다. 같은 페이지에서 여러 root를 사용할 때 충돌을 피할 때 유용하게 사용할 수 있습니다. 서버에서 사용한 값과 반드시 동일한 값이어야 합니다. + * **optional** `onRecoverableError`: React가 오류로부터 자동으로 복구될 때 호출되는 콜백. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. + * **optional** `identifierPrefix`: React가 [`useId`](/reference/react/useId)에 의해 생성된 ID에 사용하는 문자열 접두사. 같은 페이지에서 여러개의 루트를 사용할 때 충돌을 피하는 데 유용합니다. 서버에서 사용한 값과 반드시 동일한 값이어야 합니다. -#### Returns {/*returns*/} +#### 반환값 {/*returns*/} -`hydrateRoot`는 2가지 메소드가 포함된 객체를 반환합니다 : [`render`](#root-render) 그리고 [`unmount`.](#root-unmount) +`hydrateRoot`는 [`render`](#root-render)와 [`unmount`](#root-unmount) 두 가지 메서드를 포함한 객체를 반환합니다. #### 주의 사항 {/*caveats*/} -* `hydrateRoot()`는 서버에서 렌더링된 내용과 후에 렌더링된 내용이 동일할 것을 기대합니다. 따라서 동일하지 않은 부분들은 직접 버그로 취급해주거나 고쳐줘야 합니다. -* 개발 모드에선, React가 hydration 중에 동일하지 않은 부분에 대해 경고해줍니다. 속성이 동일하지 않을 경우에 해당 속성이 올바르게 적용될 것이라고 보장할 수 없습니다. 모든 마크업을 보장하지 않는 것은 성능면에서 중요하기 때문입니다. 마크업이 동일하지 않는 경우는 드물기 때문에 모든 마크업을 검증하는 비용은 굉장히 비쌉니다. -* 여러분은 App에서 `hydrateRoot`를 단 한 번만 호출하게 될 것입니다. 만약 프레임워크를 사용한다면, 프레임워크가 대신 호출해 줄 것입니다. -* App을 사전에 렌더링된 HTML 없이 클라이언트에서 직접 렌더링을 한다면 `hydrateRoot()`은 지원되지 않습니다. [`createRoot()`](/reference/react-dom/client/createRoot)를 대신 사용해주세요. +* `hydrateRoot()`는 렌더링된 컨텐츠가 서버에서 렌더링된 컨텐츠와 동일할 것을 기대합니다. 따라서 불일치 사항은 버그로 취급하고 수정해야 합니다. +* 개발 모드에서는 React가 Hydration 중 불일치에 대해 경고합니다. 불일치가 발생할 경우 속성 차이가 수정될 것이라는 보장은 없습니다. 이는 성능상의 이유로 중요한데, 대부분의 앱에서 불일치는 드물기 때문에 모든 마크업을 검증하는 것은 매우 비효율적이기 때문입니다. +* 앱에서 `hydrateRoot` 호출이 단 한번만 있을 가능성이 높습니다. 프레임워크를 사용한다면, 프레임워크가 이 호출을 대신 수행할 수도 있습니다. +* 앱을 사전에 렌더링된 HTML 없이 클라이언트에서 직접 렌더링한다면, `hydrateRoot()`는 지원되지 않습니다. [`createRoot()`](/reference/react-dom/client/createRoot)를 대신 사용해주세요. --- ### `root.render(reactNode)` {/*root-render*/} -hydrate된 React root부터 내부 컴포넌트를 새로운 React 컴포넌트로 갱신하기 위해 `root.render`를 호출해주세요. 브라우저 DOM 요소들도 함께 갱신됩니다. +브라우저 DOM 요소 내에서 Hydrate된 React 루트 안의 React 컴포넌트를 업데이트 하려면 `root.render`를 호출하세요. ```js root.render(); ``` -React는 hydrate된 `root`부터 내부를 ``으로 갱신합니다. +React는 Hydrate된 `root`에서 ``을 업데이트합니다. -[아래 예시를 확인해보세요.](#usage) +[아래 예시를 참고하세요.](#usage) -#### Parameters {/*root-render-parameters*/} +#### 매개변수 {/*root-render-parameters*/} -* `reactNode`: 갱신하고 싶은 "React 노드"입니다. 주로 ``같은 JSX를 매개변수로 넘기지만, [`createElement()`](/reference/react/createElement)로 만든 React 엘리먼트를 넘겨도 되고 문자열이나 숫자, `null`, 혹은 `undefined`를 넘겨도 됩니다. +* `reactNode`: 업데이트하고 싶은 "React 노드"입니다. 주로 ``같은 JSX를 매개변수로 넘기지만, [`createElement()`](/reference/react/createElement)로 만든 React 요소 혹은 문자열, 숫자, `null`, `undefined`를 넘겨도 됩니다. -#### Returns {/*root-render-returns*/} +#### 반환값 {/*root-render-returns*/} `root.render`는 `undefined`를 반환합니다. #### 주의 사항 {/*root-render-caveats*/} -* hydrate가 끝나기 전에 `root.render`를 호출하면 React는 서버에서 렌더링된 HTML을 모두 없애고 클라이언트에서 렌더링된 컴포넌트들로 완전히 교체합니다. +* 루트가 Hydrate를 완료하기 전에 `root.render`를 호출하면, React는 서버에서 렌더링된 HTML을 모두 없애고 클라이언트에서 렌더링된 컴포넌트들로 완전히 교체합니다. --- ### `root.unmount()` {/*root-unmount*/} -`root.unmount`를 호출해 React root부터 그 하위에 렌더링된 트리를 삭제합니다. +`root.unmount`를 호출하면 React 루트 내부에서 렌더링된 트리를 삭제합니다. ```js root.unmount(); ``` -처음부터 끝까지 React로 만든 앱은 `root.unmount`를 호출할 경우가 거의 없습니다. +온전히 React만으로 작성된 앱에는 일반적으로 `root.unmount`에 대한 호출이 없습니다. -주로 React root부터 혹은 그 상위에서부터 시작된 DOM node들을 다른 코드에 의해 DOM에서 삭제되어야 하는 경우 유용합니다. 예를 들어, jQuery 탭 패널이 활성화 되어 있지 않은 탭을 DOM에서 지운다고 가정해봅시다. 탭이 지워지면, React root와 그 내부를 포함해 그 안의 모든 것이 지워지게 되고 DOM에서 또한 지워지게 됩니다. `root.unmount`를 호출해 React에게 삭제된 컨텐츠들을 "그만" 다루라고 알려주어야 합니다. 그렇지 않으면 삭제되어버린 React root 내부의 컴포넌트들은 삭제되지 않을 것이며, "구독"처럼 컴퓨팅 자원을 자유롭게 놓아주지 못하게 됩니다. +이 함수는 주로 React 루트의 DOM 노드(또는 그 조상 노드)가 다른 코드에 의해 DOM에서 제거될 수 있는 경우에 유용합니다. 예를 들어 DOM에서 비활성 탭을 제거하는 jQuery 탭 패널을 상상해 보세요. 탭이 제거되면 그 안에 있는 모든 것(내부의 React 루트를 포함)이 DOM에서 제거됩니다. 이 경우 `root.unmount`를 호출하여 제거된 루트의 콘텐츠 관리를 "중지"하도록 React에 지시해야 합니다. 그렇지 않으면 제거된 루트 내부의 컴포넌트는 구독과 같은 전역 리소스를 정리하고 확보하는 법을 모르는 채로 있게 됩니다. -`root.unmount`를 호출하면 root 내부의 모든 컴포넌트를 마운트 해제하고 root DOM node에서 React를 "떼어"냅니다. root 내부의 이벤트 핸들러와 state까지 모두 포함해 마운트 해제 및 삭제됩니다. +`root.unmount`를 호출하면 루트에 있는 모든 컴포넌트가 마운트 해제되고, 트리상의 이벤트 핸들러나 State가 제거되며, 루트 DOM 노드에서 React가 "분리"됩니다. -#### Parameters {/*root-unmount-parameters*/} +#### 매개변수 {/*root-unmount-parameters*/} -`root.unmount`는 그 어떤 매개변수도 받지 않습니다. +`root.unmount`는 매개변수를 받지 않습니다. #### Returns {/*root-unmount-returns*/} @@ -113,17 +109,17 @@ root.unmount(); #### 주의 사항 {/*root-unmount-caveats*/} -* `root.unmount`를 호출하면 root부터 그 안의 모든 컴포넌트가 마운트 해제되고 root DOM node에서 React를 떼어냅니다. +* `root.unmount`를 호출하면 트리의 모든 컴포넌트가 마운트 해제되고 루트 DOM 노드에서 React가 "분리"됩니다. -* `root.unmount`를 한번 호출한 이후엔 `root.render`를 root에 다시 사용할 수 없습니다. 마운트 해제된 root에 다시 `root.render`를 호출하려고 한다면 "Cannot update an unmounted root" 에러를 throw하게 됩니다. +* `root.unmount`를 한 번 호출한 후에는 같은 루트에서 `root.render`를 다시 호출할 수 없습니다. 마운트 해제된 루트에서 `root.render`를 호출하려고 하면 "마운트 해제된 루트를 업데이트할 수 없습니다.Cannot update an unmounted root" 오류가 발생합니다. --- -## 사용 예시 {/*usage*/} +## 사용법 {/*usage*/} -### 서버에서 렌더링된 HTML을 hydrate하기 {/*hydrating-server-rendered-html*/} +### 서버에서 렌더링된 HTML을 Hydrate하기 {/*hydrating-server-rendered-html*/} -[`react-dom/server`](/reference/react-dom/client/createRoot)로 앱의 HTML을 생성했다면, 클라이언트에서 *hydrate*해주어야 합니다. +[`react-dom/server`](/reference/react-dom/client/createRoot)로 앱의 HTML을 생성했다면, 클라이언트에서 *Hydrate* 해주어야 합니다. ```js [[1, 3, "document.getElementById('root')"], [2, 3, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -131,9 +127,9 @@ import { hydrateRoot } from 'react-dom/client'; hydrateRoot(document.getElementById('root'), ); ``` -위 코드를 통해 서버 HTML을 브라우저 DOM node에서 React 컴포넌트를 이용해 hydrate 해줄 것 입니다. 주로 앱을 시작할 때 단 한 번 실행하게 될 것입니다. 프레임워크를 사용중이라면 프레임워크가 알아서 실행해 줄 것입니다. +위 코드를 통해 서버 HTML을 브라우저 DOM 노드에서 React 컴포넌트를 이용해 Hydrate 해줄 것 입니다. 주로 앱을 시작할 때 단 한 번 실행할 것입니다. 프레임워크를 사용중이라면 프레임워크가 대신 실행해 줄 것입니다. -앱을 hydrate하기 위해서 React는 컴포넌트의 로직을 사전에 서버에서 만들어 진 HTML에 "붙일"것 입니다. Hydration을 통해 서버에서 만들어진 최초의 HTML 스냅샷을 브라우저에서 완전히 인터랙티브한 앱으로 바꿔주게 됩니다. +앱을 Hydrate 하기 위해서 React는 컴포넌트의 로직을 사전에 서버에서 만들어 진 HTML에 "붙여넣을"것 입니다. Hydration을 통해 서버에서 만들어진 최초의 HTML 스냅샷을 브라우저에서 완전히 인터랙티브한 앱으로 바꿔주게 됩니다. @@ -180,30 +176,30 @@ function Counter() { -`hydrateRoot`를 다시 호출하거나 다른 곳에서 더 호출할 필요는 없습니다. 이 시점부터 React가 애플리케이션의 DOM을 다루게 됩니다. 대신 UI를 갱신하기 위해선 [state를 사용](/reference/react/useState)해야 합니다. +`hydrateRoot`를 다시 호출하거나 다른 곳에서 더 호출할 필요는 없습니다. 이 시점부터 React가 애플리케이션의 DOM을 다루게 됩니다. 대신 UI를 갱신하기 위해선 [State를 사용](/reference/react/useState)해야 합니다. `hydrateRoot`에 전달한 React 트리는 서버에서 만들었던 React 트리 결과물과 동일해야 합니다. -이는 사용자 경험을 위해서 중요합니다. 사용자는 서버에서 만들어진 HTML을 JavaScript 코드가 로드될 때까지 둘러보게 됩니다. 앱의 로딩을 더 빠르게 하기 위해 서버는 일종의 신기루로서 React 결과물인 HTML 스냅샷을 만들어 보여줍니다. 갑자기 다른 컨텐츠를 보여주게 되면 신기루가 깨져버리게 됩니다. 이런 이유로 서버에서 렌더링한 결과물과 클라이언트에서 최초로 렌더링한 결과물이 같아야 합니다. +이는 사용자 경험을 위해서 중요합니다. 사용자는 서버에서 만들어진 HTML을 자바스크립트 코드가 로드될 때까지 둘러보게 됩니다. 앱의 로딩을 더 빠르게 하기 위해 서버는 일종의 신기루로서 React 결과물인 HTML 스냅샷을 만들어 보여줍니다. 갑자기 다른 컨텐츠를 보여주게 되면 신기루가 깨져버리게 됩니다. 이런 이유로 서버에서 렌더링한 결과물과 클라이언트에서 최초로 렌더링한 결과물이 같아야 합니다. -주로 아래와 같은 원인으로 hydration 에러가 일어납니다. +주로 아래와 같은 원인들로 Hydration 오류가 일어납니다. -* React를 통해 만들어진 HTML의 root node안에 새 줄같은 추가적인 공백. -* `typeof window !== 'undefined'`과 같은 조건을 렌더링 로직에서 사용함. -* [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)같은 브라우저에서만 사용가능한 API를 렌더링 로직에 사용함. -* 서버와 클라이언트에서 서로 다른 데이터를 렌더링함. +* React를 통해 만들어진 HTML의 루트 노드안에 공백 혹은 개행같은 추가적인 공백. +* `typeof window !== 'undefined'`과 같은 조건을 렌더링 로직에서 사용. +* [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)같은 브라우저에서만 사용가능한 API를 렌더링 로직에 사용. +* 서버와 클라이언트에서 서로 다른 데이터를 렌더링. -React는 hydration 에러에서 복구됩니다, 하지만 **다른 버그들과 같이 반드시 고쳐줘야 합니다.** 가장 나은 경우는 그저 느려지기만 할 뿐이지만, 최악의 경우엔 이벤트 핸들러가 다른 엘리먼트에 붙어버립니다. +React는 Hydration 오류에서 복구됩니다, 하지만 **다른 버그들과 같이 반드시 고쳐줘야 합니다.** 가장 나은 경우는 그저 느려지기만 할 뿐이지만, 최악의 경우엔 이벤트 핸들러가 다른 요소Element에 붙어버립니다. --- -### document 전체를 hydrate하기 {/*hydrating-an-entire-document*/} +### `document` 전체를 Hydrate하기 {/*hydrating-an-entire-document*/} -React로 앱을 모두 만들었을 경우 [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)태그를 포함해 JSX로 된 전체 document를 렌더링할 수 있습니다. +React로 앱을 모두 만들었을 경우 [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) 태그를 포함해 JSX로 된 전체 `document`를 렌더링할 수 있습니다. ```js {3,13} function App() { @@ -223,7 +219,7 @@ function App() { } ``` -전체 document를 hydrate하기 위해선 글로벌 변수인 [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Window/document)를 `hydrateRoot`의 첫번째 인자로 넘깁니다: +전체 `document`를 Hydrate하기 위해선 전역 변수인 [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Window/document)를 `hydrateRoot`의 첫번째 인수로 넘깁니다. ```js {4} import { hydrateRoot } from 'react-dom/client'; @@ -234,11 +230,11 @@ hydrateRoot(document, ); --- -### 어쩔 수 없는 hydration 불일치 에러 억제하기 {/*suppressing-unavoidable-hydration-mismatch-errors*/} +### 어쩔 수 없는 Hydration 불일치 오류 억제하기 {/*suppressing-unavoidable-hydration-mismatch-errors*/} -어떤 엘리먼트의 속성이나 text content가 서버와 클라이언트에서 어쩔 수 없이 다를 땐(예를 들어, timestamp를 이용했다거나), hydration 불일치 경고를 안보이게 할 수 있습니다. +어떤 요소Element의 속성이나 텍스트 컨텐츠가 서버와 클라이언트에서 어쩔 수 없이 다를 땐(예를 들어, timestamp를 이용했다거나), Hydration 불일치 경고를 안보이게 할 수 있습니다. -해당 엘리먼트에서 hydration 경고를 끄기 위해선 `suppressHydrationWarning={true}`를 추가하면 됩니다. +해당 요소에서 Hydration 경고를 끄기 위해선 `suppressHydrationWarning={true}`를 추가하면 됩니다. @@ -270,13 +266,13 @@ export default function App() { -이것은 한 단계 아래까지만 적용되며 비상 탈출구를 의도한 것입니다. 남용하지 마세요. text context가 아닌 한, React는 잘못된 부분을 수정하지 않을 것이며 갱신이 일어나기 전까지는 불일치한 상태로 남아있을 것입니다. +이것은 한 단계 아래까지만 적용되며 탈출구Escape Hatch를 의도한 것입니다. 남용하지 마세요. 텍스트 컨텐츠가 아닌 한 React는 잘못된 부분을 수정하지 않을 것이며, 갱신이 일어나기 전까지는 불일치 상태로 남아있을 것입니다. --- ### 서로 다른 클라이언트와 서버 컨텐츠 다루기 {/*handling-different-client-and-server-content*/} -의도적으로 서버와 클라이언트에서 서로 다른 내용을 렌더링하길 원한다면, 서버와 클라이언트에서 서로 다른 방법으로 렌더링하면 됩니다. 클라이언트에서 서버와는 다른 것을 렌더링할 때 클라이언트에선 [Effect](/reference/react/useEffect)에서 `true`로 할당되는 `isClient`같은 [상태 변수](/reference/react/useState)를 읽을 수 있습니다. +의도적으로 서버와 클라이언트에서 서로 다른 내용을 렌더링하길 원한다면, 서버와 클라이언트에서 서로 다른 방법으로 렌더링하면 됩니다. 클라이언트에서 서버와는 다른 것을 렌더링할 때 클라이언트에선 [Effect](/reference/react/useEffect)에서 `true`로 할당되는 `isClient`같은 [State 변수](/reference/react/useState)를 읽을 수 있습니다. @@ -316,21 +312,21 @@ export default function App() { -이 방법은 처음엔 서버와 동일한 결과물을 렌더링하게 되어 불일치 문제를 피하게 되고, hydration후에 새로운 결과물이 동기적으로 렌더링됩니다. +이 방법은 처음엔 서버와 동일한 결과물을 렌더링하여 불일치 문제를 피하고, Hydration 후에 새로운 결과물이 동기적으로 렌더링됩니다. -이 방법은 2번 렌더링해야 하기 때문에 hydration을 느리게 합니다. 느린 통신 상태일 경우에 사용자 경험을 염두하세요. 초기 HTML이 렌더된 한참 이후에야 JavaScript 코드를 불러오게 됩니다. 따라서 hydration 이후에 바로 다른 UI를 렌더링하는 것은 사용자에게 UI가 삐걱거리는 것처럼 보일 수 있습니다. +이 방법은 두 번 렌더링해야 하기 때문에 Hydration을 느리게 합니다. 느린 통신 상태일 경우에 사용자 경험을 염두하세요. 초기 HTML이 렌더링된 한참 후에야 자바스크립트 코드를 불러옵니다. 따라서 Hydration 이후에 바로 다른 UI를 렌더링하는 것은 사용자에게 UI가 삐걱거리는 것처럼 보일 수 있습니다. --- -### hydrate된 root 컴포넌트를 업데이트하기 {/*updating-a-hydrated-root-component*/} +### Hydration된 루트 컴포넌트를 업데이트하기 {/*updating-a-hydrated-root-component*/} -root의 hydrating이 끝난 이후에, [`root.render`](#root-render)를 호출해 React 컴포넌트의 root를 업데이트 할 수 있습니다. **[`createRoot`](/reference/react-dom/client/createRoot)와는 다르게 HTML로 최초의 컨텐츠가 이미 렌더링 되어 있기 때문에 자주 사용할 필요는 없습니다.** +루트의 Hydration이 끝난 후에, [`root.render`](#root-render)를 호출해 React 컴포넌트의 루트를 업데이트 할 수 있습니다. **[`createRoot`](/reference/react-dom/client/createRoot)와는 다르게 HTML로 최초의 컨텐츠가 이미 렌더링 되어 있기 때문에 자주 사용할 필요는 없습니다.** -hydration 후 어떤 시점에 `root.render`를 호출한다면, 그리고 컴포넌트의 트리 구조가 이전에 렌더링했던 구조와 일치한다면, React는 [상태를 그대로 보존합니다.](/learn/preserving-and-resetting-state) input에 어떻게 타이핑하는지에 따라 문제가 발생하지 않습니다. 즉, 아래 예시에서처럼 매초 마다 상태를 업데이트하는 반복적인 `render`는 문제 없이 렌더링 된다는 것을 볼 수 있습니다: +Hydration 후 어떤 시점에 `root.render`를 호출한다면, 그리고 컴포넌트의 트리 구조가 이전에 렌더링했던 구조와 일치한다면, React는 [State를 그대로 보존합니다.](/learn/preserving-and-resetting-state) 입력 창Input에 어떻게 타이핑하든지 간에 문제가 발생하지 않습니다. 즉, 아래 예시에서처럼 매초 마다 상태를 업데이트하는 반복적인 `render`를 문제 없이 렌더링 한다는 것을 알 수 있습니다. @@ -371,21 +367,11 @@ export default function App({counter}) { -hydrate된 root에서 [`root.render`](#root-render)를 호출하는 것은 흔한 일은 아닙니다. 내부 컴포넌트 중 한 곳에서 [useState](/reference/react/useState)를 하는 것이 일반적입니다. - -### 처리되지 않은 에러에 대한 대화 상자 표시하기 {/*show-a-dialog-for-uncaught-errors*/} - -<<<<<<< HEAD - +Hydration된 루트에서 [`root.render`](#root-render)를 호출하는 것은 흔한 일은 아닙니다. 내부 컴포넌트 중 한 곳에서 [useState](/reference/react/useState)를 사용하는 것이 일반적입니다. -`onUncaughtError`는 최신 React Canary 릴리스에서만 사용할 수 있습니다. +### 처리되지 않은 오류에 대한 대화 상자 표시하기 {/*show-a-dialog-for-uncaught-errors*/} - - -기본적으로 React는 처리되지 않은 모든 에러를 콘솔에 기록합니다. 자체적인 에러 보고 기능을 구현하려면 선택적 root 옵션인 `onUncaughtError`를 사용할 수 있습니다. -======= -By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option: ->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc +기본적으로 React는 처리되지 않은 모든 오류를 콘솔에 기록합니다. 자체적인 오류 보고 기능을 구현하려면 선택적 루트 옵션인 `onUncaughtError`를 사용할 수 있습니다. ```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]] import { hydrateRoot } from 'react-dom/client'; @@ -406,12 +392,12 @@ const root = hydrateRoot( root.render(); ``` -onUncaughtError 옵션은 두 개의 인자를 받는 함수입니다. +onUncaughtError 옵션은 두 개의 인수를 받는 함수입니다. -1. 발생한 에러. -2. 에러의 componentStack을 포함하는 errorInfo 객체. +1. 발생한 error. +2. 오류의 componentStack을 포함하는 errorInfo 객체. -`onUncaughtError` root 옵션을 사용해 에러 대화 상자를 표시할 수 있습니다. +`onUncaughtError` 루트 옵션을 사용해 오류 대화 상자를 표시할 수 있습니다. @@ -423,7 +409,7 @@ root.render();