From 91048f2a0050f9e05e998b03108de81b1ff8ff23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 14:28:07 +0900
Subject: [PATCH 01/46] docs: update `input.md`

---
 .../reference/react-dom/components/input.md   | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
index 69016db9c..eb9661b6f 100644
--- a/src/content/reference/react-dom/components/input.md
+++ b/src/content/reference/react-dom/components/input.md
@@ -4,7 +4,7 @@ title: "<input>"
 
 <Intro>
 
-[내장 브라우저 `<input>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)를 사용하면 여러 종류의 폼 입력<sup>Input</sup>을 렌더링 할 수 있습니다.
+[내장 브라우저 `<input>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)를 사용하면 여러 종류의 폼 입력<sup>Input</sup>을 렌더링할 수 있습니다.
 
 ```js
 <input />
@@ -91,8 +91,8 @@ You can [make an input controlled](#controlling-an-input-with-a-state-variable)
 #### 주의 사항 {/*caveats*/}
 
 - 체크박스에는 `value` (또는 `defaultValue`)가 아닌 `checked` (또는 `defaultChecked`)가 필요합니다.
-- 텍스트 입력 영역은 문자열 `value` prop을 받을 경우 [제어되는 것으로 취급](#controlling-an-input-with-a-state-variable)됩니다.
-- 체크박스 또는 라디오 버튼이 불리언 `checked` prop을 받을 경우 [제어되는 것으로 취급](#controlling-an-input-with-a-state-variable)됩니다.
+- 텍스트 입력 영역은 문자열 `value` Prop을 받을 경우 [제어되는 것으로 취급](#controlling-an-input-with-a-state-variable)됩니다.
+- 체크박스 또는 라디오 버튼이 불리언 `checked` Prop을 받을 경우 [제어되는 것으로 취급](#controlling-an-input-with-a-state-variable)됩니다.
 - 입력은 제어되면서 동시에 비제어될 수 없습니다.
 - 입력은 생명주기 동안 제어 또는 비제어 상태를 오갈 수 없습니다.
 - 제어되는 입력엔 모두 백업 값을 동기적으로 업데이트하는 `onChange` 이벤트 핸들러가 필요합니다.
@@ -103,7 +103,7 @@ You can [make an input controlled](#controlling-an-input-with-a-state-variable)
 
 ### 다양한 유형의 입력 표시 {/*displaying-inputs-of-different-types*/}
 
-입력을 표시하기 위해 `<input>` 컴포넌트를 렌더링 하세요. 기본적으로 텍스트 입력이 됩니다. 체크박스에는 `type="checkbox"`를, 라디오 버튼에는 `type="radio"` 전달하거나 [다른 입력 타입들 중의 하나](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)를 전달할 수 있습니다.
+입력을 표시하기 위해 `<input>` 컴포넌트를 렌더링하세요. 기본적으로 텍스트로 입력됩니다. 체크박스에는 `type="checkbox"`, 라디오 버튼에는 `type="radio"`를 전달하거나 [다른 입력 유형들 중 하나](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types)를 전달할 수 있습니다.
 
 <Sandpack>
 
@@ -148,11 +148,11 @@ input { margin: 5px; }
 
 ---
 
-### 입력에 라벨 제공하기 {/*providing-a-label-for-an-input*/}
+### 입력에 레이블 제공하기 {/*providing-a-label-for-an-input*/}
 
-일반적으로 모든 `<input>` 은 [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) 태그 안에 두게 되는데 이렇게 하면 해당 라벨이 해당 입력과 연관됨을 브라우저가 알 수 있습니다. 사용자가 라벨을 클릭하면 브라우저는 입력에 자동적으로 포커스를 맞춥니다. 스크린 리더는 사용자가 연관된 입력에 포커스를 맞출 때 라벨 캡션을 읽게 되므로 이 방식은 접근성을 위해서도 필수입니다.
+일반적으로 모든 `<input>`은 [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) 태그 안에 존재하는데, 이렇게 하면 해당 레이블이 해당 입력과 연관됨을 브라우저가 알 수 있습니다. 사용자가 레이블을 클릭하면 브라우저는 입력에 자동적으로 포커스를 맞춥니다. 스크린 리더는 사용자가 연관된 입력에 포커스를 맞출 때 레이블 캡션을 읽게 되므로 이 방식은 접근성을 위해서도 필수입니다.
 
-`<label>` 안에 `<input>` 을 감쌀 수 없다면, `<input id>` 와 [`<label htmlFor>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor)에 동일한 ID를 전달해서 연관성을 부여하세요. 한 컴포넌트의 여러 인스턴스 간 충돌을 피하려면 [`useId`](/reference/react/useId)로 그러한 ID를 생성하세요.
+`<label>` 안에 `<input>`을 감쌀 수 없다면, `<input id>` 와 [`<label htmlFor>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor)에 동일한 ID를 전달해서 연관성을 부여하세요. 한 컴포넌트의 여러 인스턴스 간 충돌을 피하려면 [`useId`](/reference/react/useId)로 그러한 ID를 생성하세요.
 
 <Sandpack>
 
@@ -183,9 +183,9 @@ input { margin: 5px; }
 
 ---
 
-### 입력에 초깃값 제공하기 {/*providing-an-initial-value-for-an-input*/}
+### 입력에 초기값 제공하기 {/*providing-an-initial-value-for-an-input*/}
 
-입력의 초깃값은 선택적으로 지정할 수 있습니다. 텍스트 입력을 위한 `defaultValue` 문자열로 전달하세요. 대신 체크박스와 라디오 버튼은 `defaultChecked` 불리언으로 초깃값을 지정해야 합니다.
+입력의 초기값은 선택적으로 지정할 수 있습니다. 텍스트 입력을 위한 `defaultValue` 문자열을 전달하세요. 대신 체크박스와 라디오 버튼은 `defaultChecked` 불리언으로 초기값을 지정해야 합니다.
 
 <Sandpack>
 
@@ -237,7 +237,7 @@ input { margin: 5px; }
 
 ### 폼 제출 시 입력 값 읽기 {/*reading-the-input-values-when-submitting-a-form*/}
 
-입력과 [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) 바깥을 [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) 으로 감싸면 버튼을 클릭했을 때 `<form onSubmit>` 이벤트 핸들러가 호출됩니다. 기본적으로 브라우저는 현재 URL에 폼 데이터를 전송한 후 페이지를 새로고침하며 이러한 동작은 `e.preventDefault()`를 호출하여 덮어쓸 수 있습니다. 폼 데이터는 [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)로 읽으세요.
+입력과 [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) 바깥을 [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)으로 감싸면 버튼을 클릭했을 때 `<form onSubmit>` 이벤트 핸들러가 호출됩니다. 기본적으로 브라우저는 현재 URL에 폼 데이터를 전송한 후 페이지를 새로고침하며, 이러한 동작은 `e.preventDefault()`를 호출하여 덮어쓸 수 있습니다. 폼 데이터는 [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)로 읽으세요.
 <Sandpack>
 
 ```js
@@ -297,7 +297,7 @@ input { margin: 5px; }
 
 <Pitfall>
 
-기본적으로 `<form>` 내부의 *어느* `<button>`이든 폼을 제출합니다. 뜻밖인가요? 커스텀 Button React 컴포넌트의 경우 `<button>` 대신 [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) 반환을 고려하세요. 명시성을 부여하기 위해 폼 제출용 버튼으로는 `<button type="submit">`을 사용하세요.
+기본적으로 `<form>` 내부의 *어느* `<button>`이든 폼을 제출합니다. 뜻밖인가요? 커스텀 `Button` React 컴포넌트의 경우 `<button>` 대신 [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) 반환을 고려하세요. 명시성을 부여하기 위해 폼 제출용 버튼으로는 `<button type="submit">`을 사용하세요.
 
 </Pitfall>
 
@@ -305,18 +305,18 @@ input { margin: 5px; }
 
 ### State 변수로 입력 제어하기 {/*controlling-an-input-with-a-state-variable*/}
 
-`<input />` 과 같은 입력은 *제어되지 않습니다.* `<input defaultValue="Initial text" />`와 같은 [초기값을 전달](#providing-an-initial-value-for-an-input)한대도 JSX는 당장의 값을 제어하지 않고 초깃값만을 지정합니다.
+`<input />`과 같은 입력은 *제어되지 않습니다.* `<input defaultValue="Initial text" />`와 같은 [초기값을 전달](#providing-an-initial-value-for-an-input)한대도 JSX는 당장의 값을 제어하지 않고 초기값만을 지정합니다.
 
 **_제어되는_ 입력을 렌더링하려면, `value` (또는 체크박스와 라디오에는 `checked`) Prop 을 전달하세요.** React는 전달한 `value`를 항상 갖도록 입력에 강제합니다. 일반적으로 [State 변수](/reference/react/useState)를 선언하여 할 수 있습니다.
 
 ```js {2,6,7}
 function Form() {
-  const [firstName, setFirstName] = useState(''); // state 변수를 선언합니다.
+  const [firstName, setFirstName] = useState(''); // State 변수를 선언합니다.
   // ...
   return (
     <input
-      value={firstName} // 입력 값이 state 변수와 일치하도록 강제합니다.
-      onChange={e => setFirstName(e.target.value)} // input을 편집할 때마다 state 변수를 업데이트합니다.
+      value={firstName} // 입력 값이 State 변수와 일치하도록 강제합니다.
+      onChange={e => setFirstName(e.target.value)} // 입력을 편집할 때마다 State 변수를 업데이트합니다.
     />
   );
 }
@@ -358,7 +358,7 @@ function Form() {
         </button>
 ```
 
-제어되는 컴포넌트에 전달되는 `value`는 `undefined` 나 `null`이 되어서는 안됩니다. 아래의 `firstName` 필드처럼 초깃값을 비워두어야 하는 경우 state 변수를 빈 문자열(`''`)로 초기화 하세요.
+제어되는 컴포넌트에 전달되는 `value`는 `undefined`나 `null`이 되어서는 안됩니다. 아래의 `firstName` 필드처럼 초기값을 비워두어야 하는 경우 State 변수를 빈 문자열(`''`)로 초기화 하세요.
 
 <Sandpack>
 
@@ -410,7 +410,7 @@ p { font-weight: bold; }
 
 <Pitfall>
 
-**입력에 `onChange` 없이 `value`를 전달하면 해당 입력에 타이핑을 할 수 없게 됩니다.** `value`를 전달하여 입력을 제어하면 항상 해당 value를 가지도록 *강제합니다*. 그러므로 state 변수를 `value`로 전달해도 `onChange` 이벤트 핸들러 내에서 해당 state 변수를 동기적으로 업데이트하지 않으면 React는 키보드를 누를 때마다 입력을 처음 지정한 `value`로 되돌리게 됩니다.
+**입력에 `onChange` 없이 `value`를 전달하면 해당 입력에 타이핑을 할 수 없게 됩니다.** `value`를 전달하여 입력을 제어하면 항상 해당 값을 가지도록 *강제합니다*. 그러므로 State 변수를 `value`로 전달해도 `onChange` 이벤트 핸들러 내에서 해당 State 변수를 동기적으로 업데이트하지 않으면 React는 키보드를 누를 때마다 입력을 처음 지정한 `value`로 되돌리게 됩니다.
 
 </Pitfall>
 
@@ -468,7 +468,7 @@ function SignupForm() {
 
 ### 텍스트 입력에 타이핑을 해도 업데이트되지 않습니다 {/*my-text-input-doesnt-update-when-i-type-into-it*/}
 
-`onChange` 없이 `value`만 전달하여 입력을 렌더링하면 콘솔에 에러가 나타납니다.
+`onChange` 없이 `value`만 전달하여 입력을 렌더링하면 콘솔에 오류가 나타납니다.
 
 ```js
 // 🔴 버그: 제어되는 `<input>`에 `onChange` 핸들러가 없습니다.
@@ -477,25 +477,25 @@ function SignupForm() {
 
 <ConsoleBlock level="error">
 
-폼 필드에 `onChange` 핸들러 없이 `value` prop만 전달했습니다. 이렇게 하면 읽기 전용 필드를 렌더링하게 됩니다. 필드가 변경 가능해야 하는 경우 `defaultValue`를 사용하고 그렇지 않은 경우 `onChange` 또는 `readOnly`를 설정하세요.
+폼 필드에 `onChange` 핸들러 없이 `value` Prop만 전달했습니다. 이렇게 하면 읽기 전용 필드를 렌더링하게 됩니다. 필드가 변경 가능해야 하는 경우 `defaultValue`를 사용하고 그렇지 않은 경우 `onChange` 또는 `readOnly`를 설정하세요.
 
 </ConsoleBlock>
 
-에러 메시지가 제안하듯 [*초깃값*만 지정](#providing-an-initial-value-for-an-input)하려면 `defaultVallue`를 대신 전달하세요.
+오류 메시지가 제안하듯 [*초기값*만 지정](#providing-an-initial-value-for-an-input)하려면 `defaultValue`를 대신 전달하세요.
 
 ```js
-// ✅ 좋은 예: 제어되지 않는 `<input>`에 초깃값 전달
+// ✅ 좋은 예: 제어되지 않는 `<input>`에 초기값 전달
 <input defaultValue={something} />
 ```
 
-[input을 state 변수로 제어](#controlling-an-input-with-a-state-variable)하려면 `onChange` 핸들러를 지정하세요.
+[입력을 State 변수로 제어](#controlling-an-input-with-a-state-variable)하려면 `onChange` 핸들러를 지정하세요.
 
 ```js
 // ✅ 좋은 예: 제어되는 `<input>`에 `onChange` 전달
 <input value={something} onChange={e => setSomething(e.target.value)} />
 ```
 
-값이 의도적으로 읽기 전용이라면 에러를 막기 위해 `readOnly` prop을 추가하세요.
+값이 의도적으로 읽기 전용이라면 오류를 막기 위해 `readOnly` Prop을 추가하세요.
 
 ```js
 // ✅ 좋은 예: 제어되는 읽기 전용 `<input>`에 `onChange` 생략
@@ -515,18 +515,18 @@ function SignupForm() {
 
 <ConsoleBlock level="error">
 
-폼 필드에 `onChange` 핸들러 없이 `checked` prop을 전달했습니다. 이렇게 하면 읽기 전용 필드를 렌더링하게 됩니다. 필드가 변경 가능해야 하는 경우 `defaultChecked`를 사용하고 그렇지 않은 경우 `onChange` 또는 `readOnly`를 설정하세요.
+폼 필드에 `onChange` 핸들러 없이 `checked` Prop을 전달했습니다. 이렇게 하면 읽기 전용 필드를 렌더링하게 됩니다. 필드가 변경 가능해야 하는 경우 `defaultChecked`를 사용하고 그렇지 않은 경우 `onChange` 또는 `readOnly`를 설정하세요.
 
 </ConsoleBlock>
 
-에러 메시지가 제안하듯 [*초깃값*만 지정](#providing-an-initial-value-for-an-input)하려면 `defaultChecked`를 대신 전달하세요.
+오류 메시지가 제안하듯 [*초기값*만 지정](#providing-an-initial-value-for-an-input)하려면 `defaultChecked`를 대신 전달하세요.
 
 ```js
-// ✅ 좋은 예: 제어되지 않는 체크박스에 초깃값 전달
+// ✅ 좋은 예: 제어되지 않는 체크박스에 초기값 전달
 <input type="checkbox" defaultChecked={something} />
 ```
 
-[체크박스를 state 변수로 제어](#controlling-an-input-with-a-state-variable)하려면 `onChange` 핸들러를 지정하세요.
+[체크박스를 State 변수로 제어](#controlling-an-input-with-a-state-variable)하려면 `onChange` 핸들러를 지정하세요.
 
 ```js
 // ✅ 좋은 예: 제어되는 체크박스에 onChange 전달
@@ -539,7 +539,7 @@ function SignupForm() {
 
 </Pitfall>
 
-체크박스가 의도적으로 읽기 전용이라면 에러를 막기 위해 `readOnly` prop을 추가하세요.
+체크박스가 의도적으로 읽기 전용이라면 오류를 막기 위해 `readOnly` Prop을 추가하세요.
 
 ```js
 // ✅ 좋은 예: 제어되는 읽기 전용 input에 onChange 생략
@@ -548,15 +548,15 @@ function SignupForm() {
 
 ---
 
-### 키보드를 누를 때마다 입력 커서가 input의 처음으로 돌아갑니다 {/*my-input-caret-jumps-to-the-beginning-on-every-keystroke*/}
+### 키보드를 누를 때마다 입력 커서가 입력의 처음으로 돌아갑니다 {/*my-input-caret-jumps-to-the-beginning-on-every-keystroke*/}
 
-[input을 제어](#controlling-an-input-with-a-state-variable)할 경우 `onChange` 안에서 state 변수를 DOM에서 받아온 input 값으로 업데이트해야 합니다.
+[입력을 제어](#controlling-an-input-with-a-state-variable)할 경우 `onChange` 안에서 State 변수를 DOM에서 받아온 입력 값으로 업데이트해야 합니다.
 
-state 변수는 `e.target.value` (혹은 체크박스에서는 `e.target.checked`) 외의 값으로 업데이트할 수 없습니다.
+State 변수는 `e.target.value` (혹은 체크박스에서는 `e.target.checked`) 외의 값으로 업데이트할 수 없습니다.
 
 ```js
 function handleChange(e) {
-  // 🔴 버그: input을 e.target.value 외의 값으로 업데이트합니다.
+  // 🔴 버그: 입력을 `e.target.value` 외의 값으로 업데이트합니다.
   setFirstName(e.target.value.toUpperCase());
 }
 ```
@@ -565,7 +565,7 @@ function handleChange(e) {
 
 ```js
 function handleChange(e) {
-  // 🔴 버그: input을 비동기로 업데이트합니다.
+  // 🔴 버그: 입력을 비동기로 업데이트합니다.
   setTimeout(() => {
     setFirstName(e.target.value);
   }, 100);
@@ -576,22 +576,22 @@ function handleChange(e) {
 
 ```js
 function handleChange(e) {
-  // ✅ 제어되는 input을 e.target.value로 동기 업데이트합니다.
+  // ✅ 제어되는 입력을 `e.target.value`로 동기 업데이트합니다.
   setFirstName(e.target.value);
 }
 ```
 
-이 방법으로 문제가 해결되지 않을 경우 키보드를 누를 때마다 input이 DOM에서 제거된 후 다시 추가되고 있을 가능성이 있습니다. 실수로 리렌더링마다 [state를 재설정](/learn/preserving-and-resetting-state)하고 있다면 나타날 수 있는 현상입니다. 가령 input이나 input의 부모 중 하나가 매번 다른 `key` 어트리뷰트를 받거나 컴포넌트 함수 정의를 중첩시키는 경우(이는 지원되지 않으며 '내부' 컴포넌트가 항상 다른 트리로 간주되도록 합니다)에 해당 문제가 발생할 수 있습니다.
+이 방법으로 문제가 해결되지 않을 경우 키보드를 누를 때마다 입력이 DOM에서 제거된 후 다시 추가되고 있을 가능성이 있습니다. 실수로 리렌더링마다 [State를 재설정](/learn/preserving-and-resetting-state)하고 있다면 나타날 수 있는 현상입니다. 가령 입력이나 입력의 부모 중 하나가 매번 다른 `key` 어트리뷰트를 받거나 컴포넌트 함수 정의를 중첩시키는 경우(이는 지원되지 않으며 '내부' 컴포넌트가 항상 다른 트리로 간주되도록 합니다)에 해당 문제가 발생할 수 있습니다.
 
 ---
 
-### 다음과 같은 에러가 납니다. "A component is changing an uncontrolled input to be controlled(컴포넌트가 제어되지 않는 input을 제어 상태로 변경합니다)" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
+### 다음과 같은 에러가 납니다. "A component is changing an uncontrolled input to be controlled(컴포넌트가 제어되지 않는 입력을 제어 상태로 변경합니다)" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
 
 
 컴포넌트에 `value`를 제공할 경우 반드시 생명주기 내내 문자열 타입으로 남아야 합니다.
 
 React는 컴포넌트를 비제어할 것인지 제어할 것인지 의도를 알 수 없기 때문에 처음엔 `value={undefined}`를 전달했다가 나중에 다시 `value="some string"`을 전달할 수는 없습니다. 제어되는 컴포넌트는 항상 `null`이나 `undefined`가 아닌 문자열 `value`를 받아야 합니다.
 
-value가 API나 state 변수에서 온다면 `null`이나 `undefined`로 초기화될 수 있습니다. 그럴 경우 빈 문자열(`''`)을 초깃값으로 설정하거나 `value`가 문자열임을 보장하기 위해 `value={someValue ?? ''}`를 전달하세요.
+`value`가 API나 state 변수에서 온다면 `null`이나 `undefined`로 초기화할 수 있습니다. 그럴 경우 빈 문자열(`''`)을 초기값으로 설정하거나 `value`가 문자열임을 보장하기 위해 `value={someValue ?? ''}`를 전달하세요.
 
 마찬가지로 체크박스에 `checked`를 전달하는 경우 불리언임을 보장하세요.

From c44edd28f1cd4a638b665718c6dfd4bea06d9247 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 14:38:14 +0900
Subject: [PATCH 02/46] docs: update `option.md`

---
 .../reference/react-dom/components/option.md   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/content/reference/react-dom/components/option.md b/src/content/reference/react-dom/components/option.md
index 87d921115..4138e2908 100644
--- a/src/content/reference/react-dom/components/option.md
+++ b/src/content/reference/react-dom/components/option.md
@@ -4,7 +4,7 @@ title: "<option>"
 
 <Intro>
 
-[브라우저에 내장된 `<option>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option)를 사용해 [`<select>`](/reference/react-dom/components/select) 박스 안에 옵션을 렌더링할 수 있습니다.
+[내장 브라우저 `<option>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option)를 사용해 [`<select>`](/reference/react-dom/components/select) 박스 안에 옵션을 렌더링할 수 있습니다.
 
 ```js
 <select>
@@ -23,7 +23,7 @@ title: "<option>"
 
 ### `<option>` {/*option*/}
 
-[브라우저에 내장된 `<option>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option)를 사용해 [`<select>`](/reference/react-dom/components/select) 박스 안에 옵션을 렌더링할 수 있습니다.
+[내장 브라우저 `<option>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option)를 사용해 [`<select>`](/reference/react-dom/components/select) 박스 안에 옵션을 렌더링할 수 있습니다.
 
 ```js
 <select>
@@ -32,29 +32,29 @@ title: "<option>"
 </select>
 ```
 
-[아래에서 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
-`<option>` 은 모든 [일반적인 엘리먼트 props](/reference/react-dom/components/common#props)를 지원합니다.
+`<option>`은 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
 
-또한, `<option>` 은 이러한 props를 지원합니다.
+또한, `<option>`은 아래와 같은 Props를 지원합니다.
 
 * [`disabled`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option#disabled): 불리언 타입. `true`면 옵션을 선택할 수 없으며 흐리게 표시됩니다.
 * [`label`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option#label): 문자열 타입. 옵션의 의미를 지정합니다. 지정하지 않으면 옵션 내부의 텍스트가 사용됩니다.
-* [`value`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option#value): 이 옵션을 선택한 경우 [폼에서 상위 `<select>` 를 제출할 때](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) 사용할 값입니다.
+* [`value`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option#value): 이 옵션을 선택한 경우 [폼에서 상위 `<select>`를 제출할 때](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) 사용할 값입니다.
 
 #### 주의 사항 {/*caveats*/}
 
-* React는 `<option>`에서 `selected` 속성을 지원하지 않습니다. 대신, 이 옵션의 `value`를 제어되지 않은 select box의 경우 상위 [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option) 에 전달하거나, 제어되는 select box의 경우 [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable) 에 전달하세요.
+* React는 `<option>`에서 `selected` 속성을 지원하지 않습니다. 대신, 이 옵션의 `value`를 제어되지 않은 `<select>` 박스의 경우 상위 [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option)에 전달하거나, 제어되는 `<select>` 박스의 경우 [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable)에 전달하세요.
 
 ---
 
 ## 사용법 {/*usage*/}
 
-### 옵션이 포함된 select box 표시하기 {/*displaying-a-select-box-with-options*/}
+### 옵션이 포함된 `<select>` 박스 표시하기 {/*displaying-a-select-box-with-options*/}
 
-내부에 `<option>` 컴포넌트 목록이 있는 `<select>`를 렌더링하여 select box를 보여줍니다. 각 `<option>`에 양식과 함께 제출할 데이터를 나타내는 `value`를 지정하세요.
+내부에 `<option>` 컴포넌트 목록이 있는 `<select>`를 렌더링하여 `<select>` 박스를 보여줍니다. 각 `<option>`에 양식과 함께 제출할 데이터를 나타내는 `value`를 지정하세요.
 
 [`<option>` 컴포넌트 목록과 함께 `<select>`를 표시하는 방법에 대해 알아보세요.](/reference/react-dom/components/select)
 

From 94b87f837b6b50b6d4f1943904aad21e61f76f16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 14:42:59 +0900
Subject: [PATCH 03/46] docs: update `progress.md`

---
 .../reference/react-dom/components/progress.md     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/reference/react-dom/components/progress.md b/src/content/reference/react-dom/components/progress.md
index 5b84b4df5..5f731b971 100644
--- a/src/content/reference/react-dom/components/progress.md
+++ b/src/content/reference/react-dom/components/progress.md
@@ -4,7 +4,7 @@ title: "<progress>"
 
 <Intro>
 
-[브라우저 내장 컴포넌트 `<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)를 사용하면 진행률 표시기를 렌더링할 수 있습니다.
+[내장 브라우저 `<progress>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)를 사용하면 진행률 표시기를 렌더링할 수 있습니다.
 
 ```js
 <progress value={0.5} />
@@ -20,22 +20,22 @@ title: "<progress>"
 
 ### `<progress>` {/*progress*/}
 
-진행률 표시기를 표시하려면 [브라우저 내장 컴포넌트 `<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)를 렌더링합니다.
+진행률 표시기를 표시하려면 [내장 브라우저 `<progress>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)를 렌더링합니다.
 
 ```js
 <progress value={0.5} />
 ```
 
-[아래에서 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
-`<progress>`는 모든 [일반적인 엘리먼트 props](/reference/react-dom/components/common#props)를 지원합니다.
+`<progress>`는 모든 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
 
-또한 `<progress>`는 이러한 props를 지원합니다.
+또한 `<progress>`는 아래와 같은 Props를 지원합니다.
 
 * [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max): 숫자. 최대 `value`를 지정합니다. 기본값은 `1`입니다.
-* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value): `0`에서 `최대` 사이의 숫자 또는 결정되지 않은 상태인 경우 `null`입니다. 완료된 양을 나타냅니다.
+* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value): `0`에서 `max` 사이의 숫자 또는 결정되지 않은 상태인 경우 `null`입니다. 완료된 양을 나타냅니다.
 
 ---
 
@@ -43,7 +43,7 @@ title: "<progress>"
 
 ### 진행률 표시기 제어 {/*controlling-a-progress-indicator*/}
 
-진행률 표시기를 표시하려면 `<progress>` 컴포넌트를 렌더링합니다. `0`에서 지정한 `최대` 값 사이의 숫자 `value`를 전달할 수 있습니다. `최대`값을 전달하지 않으면 기본적으로 `1`로 간주됩니다.
+진행률 표시기를 표시하려면 `<progress>` 컴포넌트를 렌더링합니다. `0`에서 지정한 `max` 값 사이의 숫자 `value`를 전달할 수 있습니다. `max` 값을 전달하지 않으면 기본적으로 `1`로 간주됩니다.
 
 작업이 진행 중이 아닌 경우, 진행률 표시기를 불확정 상태로 설정하려면 `value={null}`을 전달합니다.
 

From 30a0a4ce234dc50462eea7b2e7b180e3fd2bac48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 14:55:43 +0900
Subject: [PATCH 04/46] docs: update `select.md`

---
 .../reference/react-dom/components/select.md  | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 73f66a112..bb9ab9c1c 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -4,7 +4,7 @@ title: "<select>"
 
 <Intro>
 
-[`<select>` 내장 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)는 옵션을 포함하는 select box를 렌더링합니다.
+[내장 브라우저 `<select>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)는 옵션을 포함하는 select box를 렌더링합니다.
 
 ```js
 <select>
@@ -23,7 +23,7 @@ title: "<select>"
 
 ### `<select>` {/*select*/}
 
-select box를 표시하려면 [`<select>` 내장 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)를 렌더링해야 합니다.
+select box를 표시하려면 [내장 브라우저 `<select>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)를 렌더링합니다.
 
 ```js
 <select>
@@ -32,25 +32,25 @@ select box를 표시하려면 [`<select>` 내장 컴포넌트](https://developer
 </select>
 ```
 
-[아래 더 많은 예시가 있습니다.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
-`<select>`는 [일반적인 엘리먼트 props](/reference/react-dom/components/common#props)를 지원합니다.
+`<select>`는 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
 
-[select box를 제어](#controlling-a-select-box-with-a-state-variable)하려면 `value` prop을 전달해 주세요.
+[select box를 제어](#controlling-a-select-box-with-a-state-variable)하려면 `value` Prop을 전달하세요.
 
-* `value` : String 타입 (또는 [`multiple={true}`](#enabling-multiple-selection)에서 사용하는 String 배열)이며 어떤 옵션을 선택할지 제어합니다. `value`는 `<select>` 내부에 중첩된 `<option>`의 `value`와 일치합니다.
+* `value` : 문자열 타입 (또는 [`multiple={true}`](#enabling-multiple-selection)에서 사용하는 문자열 배열)이며 어떤 옵션을 선택할지 제어합니다. `value`는 `<select>` 내부에 중첩된 `<option>`의 `value`와 일치합니다.
 
 `value`를 전달할 때, 전달된 `value`를 업데이트하는 `onChange` 핸들러를 전달해야 합니다.
 
-`<select>`가 제어되지 않는다면, `defaultValue` prop을 전달합니다.
+`<select>`가 제어되지 않는다면, `defaultValue` Prop을 전달합니다.
 
-* `defaultValue` : String 타입 (또는 [`multiple={true}`](#enabling-multiple-selection)에서 사용하는 String 배열)이며 [초기 선택 옵션을](#providing-an-initially-selected-option) 지정합니다.
+* `defaultValue` : 문자열 타입 (또는 [`multiple={true}`](#enabling-multiple-selection)에서 사용하는 문자열 배열)이며 [초기 선택 옵션을](#providing-an-initially-selected-option) 지정합니다.
 
-`<select>` props는 제어되지 않는 상태와 제어되는 상태 모두에 적용됩니다.
+`<select>` Props는 제어되지 않는 상태와 제어되는 상태 모두에 적용됩니다.
 * [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autocomplete): 문자열 타입. 가능한 [자동완성 동작](https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/autocomplete#%EA%B0%92) 중 하나를 지정합니다.
-* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): 불리언 타입. `true`이면 React가 마운트 시 해당 엘리먼트에 포커싱합니다.
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): 불리언 타입. `true`이면 React가 마운트 시 해당 요소에 포커싱합니다.
 * `children`: `<select>`는 자식으로 [`<option>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/optgroup), [`<datalist>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/datalist) 컴포넌트를 받습니다. 또한 허용되는 컴포넌트 중 하나를 렌더링하기만 한다면 사용자 정의 컴포넌트를 전달할 수도 있습니다. 최종적으로 `<option>` 태그를 렌더링하는 사용자 정의 컴포넌트를 전달한다면, 렌더링되는 모든 `<option>` 은 `value`를 가져야 합니다.
 * [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#disabled): 불리언 타입. `true`일 경우 select box는 상호작용할 수 없게 되고 흐리게 표시됩니다.
 * [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#form): 문자열 타입. 이 select box가 속하는 `<form>`의  `id`를 지정합니다. 생략되면 가장 가까운 부모 폼으로 지정됩니다.
@@ -68,14 +68,14 @@ select box를 표시하려면 [`<select>` 내장 컴포넌트](https://developer
 #### 주의 사항 {/*caveats*/}
 
 - HTML과는 달리, `selected` 어트리뷰트를 `<option>`에 전달하는 것은 지원하지 않습니다. 대신, [제어되지 않는 select box](#controlling-a-select-box-with-a-state-variable)인 경우 [`<select defaultValue>`](#providing-an-initially-selected-option)를 사용하고, [제어되어야 하는 select box](#controlling-a-select-box-with-a-state-variable)인 경우 [`<select value>`](#controlling-a-select-box-with-a-state-variable)를 사용해야 합니다.
-- `<select>`에 `value` prop이 전달된다면, [제어되는 것으로 간주합니다.](#controlling-a-select-box-with-a-state-variable)
+- `<select>`에 `value` Prop이 전달된다면, [제어되는 것으로 간주합니다.](#controlling-a-select-box-with-a-state-variable)
 - select box는 제어 상태와 비제어 상태를 동시에 행할 수 없습니다. 둘 중 하나의 상태만 가질 수 있습니다.
 - select box는 생명주기 동안 처음 설정한 제어 상태를 변경할 수 없습니다.
 - 제어되는 모든 select box는 제공되는 값을 동기적으로 업데이트하는 `onChange` 이벤트 핸들러가 필요합니다.
 
 ---
 
-## 사용 방법 {/*usage*/}
+## 사용법 {/*usage*/}
 
 ### 옵션이 담긴 select box 표시 {/*providing-options-to-a-select-box*/}
 
@@ -106,11 +106,11 @@ select { margin: 5px; }
 
 ---
 
-### select box가 포함된 라벨 제공 {/*providing-a-label-for-a-select-box*/}
+### select box가 포함된 레이블 제공 {/*providing-a-label-for-a-select-box*/}
 
-라벨이 해당 select box와 연결되어 있음을 브라우저에 알리기 위해 [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) 태그 안에 `<select>`를 배치합니다. 사용자가 라벨을 클릭하면 브라우저는 자동으로 select box에 초점을 맞춥니다. 또한, 접근성을 위해 필수적입니다. 사용자가 select box에 초점을 맞추면 스크린 리더가 라벨 캡션을 알립니다.
+레이블이 해당 select box와 연결되어 있음을 브라우저에 알리기 위해 [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) 태그 안에 `<select>`를 배치합니다. 사용자가 레이블을 클릭하면 브라우저는 자동으로 select box에 초점을 맞춥니다. 또한, 접근성을 위해 필수적입니다. 사용자가 select box에 초점을 맞추면 스크린 리더가 레이블 캡션을 알립니다.
 
-`<select>`를 `<label>` 안에 중첩 시킬 수 없다면, 같은 ID를 `<select id>`와 [`<label htmlFor>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor)에 전달하여 연결해야 합니다. 한 컴포넌트에서 여러 인스턴스 간 충돌을 피하려면 [`useId`를 사용하여](/reference/react/useId) ID를 생성해 주세요.
+`<select>`를 `<label>` 안에 중첩 시킬 수 없다면, 같은 ID를 `<select id>`와 [`<label htmlFor>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor)에 전달하여 연결해야 합니다. 한 컴포넌트에서 여러 인스턴스 간 충돌을 피하려면 [`useId`를 사용하여](/reference/react/useId) ID를 생성하세요.
 
 <Sandpack>
 
@@ -154,7 +154,7 @@ select { margin: 5px; }
 
 ### 초기 선택 옵션 제공 {/*providing-an-initially-selected-option*/}
 
-기본적으로 브라우저는 목록에서 첫 번째 `<option>`을 선택합니다. 다른 옵션을 기본값으로 선택하려면 `<select>` 엘리먼트에 `<option>`의 `value`를 `defaultValue`로 전달해야 합니다.
+기본적으로 브라우저는 목록에서 첫 번째 `<option>`을 선택합니다. 다른 옵션을 기본값으로 선택하려면 `<select>` 요소 `<option>`의 `value`를 `defaultValue`로 전달해야 합니다.
 
 <Sandpack>
 
@@ -283,7 +283,7 @@ label { margin-bottom: 20px; }
 
 <Note>
 
-`<select>`에 `name`을 지정해야 합니다.(예시 : `<select name="selectedFruit" />`) 지정한 `name`은 폼 데이터에서 키로 사용됩니다. (예시 : `{ selectedFruit: "orange" }`)
+`<select>`에 `name`을 지정해야 합니다. (예: `<select name="selectedFruit" />`) 지정한 `name`은 폼 데이터에서 키로 사용됩니다. (예: `{ selectedFruit: "orange" }`)
 
 `<select multiple={true}>`를 사용하면 [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)에서 각 선택한 값을 별도의 이름-값 쌍으로 포함합니다. 위의 예시에서 콘솔 로그를 확인해 주세요.
 
@@ -297,20 +297,20 @@ label { margin-bottom: 20px; }
 
 ---
 
-### state 변수와 함께 select box 제어 {/*controlling-a-select-box-with-a-state-variable*/}
+### State 변수와 함께 select box 제어 {/*controlling-a-select-box-with-a-state-variable*/}
 
 `<select>`와 같은 select box는 *제어되지 않습니다.* `<select defaultValue="orange" />`와 같이 [처음에 선택한 값](#providing-an-initially-selected-option)을 전달하더라도 JSX는 현재 값이 아닌 초기 값만 지정합니다.
 
-**제어된 select box를 렌더링하려면 `value` prop을 전달해야 합니다.** React는 select box가 항상 전달한 `value`를 갖도록 강제합니다. 보통 [state 변수로 선언](/reference/react/useState)하여 선택 상자를 제어합니다.
+**제어된 select box를 렌더링하려면 `value` Prop을 전달해야 합니다.** React는 select box가 항상 전달한 `value`를 갖도록 강제합니다. 보통 [State 변수로 선언](/reference/react/useState)하여 선택 상자를 제어합니다.
 
 ```js {2,6,7}
 function FruitPicker() {
-  const [selectedFruit, setSelectedFruit] = useState('orange'); // state 변수를 선언합니다.
+  const [selectedFruit, setSelectedFruit] = useState('orange'); // State 변수를 선언합니다.
   // ...
   return (
     <select
-      value={selectedFruit} // ...select의 값이 state 변수와 일치하도록 강제합니다....
-      onChange={e => setSelectedFruit(e.target.value)} // ... 변경 사항이 있을 때마다 state 변수를 업데이트 합니다!
+      value={selectedFruit} // ...select의 값이 State 변수와 일치하도록 강제합니다....
+      onChange={e => setSelectedFruit(e.target.value)} // ... 변경 사항이 있을 때마다 State 변수를 업데이트 합니다!
     >
       <option value="apple">Apple</option>
       <option value="banana">Banana</option>
@@ -376,7 +376,7 @@ select { margin-bottom: 10px; display: block; }
 
 <Pitfall>
 
-**`onChange` 없이 `value`를 전달하면 옵션을 선택할 수 없습니다.** `value`를 전달하여 select box를 제어하면 전달한 값이 항상 있도록 *강제*합니다. 따라서 `value`를 state 변수로 전달했지만 `onChange` 이벤트 핸들러에서 state 변수를 동기적으로 업데이트하지 않으면 React는 키를 누를 때마다 select box를 지정한 `value`로 되돌립니다.
+**`onChange` 없이 `value`를 전달하면 옵션을 선택할 수 없습니다.** `value`를 전달하여 select box를 제어하면 전달한 값이 항상 있도록 *강제*합니다. 따라서 `value`를 State 변수로 전달했지만 `onChange` 이벤트 핸들러에서 State 변수를 동기적으로 업데이트하지 않으면 React는 키를 누를 때마다 select box를 지정한 `value`로 되돌립니다.
 
 HTML과는 달리 개별 `<option>`에 `selected` 어트리뷰트를 전달하는 것은 지원하지 않습니다.
 

From bdd4b470c9d4f13ee2fd9bf5d5b857f2158ff7fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 15:08:26 +0900
Subject: [PATCH 05/46] docs: update `textarea.md`

---
 .../react-dom/components/textarea.md          | 94 +++++++++----------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md
index f4d2365cb..462a7ce2c 100644
--- a/src/content/reference/react-dom/components/textarea.md
+++ b/src/content/reference/react-dom/components/textarea.md
@@ -4,7 +4,7 @@ title: "<textarea>"
 
 <Intro>
 
-[`<textarea>` 브라우저 내장 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)를 사용하면 여러 줄의 텍스트 input을 렌더링할 수 있습니다.
+[내장 브라우저 `<textarea>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)를 사용하면 여러 줄의 텍스트 입력을 렌더링할 수 있습니다.
 
 ```js
 <textarea />
@@ -20,47 +20,47 @@ title: "<textarea>"
 
 ### `<textarea>` {/*textarea*/}
 
-텍스트 영역을 표시하려면 [`<textarea>` 브라우저 내장 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)를 렌더링하세요.
+텍스트 영역을 표시하려면 [내장 브라우저 `<textarea>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)를 렌더링하세요.
 
 ```js
 <textarea name="postContent" />
 ```
 
-[아래 더 많은 예시가 있습니다.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
-`<textarea>`는 [일반적인 엘리먼트 props](/reference/react-dom/components/common#props)를 지원합니다.
+`<textarea>`는 [공통 엘리먼트 Props](/reference/react-dom/components/common#props)를 지원합니다.
 
-[텍스트 영역을 제어](#controlling-a-select-box-with-a-state-variable)하려면 `value` prop을 전달하세요.
+[텍스트 영역을 제어](#controlling-a-select-box-with-a-state-variable)하려면 `value` Prop을 전달하세요.
 
 * `value`: 문자열 타입. 텍스트 영역 내부의 텍스트를 제어합니다.
 
 `value`를 전달할 땐 반드시 해당 값을 업데이트하는 `onChange` 핸들러도 함께 전달해야 합니다.
 
-`<textarea>`가 제어되지 않는 경우 `defaultValue` prop을 대신 전달해도 됩니다.
+`<textarea>`가 제어되지 않는 경우 `defaultValue` Prop을 대신 전달해도 됩니다.
 
-* `defaultValue`: 문자열 타입. 텍스트 영역 [초깃값](#providing-an-initial-value-for-a-text-area)을 지정합니다.
+* `defaultValue`: 문자열 타입. 텍스트 영역 [초기값](#providing-an-initial-value-for-a-text-area)을 지정합니다.
 
 다음의 `<textarea>` props는 제어되지 않는 텍스트 영역과 제어되는 텍스트 영역 모두에 적용됩니다.
 
 * [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#autocomplete): 'on' 또는 'off'. 자동 완성 동작을 지정합니다.
 * [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#autofocus): 불리언 타입. `true`일 경우 React는 마운트 시 엘리먼트에 포커스를 맞춥니다.
-* `children`: `<textarea>`는 자식을 받지 않습니다. 초깃값을 설정하려면 `defaultValue`를 사용하세요.
+* `children`: `<textarea>`는 자식을 받지 않습니다. 초기값을 설정하려면 `defaultValue`를 사용하세요.
 * [`cols`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols): 숫자 타입. 평균 문자 너비의 기본 너비를 지정하세요. 기본값은 `20`입니다.
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#disabled): 불리언 타입. `true`일 경우 input은 상호작용이 불가능해지며 흐릿하게 보입니다.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#form): 문자열 타입. 텍스트 영역 input이 속하는 `<form>`의 `id`를 지정합니다. 생략 시 가장 가까운 부모 폼으로 설정됩니다.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#disabled): 불리언 타입. `true`일 경우 입력은 상호작용이 불가능해지며 흐릿하게 보입니다.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#form): 문자열 타입. 텍스트 영역 입력이 속하는 `<form>`의 `id`를 지정합니다. 생략 시 가장 가까운 부모 폼으로 설정됩니다.
 * [`maxLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#maxlength): 숫자 타입. 텍스트의 최대 길이를 지정합니다.
 * [`minLength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#minlength): 숫자 타입. 텍스트의 최소 길이를 지정합니다.
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): 문자열 타입. [폼과 제출](#reading-the-textarea-value-when-submitting-a-form)되는 input의 이름을 지정합니다.
-* `onChange`: [`이벤트` 핸들러](/reference/react-dom/components/common#event-handler) 함수. [제어되는 텍스트 영역](#controlling-a-text-area-with-a-state-variable) 필수 요소로 가령 사용자가 키보드를 누를 때마다 실행되는 방식으로 input 값을 변경하는 즉시 실행되며 브라우저 [`input` 이벤트](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)처럼 동작합니다.
-* `onChangeCapture`: [캡처 단계](/learn/responding-to-events#capture-phase-events)에서 실행되는 `onChange`
-* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): [`이벤트` 핸들러](/reference/react-dom/components/common#event-handler) 함수. 사용자가 값을 변경하는 즉시 실행됩니다. 지금까지의 용법에 비춰봤을 때 React에서는 유사하게 동작하는 `onChange`를 사용하는 것이 관습적입니다.
-* `onInputCapture`: [캡처 단계](/learn/responding-to-events#capture-phase-events)에서 실행되는 `onInput`
-* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): [`이벤트` 핸들러](/reference/react-dom/components/common#event-handler) 함수. 폼 제출 시 input이 유효하지 않을 경우 실행되며 `invalid` 내장 이벤트와 달리 React `onInvalid` 이벤트는 버블링됩니다.
-* `onInvalidCapture`: [캡처 단계](/learn/responding-to-events#capture-phase-events)에서 실행되는 `onInvalid`
-* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event): [`이벤트` 핸들러](/reference/react-dom/components/common#event-handler) 함수. `<textarea>` 내부의 선택 사항이 변경된 후 실행됩니다. React는 `onSelect` 이벤트를 확장하여 선택 사항이 비거나 편집 시 선택 사항에 영향을 끼치게 될 때도 실행됩니다.
-* `onSelectCapture`: [캡처 단계](/learn/responding-to-events#capture-phase-events)에서 실행되는 `onSelect`
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): 문자열 타입. [폼과 제출](#reading-the-textarea-value-when-submitting-a-form)되는 입력의 이름을 지정합니다.
+* `onChange`: [`Event` 핸들러](/reference/react-dom/components/common#event-handler) 함수. [제어되는 텍스트 영역](#controlling-a-text-area-with-a-state-variable) 필수 요소로 가령 사용자가 키보드를 누를 때마다 실행되는 방식으로 입력 값을 변경하는 즉시 실행되며 브라우저 [`input` 이벤트](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)처럼 동작합니다.
+* `onChangeCapture`: [캡처 단계](/learn/responding-to-events#capture-phase-events)에서 실행되는 `onChange`.
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): [`Event` 핸들러](/reference/react-dom/components/common#event-handler) 함수. 사용자가 값을 변경하는 즉시 실행됩니다. 지금까지의 용법에 비춰봤을 때 React에서는 유사하게 동작하는 `onChange`를 사용하는 것이 관습적입니다.
+* `onInputCapture`: [캡처 단계](/learn/responding-to-events#capture-phase-events)에서 실행되는 `onInput`.
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): [`Event` 핸들러](/reference/react-dom/components/common#event-handler) 함수. 폼 제출 시 입력이 유효하지 않을 경우 실행되며 `invalid` 내장 이벤트와 달리 React `onInvalid` 이벤트는 버블링됩니다.
+* `onInvalidCapture`: [캡처 단계](/learn/responding-to-events#capture-phase-events)에서 실행되는 `onInvalid`.
+* [`onSelect`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/select_event): [`Event` 핸들러](/reference/react-dom/components/common#event-handler) 함수. `<textarea>` 내부의 선택 사항이 변경된 후 실행됩니다. React는 `onSelect` 이벤트를 확장하여 선택 사항이 비거나 편집 시 선택 사항에 영향을 끼치게 될 때도 실행됩니다.
+* `onSelectCapture`: [캡처 단계](/learn/responding-to-events#capture-phase-events)에서 실행되는 `onSelect`.
 * [`placeholder`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder): 문자열 타입. 텍스트 영역 값이 비었을 때 흐린 색으로 표시됩니다.
 * [`readOnly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-readonly): 불리언 타입. `true`일 경우 사용자가 텍스트 영역을 편집할 수 없습니다.
 * [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-required): 불리언 타입. `true`일 경우 폼이 제출할 값을 반드시 제공해야 합니다.
@@ -70,7 +70,7 @@ title: "<textarea>"
 #### 주의 사항 {/*caveats*/}
 
 - `<textarea>something</textarea>`와 같이 자식을 전달하는 것은 허용되지 않습니다. [초기 콘텐츠로 `defaultValue`를 사용하세요.](#providing-an-initial-value-for-a-text-area)
-- 텍스트 영역은 문자열 `value` prop을 받을 경우 [제어되는 것으로 취급](#controlling-a-text-area-with-a-state-variable)됩니다.
+- 텍스트 영역은 문자열 `value` Prop을 받을 경우 [제어되는 것으로 취급](#controlling-a-text-area-with-a-state-variable)됩니다.
 - 텍스트 영역은 제어되면서 동시에 비제어될 수 없습니다.
 - 텍스트 영역은 생명주기 동안 제어 또는 비제어 상태를 오갈 수 없습니다.
 - 제어되는 텍스트 영역엔 모두 백업 값을 동기적으로 업데이트하는 `onChange` 이벤트 핸들러가 필요합니다.
@@ -107,9 +107,9 @@ label, textarea { display: block; }
 
 ---
 
-### 텍스트 영역 라벨 제공하기 {/*providing-a-label-for-a-text-area*/}
+### 텍스트 영역 레이블 제공하기 {/*providing-a-label-for-a-text-area*/}
 
-일반적으로 모든 `<textarea>`는 [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) 태그 안에 두게 되는데 이렇게 하면 해당 라벨이 해당 텍스트 영역과 연관됨을 브라우저가 알 수 있습니다. 사용자가 라벨을 클릭하면 브라우저는 텍스트 영역에 포커스를 맞춥니다. 스크린 리더는 사용자가 텍스트 영역에 포커스를 맞출 때 라벨 캡션을 읽게 되므로 이 방식은 접근성을 위해서도 필수입니다.
+일반적으로 모든 `<textarea>`는 [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) 태그 안에 두게 되는데, 이렇게 하면 해당 레이블이 해당 텍스트 영역과 연관됨을 브라우저가 알 수 있습니다. 사용자가 레이블을 클릭하면 브라우저는 텍스트 영역에 포커스를 맞춥니다. 스크린 리더는 사용자가 텍스트 영역에 포커스를 맞출 때 레이블 캡션을 읽게 되므로 이 방식은 접근성을 위해서도 필수입니다.
 
 `<label>` 안에 `<textarea>`를 감쌀 수 없다면 `<textarea id>`와 [`<label htmlFor>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor)에 동일한 ID를 전달해서 연관성을 부여하세요. 한 컴포넌트의 여러 인스턴스 간 충돌을 피하려면 [`useId`](/reference/react/useId)로 그러한 ID를 생성하세요.
 
@@ -144,9 +144,9 @@ input { margin: 5px; }
 
 ---
 
-### 텍스트 영역 초깃값 제공하기 {/*providing-an-initial-value-for-a-text-area*/}
+### 텍스트 영역 초기값 제공하기 {/*providing-an-initial-value-for-a-text-area*/}
 
-텍스트 영역 초깃값은 선택적으로 지정할 수 있습니다. `defaultValue` 문자열로 전달하세요.
+텍스트 영역 초기값은 선택적으로 지정할 수 있습니다. `defaultValue` 문자열로 전달하세요.
 
 <Sandpack>
 
@@ -185,7 +185,7 @@ HTML과 달리 `<textarea>Some content</textarea>`와 같은 초기 텍스트 
 
 ### 폼 제출 시 텍스트 영역 값 읽기 {/*reading-the-text-area-value-when-submitting-a-form*/}
 
-textarea와 [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) 바깥을 [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)으로 감싸면 버튼을 클릭했을 때 `<form onSubmit>` 이벤트 핸들러가 호출됩니다. 기본적으로 브라우저는 현재 URL에 폼 데이터를 전송한 후 페이지를 새로고침하며 이러한 동작은 `e.preventDefault()`를 호출하여 덮어쓸 수 있습니다. 폼 데이터는 [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)로 읽으세요.
+텍스트 영역과 [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) 바깥을 [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)으로 감싸면 버튼을 클릭했을 때 `<form onSubmit>` 이벤트 핸들러가 호출됩니다. 기본적으로 브라우저는 현재 URL에 폼 데이터를 전송한 후 페이지를 새로고침하며, 이러한 동작은 `e.preventDefault()`를 호출하여 덮어쓸 수 있습니다. 폼 데이터는 [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)로 읽으세요.
 <Sandpack>
 
 ```js
@@ -243,17 +243,17 @@ input { margin: 5px; }
 
 <Pitfall>
 
-기본적으로 `<form>` 내부의 *어느* `<button>`이든 폼을 제출합니다. 뜻밖인가요? 커스텀 Button React 컴포넌트의 경우 `<button>` 대신 [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) 반환을 고려하세요. 명시성을 부여하기 위해 폼 제출용 버튼으로는 `<button type="submit">`을 사용하세요.
+기본적으로 `<form>` 내부의 *어느* `<button>`이든 폼을 제출합니다. 뜻밖인가요? 커스텀 `Button` React 컴포넌트의 경우 `<button>` 대신 [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) 반환을 고려하세요. 명시성을 부여하기 위해 폼 제출용 버튼으로는 `<button type="submit">`을 사용하세요.
 
 </Pitfall>
 
 ---
 
-### state 변수로 텍스트 영역 제어하기 {/*controlling-a-text-area-with-a-state-variable*/}
+### State 변수로 텍스트 영역 제어하기 {/*controlling-a-text-area-with-a-state-variable*/}
 
-`<textarea />`와 같은 텍스트 영역은 *제어되지 않습니다*. `<textarea defaultValue="Initial text" />`와 같은 [초깃값을 전달](#providing-an-initial-value-for-a-text-area)한대도 JSX는 당장의 값이 아닌 초깃값만을 지정합니다.
+`<textarea />`와 같은 텍스트 영역은 *제어되지 않습니다*. `<textarea defaultValue="Initial text" />`와 같은 [초기값을 전달](#providing-an-initial-value-for-a-text-area)한대도 JSX는 당장의 값이 아닌 초기값만을 지정합니다.
 
-**_제어되는_ 텍스트 영역을 렌더링하려면 `value` prop을 전달하세요.** React는 전달한 `value`를 항상 갖도록 텍스트 영역에 강제합니다. 일반적으로 텍스트 영역은 [state 변수](/reference/react/useState)를 선언하여 제어합니다.
+**_제어되는_ 텍스트 영역을 렌더링하려면 `value` Prop을 전달하세요.** React는 전달한 `value`를 항상 갖도록 텍스트 영역에 강제합니다. 일반적으로 텍스트 영역은 [State 변수](/reference/react/useState)를 선언하여 제어합니다.
 
 ```js {2,6,7}
 function NewPost() {
@@ -261,7 +261,7 @@ function NewPost() {
   // ...
   return (
     <textarea
-      value={postContent} // input 값이 state 변수와 일치하도록 강제합니다.
+      value={postContent} // 입력 값이 state 변수와 일치하도록 강제합니다.
       onChange={e => setPostContent(e.target.value)} // 텍스트 영역을 편집할 때마다 state 변수를 업데이트합니다.
     />
   );
@@ -330,7 +330,7 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
 
 <Pitfall>
 
-**텍스트 영역에 `onChange` 없이 `value`를 전달하면 해당 텍스트 영역에 타이핑을 할 수 없게 됩니다.** `value`를 전달하여 텍스트 영역을 제어하면 항상 해당 value를 가지도록 *강제합니다*. 그러므로 state 변수를 `value`로 전달해도 `onChange` 이벤트 핸들러 내에서 해당 state 변수를 동기적으로 업데이트하지 않으면 React는 키보드를 누를 때마다 텍스트 영역을 처음 지정한 `value`로 되돌리게 됩니다.
+**텍스트 영역에 `onChange` 없이 `value`를 전달하면 해당 텍스트 영역에 타이핑을 할 수 없게 됩니다.** `value`를 전달하여 텍스트 영역을 제어하면 항상 해당 `value`를 가지도록 *강제합니다*. 그러므로 State 변수를 `value`로 전달해도 `onChange` 이벤트 핸들러 내에서 해당 State 변수를 동기적으로 업데이트하지 않으면 React는 키보드를 누를 때마다 텍스트 영역을 처음 지정한 `value`로 되돌리게 됩니다.
 
 </Pitfall>
 
@@ -340,34 +340,34 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
 
 ### 텍스트 영역에 타이핑을 해도 업데이트되지 않습니다 {/*my-text-area-doesnt-update-when-i-type-into-it*/}
 
-`onChange` 없이 `value`만 전달하여 텍스트 영역을 렌더링하면 콘솔에 에러가 나타납니다.
+`onChange` 없이 `value`만 전달하여 텍스트 영역을 렌더링하면 콘솔에 오류가 나타납니다.
 
 ```js
-// 🔴 버그: 제어되는 텍스트 영역에 onChange 핸들러가 없습니다.
+// 🔴 버그: 제어되는 텍스트 영역에 `onChange` 핸들러가 없습니다.
 <textarea value={something} />
 ```
 
 <ConsoleBlock level="error">
 
-폼 필드에 `onChange` 핸들러 없이 `value` prop만 전달했습니다. 이렇게 하면 읽기 전용 필드를 렌더링하게 됩니다. 필드가 변경 가능해야 하는 경우 `defaultValue`를 사용하고 그렇지 않은 경우 `onChange` 또는 `readOnly`를 설정하세요.
+폼 필드에 `onChange` 핸들러 없이 `value` Prop만 전달했습니다. 이렇게 하면 읽기 전용 필드를 렌더링하게 됩니다. 필드가 변경 가능해야 하는 경우 `defaultValue`를 사용하고 그렇지 않은 경우 `onChange` 또는 `readOnly`를 설정하세요.
 
 </ConsoleBlock>
 
-에러 메시지가 제안하듯 [*초깃값*만 지정](#providing-an-initial-value-for-a-text-area)하려면 `defaultVallue`를 대신 전달하세요.
+에러 메시지가 제안하듯 [*초기값*만 지정](#providing-an-initial-value-for-a-text-area)하려면 `defaultVallue`를 대신 전달하세요.
 
 ```js
-// ✅ 좋은 예: 제어되지 않는 텍스트 영역에 초깃값 전달
+// ✅ 좋은 예: 제어되지 않는 텍스트 영역에 초기값 전달
 <textarea defaultValue={something} />
 ```
 
-[텍스트 영역을 state 변수로 제어](#controlling-a-text-area-with-a-state-variable)하려면 `onChange` 핸들러를 지정하세요.
+[텍스트 영역을 State 변수로 제어](#controlling-a-text-area-with-a-state-variable)하려면 `onChange` 핸들러를 지정하세요.
 
 ```js
 // ✅ 좋은 예: 제어되는 텍스트 영역에 onChange 전달
 <textarea value={something} onChange={e => setSomething(e.target.value)} />
 ```
 
-값이 내부적으로 읽기 전용이라면 에러를 막기 위해 `readOnly` prop을 추가하세요.
+값이 내부적으로 읽기 전용이라면 오류를 막기 위해 `readOnly` Prop을 추가하세요.
 
 ```js
 // ✅ 좋은 예: 제어되는 읽기 전용 텍스트 영역에 onChange 생략
@@ -378,13 +378,13 @@ textarea { display: block; margin-top: 5px; margin-bottom: 10px; }
 
 ### 키보드를 누를 때마다 텍스트 커서가 텍스트 영역의 처음으로 돌아갑니다 {/*my-text-area-caret-jumps-to-the-beginning-on-every-keystroke*/}
 
-[텍스트 영역을 제어](#controlling-a-text-area-with-a-state-variable)할 경우 `onChange` 안에서 state 변수를 DOM에서 받아온 텍스트 영역 값으로 업데이트해야 합니다.
+[텍스트 영역을 제어](#controlling-a-text-area-with-a-state-variable)할 경우 `onChange` 안에서 State 변수를 DOM에서 받아온 텍스트 영역 값으로 업데이트해야 합니다.
 
-state 변수는 `e.target.value` 외의 값으로 업데이트할 수 없습니다.
+State 변수는 `e.target.value` 외의 값으로 업데이트할 수 없습니다.
 
 ```js
 function handleChange(e) {
-  // 🔴 버그: input을 e.target.value 외의 값으로 업데이트합니다.
+  // 🔴 버그: 입력을 e.target.value 외의 값으로 업데이트합니다.
   setFirstName(e.target.value.toUpperCase());
 }
 ```
@@ -393,31 +393,31 @@ function handleChange(e) {
 
 ```js
 function handleChange(e) {
-  // 🔴 버그: input을 비동기로 업데이트합니다.
+  // 🔴 버그: 입력을 비동기로 업데이트합니다.
   setTimeout(() => {
     setFirstName(e.target.value);
   }, 100);
 }
 ```
 
-코드를 고치려면 e.target.value로 동기 업데이트하세요.
+코드를 고치려면 `e.target.value`로 동기 업데이트하세요.
 
 ```js
 function handleChange(e) {
-  // ✅ 제어되는 input을 e.target.value로 동기 업데이트합니다.
+  // ✅ 제어되는 입력을 `e.target.value`로 동기 업데이트합니다.
   setFirstName(e.target.value);
 }
 ```
 
-이 방법으로 문제가 해결되지 않을 경우 키보드를 누를 때마다 텍스트 영역이 제거 후 다시 추가되고 있을 가능성이 있습니다. 실수로 리렌더링마다 [state를 재설정](/learn/preserving-and-resetting-state)하고 있다면 나타날 수 있는 현상입니다. 가령 텍스트 영역이나 텍스트 영역의 부모 중 하나가 매번 다른 `key` 어트리뷰트를 받거나 컴포넌트 정의를 중첩시키는 경우(이는 React에서 허용되지 않으며 렌더링마다 '내부' 컴포넌트가 리마운트되는 원인이 됩니다)에 해당 문제가 발생할 수 있습니다.
+이 방법으로 문제가 해결되지 않을 경우 키보드를 누를 때마다 텍스트 영역이 제거 후 다시 추가되고 있을 가능성이 있습니다. 실수로 리렌더링마다 [State를 재설정](/learn/preserving-and-resetting-state)하고 있다면 나타날 수 있는 현상입니다. 가령 텍스트 영역이나 텍스트 영역의 부모 중 하나가 매번 다른 `key` 어트리뷰트를 받거나 컴포넌트 정의를 중첩시키는 경우(이는 React에서 허용되지 않으며 렌더링마다 '내부' 컴포넌트가 리마운트되는 원인이 됩니다)에 해당 문제가 발생할 수 있습니다.
 
 ---
 
-### 다음과 같은 에러가 납니다. "A component is changing an uncontrolled input to be controlled(컴포넌트가 제어되지 않는 input을 제어 상태로 변경합니다)" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
+### 다음과 같은 에러가 납니다. "A component is changing an uncontrolled input to be controlled(컴포넌트가 제어되지 않는 입력을 제어 상태로 변경합니다)" {/*im-getting-an-error-a-component-is-changing-an-uncontrolled-input-to-be-controlled*/}
 
 
 컴포넌트에 `value`를 제공할 경우 반드시 생명주기 내내 문자열 타입으로 남아야 합니다.
 
 React는 컴포넌트를 비제어할 것인지 제어할 것인지 의도를 알 수 없기 때문에 처음엔 `value={undefined}`를 전달했다가 나중에 다시 `value="some string"`을 전달할 수는 없습니다. 제어되는 컴포넌트는 항상 `null`이나 `undefined`가 아닌 문자열 `value`를 받아야 합니다.
 
-value가 API나 state 변수에서 온다면 `null`이나 `undefined`로 초기화될 수 있습니다. 그럴 경우 빈 문자열(`''`)을 초깃값으로 설정하거나 `value`가 문자열임을 보장하기 위해 `value={someValue ?? ''}`를 전달하세요.
+`value`가 API나 State 변수에서 온다면 `null`이나 `undefined`로 초기화될 수 있습니다. 그럴 경우 빈 문자열(`''`)을 초기값으로 설정하거나 `value`가 문자열임을 보장하기 위해 `value={someValue ?? ''}`를 전달하세요.

From 2bc4bdc63c683a9077fce2e304e09ead69dff4a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 15:23:07 +0900
Subject: [PATCH 06/46] docs: update `link.md`

---
 .../reference/react-dom/components/link.md    | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
index aba9440fb..d3b35a696 100644
--- a/src/content/reference/react-dom/components/link.md
+++ b/src/content/reference/react-dom/components/link.md
@@ -4,7 +4,7 @@ link: "<link>"
 
 <Intro>
 
-[브라우저 내장 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)는 스타일시트와 같은 외부 리소스를 사용하거나 링크 메타데이터로 문서를 주석 처리할 수 있게 해줍니다.
+[내장 브라우저 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)는 스타일시트와 같은 외부 리소스를 사용하거나 링크 메타데이터로 문서를 주석 처리할 수 있게 해줍니다.
 
 ```js
 <link rel="icon" href="favicon.ico" />
@@ -20,13 +20,13 @@ link: "<link>"
 
 ### `<link>` {/*link*/}
 
-스타일시트, 폰트, 아이콘과 같은 외부 리소스를 링크하거나 링크 메타데이터로 문서를 주석 처리하려면, [브라우저 내장 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)를 렌더링하세요. 어떤 컴포넌트에서든 `<link>`를 렌더링할 수 있으며, React는 [대부분의 경우](#special-rendering-behavior) 해당 DOM 요소를 `<head>`에 배치합니다.
+스타일시트, 글꼴, 아이콘과 같은 외부 리소스를 링크하거나 링크 메타데이터로 문서를 주석 처리하려면, [내장 브라우저 `<link>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)를 렌더링하세요. 어떤 컴포넌트에서든 `<link>`를 렌더링할 수 있으며, React는 [대부분의 경우](#special-rendering-behavior) 해당 DOM 요소를 `<head>`에 배치합니다.
 
 ```js
 <link rel="icon" href="favicon.ico" />
 ```
 
-[아래 더 많은 예시가 있습니다.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
@@ -43,13 +43,13 @@ link: "<link>"
 다음 속성들은 `rel=stylesheet`인 경우에 적용되지만, React의 [스타일시트에 대한 특별한 처리](#special-rendering-behavior)를 비활성화합니다.
 
 * `disabled`: 불리언 타입. 스타일시트를 비활성화합니다.
-* `onError`: 함수. 스타일시트 로드에 실패했을 때 호출됩니다.
-* `onLoad`: 함수. 스타일시트 로드가 완료되었을 때 호출됩니다.
+* `onError`: 함수. 스타일시트 불러오기에 실패했을 때 호출됩니다.
+* `onLoad`: 함수. 스타일시트 불러오기가 완료되었을 때 호출됩니다.
 
 다음 속성들은 `rel="preload"` 나 `rel="modulepreload"`인 경우에 적용됩니다.
 
 * `as`: 문자열 타입. 리소스의 유형을 지정합니다. 가능한 값은 `audio`, `document`, `embed`, `fetch`, `font`, `image`, `object`, `script`, `style`, `track`, `video`, `worker`입니다.
-* `imageSrcSet`: 문자열 타입. `as="image"`인 경우에만 적용됩니다. [이미지 소스의 세트](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)를 지정합니다.
+* `imageSrcSet`: 문자열 타입. `as="image"`인 경우에만 적용됩니다. [이미지 소스의 집합](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)을 지정합니다.
 * `imageSizes`: 문자열 타입. `as="image"`인 경우에만 적용됩니다. [이미지의 크기](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)를 지정합니다.
 
 다음 속성들은 `rel="icon"`이나 `rel="apple-touch-icon"`인 경우에 적용됩니다.
@@ -94,7 +94,7 @@ React는 `<link>` 컴포넌트에 해당하는 DOM 요소를 React 트리의 어
 
 위 특별한 처리에는 두 가지 주의 사항이 있습니다.
 
-* 링크가 렌더링 된 후에 React가 속성 변경을 무시합니다. (개발 중에 경고 메시지가 표시됩니다)
+* 링크가 렌더링 된 후에 React가 속성 변경을 무시합니다. (개발 중에 경고 메시지가 표시됩니다.)
 * 링크를 렌더링한 컴포넌트가 마운트 해제된 후에도 React는 링크를 DOM에 남길 수 있습니다.
 
 ---
@@ -103,7 +103,7 @@ React는 `<link>` 컴포넌트에 해당하는 DOM 요소를 React 트리의 어
 
 ### 관련 리소스 연결하기 {/*linking-to-related-resources*/}
 
-아이콘, 정규화된 URL, 핑백과 같은 관련 리소스에 대한 링크로 문서에 주석을 추가할 수 있습니다. React는 이 메타데이터를 React 트리의 어디에 렌더링 되든 상관없이 문서의 `<head>`에 배치합니다.
+아이콘, 정규화된 URL, 핑백<sup>Pingback</sup>과 같은 관련 리소스에 대한 링크로 문서에 주석을 추가할 수 있습니다. React는 이 메타데이터를 React 트리의 어디에 렌더링 되든 상관없이 문서의 `<head>`에 배치합니다.
 
 <SandpackWithHTMLOutput>
 
@@ -129,7 +129,7 @@ export default function BlogPage() {
 컴포넌트가 올바르게 표시되기 위해 특정 스타일시트에 의존하는 경우 해당 스타일시트에 대한 링크를 컴포넌트 내에서 렌더링할 수 있습니다. 스타일시트가 로드되는 동안 컴포넌트는 [일시 중단](/reference/react/Suspense)됩니다. `precedence` 속성을 제공해야 하며 이는 React에 이 스타일시트를 다른 스타일시트와 비교하여 어디에 배치해야 하는지 알려줍니다. 높은 우선순위의 스타일시트는 낮은 우선순위의 스타일시트를 덮어쓸 수 있습니다.
 
 <Note>
-스타일시트를 사용하고 싶을 때 [preinit](/reference/react-dom/preinit) 함수를 호출하는 것이 유용할 수 있습니다. 이 함수를 호출하면 단순히 `<link>` 컴포넌트를 렌더링하는 것보다 브라우저가 스타일시트를 더 빨리 가져올 수 있습니다. 예를 들어 [HTTP Early Hints 응답](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103)을 보내는 방식으로 가능합니다.
+스타일시트를 사용하고 싶을 때 [`preinit`](/reference/react-dom/preinit) 함수를 호출하는 것이 유용할 수 있습니다. 이 함수를 호출하면 단순히 `<link>` 컴포넌트를 렌더링하는 것보다 브라우저가 스타일시트를 더 빨리 가져올 수 있습니다. 예를 들어 [HTTP Early Hints 응답](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103)을 보내는 방식으로 가능합니다.
 </Note>
 
 <SandpackWithHTMLOutput>
@@ -151,9 +151,7 @@ export default function SiteMapPage() {
 
 ### 스타일시트 우선순위 제어하기 {/*controlling-stylesheet-precedence*/}
 
-스타일시트는 서로 충돌할 수 있으며, 이 경우 브라우저는 문서에서 나중에 오는 스타일시트를 적용합니다. React는 `precedence` 속성을 사용하여 스타일시트의 순서를 제어할 수 있도록 합니다. 이 예시에서는 세 개의 컴포넌트가 스타일시트를 렌더링하며, 더 높은 우선순위를 가진 스타일시트는 해당 컴포넌트를 더 먼저 렌더링하더라도 문서에서 나중에 배치됩니다.
-
-Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`. {/*TODO*/}
+스타일시트는 서로 충돌할 수 있으며, 이 경우 브라우저는 문서에서 나중에 오는 스타일시트를 적용합니다. React는 `precedence` 속성을 사용하여 스타일시트의 순서를 제어할 수 있도록 합니다. 이 예시에서는 세 개의 컴포넌트가 스타일시트를 렌더링하며, 동일한 `precedence` 값을 가진 스타일시트는 `<head>`에서 함께 그룹화됩니다.
 
 <SandpackWithHTMLOutput>
 
@@ -189,9 +187,9 @@ function ThirdComponent() {
 
 Note the `precedence` values themselves are arbitrary and their naming is up to you. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher".
 
-### 중복으로 제거된 스타일시트 렌더링 {/*deduplicated-stylesheet-rendering*/}
+### 중복이 제거된 스타일시트 렌더링 {/*deduplicated-stylesheet-rendering*/}
 
-여러 컴포넌트에서 동일한 스타일시트를 렌더링하면 React는 문서의 head에 단일 `<link>`만 배치합니다.
+여러 컴포넌트에서 동일한 스타일시트를 렌더링하면 React는 문서의 `<head>`에 단일 `<link>`만 배치합니다.
 
 <SandpackWithHTMLOutput>
 

From 5977e1f2b84a0c78a933dde19e160a2e7506d3cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 15:48:03 +0900
Subject: [PATCH 07/46] docs: update `meta.md`

---
 src/content/reference/react-dom/components/meta.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md
index c4c308fde..aa3ebe11d 100644
--- a/src/content/reference/react-dom/components/meta.md
+++ b/src/content/reference/react-dom/components/meta.md
@@ -20,7 +20,7 @@ meta: "<meta>"
 
 ### `<meta>` {/*meta*/}
 
-문서 메타데이터를 추가하려면 [내장 브라우저 `<meta>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta)를 렌더링하십시오. 어느 컴포넌트에서나 `<meta>`를 렌더링할 수 있으며, React는 항상 해당 DOM 요소를 문서의 head에 배치합니다.
+문서 메타데이터를 추가하려면 [내장 브라우저 `<meta>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta)를 렌더링하세요. 어느 컴포넌트에서나 `<meta>`를 렌더링할 수 있으며, React는 항상 해당 DOM 요소를 문서의 `<head>`에 배치합니다.
 
 ```js
 <meta name="keywords" content="React, JavaScript, semantic markup, html" />
@@ -30,23 +30,23 @@ meta: "<meta>"
 
 #### Props {/*props*/}
 
-`<meta>`는 [모든 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
+`<meta>`는 [공통 요소 Props](/reference/react-dom/components/common#props)를 지원합니다.
 
 다음 속성 중 _하나만_ 가져야 합니다. `name`, `httpEquiv`, `charset`, `itemProp`.
 
-`<meta>` 컴포넌트는 지정된 속성에 따라 각각 다른 동작을 합니다.
+`<meta>` 컴포넌트는 지정된 Props에 따라 각각 다른 동작을 합니다.
 
 * `name`: 문자열. 문서에 첨부될 [메타데이터 종류](https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name)를 지정합니다.
 * `charset`: 문자열. 문서에서 사용되는 문자 인코딩을 지원합니다. 유효한 값은 `"utf-8"` 뿐 입니다.
 * `httpEquiv`: 문자열. 문서를 처리할 지시 사항을 지정합니다.
 * `itemProp`: 문자열. 문서 전체가 아닌 문서 내 특정 항목에 대한 메타데이터를 지정합니다.
-* `content`: 문자열. `name` 또는 `itemProp` props와 함께 사용 시 첨부될 메타데이터를 지정하거나, `httpEquiv` props와 함께 사용 시 지시 사항의 동작을 지정합니다.
+* `content`: 문자열. `name` 또는 `itemProp` Props와 함께 사용 시 첨부될 메타데이터를 지정하거나, `httpEquiv` Props와 함께 사용 시 지시 사항의 동작을 지정합니다.
 
 #### 특수 렌더링 동작 {/*special-rendering-behavior*/}
 
 React는 `<meta>` 컴포넌트가 React 트리 어디에서 렌더링되든 상관없이 해당하는 DOM 요소를 항상 문서의 `<head>` 내에 배치합니다. DOM 내에서 `<head>`는 `<meta>`가 존재할 수 있는 유일한 유효한 위치이지만, 특정 페이지를 나타내는 컴포넌트가 `<meta>` 컴포넌트를 자체적으로 렌더링할 수 있다는 점이 편리하고, 구성 가능성을 유지해 줍니다.
 
-단, `<meta>`에 [`itemProp`](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/itemprop) props가 있는 경우에는 예외입니다. 이 경우에는 문서에 대한 메타데이터가 아닌 페이지의 특정 부분에 대한 메타데이터를 나타내므로 특수한 동작이 적용되지 않습니다.
+단, `<meta>`에 [`itemProp`](https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/itemprop) Props가 있는 경우에는 예외입니다. 이 경우에는 문서에 대한 메타데이터가 아닌 페이지의 특정 부분에 대한 메타데이터를 나타내므로 특수한 동작이 적용되지 않습니다.
 
 ---
 
@@ -85,7 +85,7 @@ export default function SiteMapPage() {
 
 ### 문서 내 특정 항목에 메타데이터 추가하기 {/*annotating-specific-items-within-the-document-with-metadata*/}
 
-`itemProp` props와 함께 `<meta>` 컴포넌트를 사용하여 문서 내 특정 항목에 메타데이터를 추가할 수 있습니다. 이 경우, React는 이러한 주석을 문서내 `<head>`에 배치하지 않고, 다른 React 컴포넌트처럼 배치합니다.
+`itemProp` Props와 함께 `<meta>` 컴포넌트를 사용하여 문서 내 특정 항목에 메타데이터를 추가할 수 있습니다. 이 경우, React는 이러한 주석을 문서 내 `<head>`에 배치하지 않고, 다른 React 컴포넌트처럼 배치합니다.
 
 ```js
 <section itemScope>

From 3c8192d8f59fbc212fa7058bdb3693d551d75cb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 16:28:55 +0900
Subject: [PATCH 08/46] docs: update `script.md`

---
 src/content/reference/react-dom/components/script.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md
index 2960e17f3..37ecb9f8b 100644
--- a/src/content/reference/react-dom/components/script.md
+++ b/src/content/reference/react-dom/components/script.md
@@ -27,7 +27,7 @@ script: "<script>"
 <script src="script.js" />
 ```
 
-[아래에서 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
@@ -44,7 +44,7 @@ script: "<script>"
 *  `crossOrigin`: 문자열. 사용할 [CORS 정책](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)입니다. 가능한 값은 `anonymous`와 `use-credentials`입니다.
 * `fetchPriority`: 문자열. 여러 스크립트를 동시에 가져올 때 브라우저가 스크립트를 우선순위로 순위 지정할 수 있도록 합니다. `"high"`, `"low"`, 또는 `"auto"` (기본값)일 수 있습니다.
 * `integrity`: 문자열. 스크립트의 암호화 해시로, [진위성을 검증](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)합니다.
-* `noModule`: 불리언 값. ES 모듈을 지원하는 브라우저에서 스크립트를 비활성화합니다. — ES 모듈을 지원하지 않는 브라우저에 대한 대체 스크립트를 허용합니다.
+* `noModule`: 불리언 값. ES 모듈을 지원하는 브라우저에서 스크립트를 비활성화합니다. ES 모듈을 지원하지 않는 브라우저에 대한 대체 스크립트를 허용합니다.
 * `nonce`: 문자열. 엄격한 콘텐츠 보안 정책을 사용할 때 [리소스를 허용하기 위해](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) 사용하는 암호화된 nonce입니다.
 * `referrer`: 문자열. 스크립트를 가져오고 스크립트가 다시 가져온 리소스를 가져올 때 보낼 [Referer 헤더를 지정합니다.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy)
 * `type`: 문자열. 스크립트가 [전통적인 스크립트, ES 모듈 또는 import 맵](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type)인지를 나타냅니다.
@@ -77,7 +77,7 @@ React는 `<script>` 컴포넌트를 문서의 `<head>`로 이동시키고, 중
 ### 외부 스크립트 렌더링 {/*rendering-an-external-script*/}
 
 특정 스크립트에 의존하여 컴포넌트를 올바르게 표시해야 한다면, 컴포넌트 내에서 `<script>`를 렌더링할 수 있습니다.
-그러나 script 로딩이 완료되기 전에 컴포넌트가 커밋될 수 있습니다.
+그러나 스크립트 로딩이 완료되기 전에 컴포넌트가 커밋될 수 있습니다.
 `load` 이벤트가 발생하면 스크립트 내용에 따라 시작할 수 있습니다. 예를 들어 `onLoad` prop 을 이용할 수 있습니다.
 
 React는 동일한 `src`를 가진 중복된 스크립트를 제거하여 여러 컴포넌트를 렌더링하더라도 그 중 하나만 DOM에 삽입합니다.

From 4fe3cd7416bc05915f804aaa933821fa0eed704a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 16:34:56 +0900
Subject: [PATCH 09/46] docs: update `style.md`

---
 .../reference/react-dom/components/style.md        | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
index 46f8fc11f..975f15e23 100644
--- a/src/content/reference/react-dom/components/style.md
+++ b/src/content/reference/react-dom/components/style.md
@@ -4,7 +4,7 @@ style: "<style>"
 
 <Intro>
 
-[내장된 브라우저 `<style>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/style)를 사용하면 문서에 인라인 CSS 스타일시트를 추가할 수 있습니다.
+[내장 브라우저 `<style>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/style)를 사용하면 문서에 인라인 CSS 스타일시트를 추가할 수 있습니다.
 
 ```js
 <style>{` p { color: red; } `}</style>
@@ -20,17 +20,17 @@ style: "<style>"
 
 ### `<style>` {/*style*/}
 
-문서에 인라인 스타일을 추가하려면, [내장된 브라우저 `<style>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/style)를 렌더링하세요. 어떤 컴포넌트에서든 `<style>`을 렌더링할 수 있으며, React는 [특정 경우](#special-rendering-behavior)에 해당 DOM 요소를 문서의 head에 배치하고 동일한 스타일을 중복 제거합니다.
+문서에 인라인 스타일을 추가하려면, [내장 브라우저 `<style>` 컴포넌트](https://developer.mozilla.org/ko/docs/Web/HTML/Element/style)를 렌더링하세요. 어떤 컴포넌트에서든 `<style>`을 렌더링할 수 있으며, React는 [특정 경우](#special-rendering-behavior)에 해당 DOM 요소를 문서의 `<head>`에 배치하고 동일한 스타일을 중복 제거합니다.
 
 ```js
 <style>{` p { color: red; } `}</style>
 ```
 
-[아래에 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
-`<style>`은 [모든 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
+`<style>`은 [공통 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
 
 * `children`: 문자열 타입. 필수 항목. 스타일시트의 내용.
 * `precedence`: 문자열 타입. 문서의 `<head>` 내 다른 요소들에 비해 `<style>` DOM 노드의 순위를 지정하여, 어떤 스타일시트가 다른 스타일시트를 덮어쓸 수 있는지를 결정합니다. React는 먼저 발견한 우선순위를 "낮게", 나중에 발견한 우선순위를 "높게" 추론합니다. 많은 스타일 시스템은 스타일 규칙이 원자적이기 때문에 단일 우선순위 값을 사용해도 잘 작동할 수 있습니다. 동일한 우선순위를 가지는 스타일시트는 `<link>` 태그인지 인라인 `<style>` 태그인지 [`preinit`](/reference/react-dom/preinit) 함수로 로드된 것인지와 무관하게 함께 적용됩니다.
@@ -47,7 +47,7 @@ style: "<style>"
 
 React는 `<style>` 컴포넌트를 문서의 `<head>`로 이동시키고, 동일한 스타일시트의 중복을 제거하며, 스타일시트가 로딩되는 동안 [서스펜스](/reference/react/Suspense)할 수 있습니다.
 
-이 동작을 사용하려면 `href`와 `precedence` 속성을 제공하세요. React는 동일한 `href`를 가진 스타일의 중복을 제거합니다. precedence 속성은 문서의 `<head>` 내 다른 요소에 비해 `<style>` DOM 노드의 순위를 지정하며, 어떤 스타일시트가 다른 스타일시트를 덮어쓸 수 있는지를 결정합니다.
+이 동작을 사용하려면 `href`와 `precedence` 속성을 제공하세요. React는 동일한 `href`를 가진 스타일의 중복을 제거합니다. `precedence` 속성은 문서의 `<head>` 내 다른 요소에 비해 `<style>` DOM 노드의 순위를 지정하며, 어떤 스타일시트가 다른 스타일시트를 덮어쓸 수 있는지를 결정합니다.
 
 이러한 처리는 두 가지 주의 사항이 있습니다.
 
@@ -63,13 +63,11 @@ React는 `<style>` 컴포넌트를 문서의 `<head>`로 이동시키고, 동일
 
 컴포넌트가 올바르게 표시되기 위해 특정 CSS 스타일에 의존하는 경우, 컴포넌트 내에서 인라인 스타일시트를 렌더링할 수 있습니다.
 
-`href`와 `precedence` 속성을 제공하면 스타일시트가 로딩되는 동안 컴포넌트가 일시 중지됩니다. (인라인 스타일시트의 경우에도 스타일시트가 참조하는 폰트와 이미지로 인해 로딩 시간이 발생할 수 있습니다.) `href` 속성은 스타일시트를 고유하게 식별해야 하며, 이를 통해 React는 동일한 href를 가진 스타일시트의 중복을 제거할 수 있습니다.
-
 The `href` prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same `href`.
 If you supply a `precedence` prop, React will reorder inline stylesheets based on the order these values appear in the component tree.
 
 Inline stylesheets will not trigger Suspense boundaries while they're loading.
-Even if they load async resources like fonts or images. {/*TODO*/}
+Even if they load async resources like fonts or images.
 
 <SandpackWithHTMLOutput>
 

From c74476442bd90a18352782dadb4dbca69294920e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 16:38:53 +0900
Subject: [PATCH 10/46] docs: update `title.md`

---
 .../reference/react-dom/components/title.md        | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md
index 4a0d5139a..84c611347 100644
--- a/src/content/reference/react-dom/components/title.md
+++ b/src/content/reference/react-dom/components/title.md
@@ -4,7 +4,7 @@ title: "<title>"
 
 <Intro>
 
-[내장된 브라우저 `<title>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)를 사용하면 문서의 제목을 지정할 수 있습니다.
+[내장 브라우저 `<title>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)를 사용하면 문서의 제목을 지정할 수 있습니다.
 
 ```js
 <title>My Blog</title>
@@ -20,17 +20,17 @@ title: "<title>"
 
 ### `<title>` {/*title*/}
 
-문서의 제목을 지정하려면 [내장된 브라우저 `<title>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)를 렌더링하십시오. `<title>`은 어떤 컴포넌트에서든 렌더링할 수 있으며, React는 항상 해당하는 DOM 요소를 문서의 헤드에 배치합니다.
+문서의 제목을 지정하려면 [내장 브라우저 `<title>` 컴포넌트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)를 렌더링하세요. `<title>`은 어떤 컴포넌트에서든 렌더링할 수 있으며, React는 항상 해당하는 DOM 요소를 문서의 `<head>`에 배치합니다.
 
 ```js
 <title>My Blog</title>
 ```
 
-[아래에서 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### Props {/*props*/}
 
-`<title>`은 [모든 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
+`<title>`은 [공통 컴포넌트 속성](/reference/react-dom/components/common#props)을 지원합니다.
 
 * `children`: `<title>`은 자식으로 텍스트만 허용합니다. 이 텍스트는 문서의 제목이 됩니다. 텍스트만 렌더링하는 한, 사용자 정의 컴포넌트도 전달할 수 있습니다.
 
@@ -39,12 +39,12 @@ title: "<title>"
 React는 `<title>` 컴포넌트에 해당하는 DOM 요소를 React 트리 내 어디에서 렌더링하든 항상 문서의 `<head>` 내에 배치합니다. `<head>`는 DOM 내에서 `<title>`이 존재할 수 있는 유일한 위치이지만, 특정 페이지를 나타내는 컴포넌트가 자체적으로 `<title>`을 렌더링할 수 있으면 편리하고 구성 가능하게 유지됩니다.
 
 여기에는 두 가지 예외가 있습니다.
-* `<title>`이 `<svg>` 컴포넌트 내에 있는 경우, 특별한 동작이 없습니다. 이 context에서는 문서의 제목을 나타내는 것이 아니라 [해당 SVG 그래픽에 대한 접근성 주석](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title)이기 때문입니다.
+* `<title>`이 `<svg>` 컴포넌트 내에 있는 경우, 특별한 동작이 없습니다. 이 맥락에서는 문서의 제목을 나타내는 것이 아니라 [해당 SVG 그래픽에 대한 접근성 주석](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title)이기 때문입니다.
 * `<title>`에 [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) 속성이 있는 경우, 특별한 동작이 없습니다. 이 경우 문서의 제목이 아니라 페이지의 특정 부분에 대한 메타데이터를 나타내기 때문입니다.
 
 <Pitfall>
 
-한 번에 하나의 `<title>`만 렌더링하십시오. 여러 구성 요소가 동시에 `<title>` 태그를 렌더링하면 React는 모든 제목을 문서의 헤드에 배치합니다. 이렇게 되면 브라우저와 검색 엔진의 동작이 정의되지 않습니다.
+한 번에 하나의 `<title>`만 렌더링하세요. 여러 구성 요소가 동시에 `<title>` 태그를 렌더링하면 React는 모든 제목을 문서의 `<head>`에 배치합니다. 이렇게 되면 브라우저와 검색 엔진의 동작이 정의되지 않습니다.
 
 </Pitfall>
 
@@ -82,7 +82,7 @@ export default function ContactUsPage() {
 <title>Results page {pageNumber}</title> // 🔴 Problem: This is not a single string
 ```
 
-... 실제로는 `<title>` 컴포넌트에 두 개의 요소로 구성된 배열이 자식으로 전달됩니다 (문자열 `"Results page"`와 `pageNumber`의 값). 이는 오류를 발생시킵니다. 대신에 문자열 보간을 사용하여 `<title>`에 단일 문자열을 전달하십시오
+실제로는 `<title>` 컴포넌트에 두 개의 요소로 구성된 배열이 자식으로 전달됩니다. (문자열 `"Results page"`와 `pageNumber`의 값.) 이는 오류를 발생시킵니다. 대신에 문자열 보간을 사용하여 `<title>`에 단일 문자열을 전달하세요.
 
 ```js
 <title>{`Results page ${pageNumber}`}</title>

From 338f22af4baa054fbd9d8f189017b3e63bdf6f36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 16:42:03 +0900
Subject: [PATCH 11/46] docs: update `hooks/index.md`

---
 src/content/reference/react-dom/hooks/index.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/react-dom/hooks/index.md b/src/content/reference/react-dom/hooks/index.md
index 4fb0fe0a0..6deaf691e 100644
--- a/src/content/reference/react-dom/hooks/index.md
+++ b/src/content/reference/react-dom/hooks/index.md
@@ -4,15 +4,15 @@ title: "Built-in React DOM Hooks"
 
 <Intro>
 
-`react-dom` 패키지는 웹 애플리케이션만 지원하는 Hook을 포함하고 있습니다. 이 Hook은 iOS, 안드로이드, Windows 애플리케이션과 같은 브라우저가 아닌 환경들은 지원하지 않습니다. 웹 브라우저뿐만 아니라 *다른 환경*에서도 지원되는 Hook을 찾고 있다면 [the React Hooks page](/reference/react)를 참고하세요. 이 페이지는 `react-dom` 패키지에 포함된 모든 Hook을 나열하고 있습니다.
+`react-dom` 패키지는 웹 애플리케이션만 지원하는 Hook을 포함하고 있습니다. 이 Hook은 iOS, 안드로이드, Windows 애플리케이션과 같은 브라우저가 아닌 환경들은 지원하지 않습니다. 웹 브라우저뿐만 아니라 *다른 환경*에서도 지원되는 Hook을 찾고 있다면 [React Hook 페이지](/reference/react)를 참고하세요. 이 페이지는 `react-dom` 패키지에 포함된 모든 Hook을 나열하고 있습니다.
 
 </Intro>
 
 ---
 
-## 폼 Hooks {/*form-hooks*/}
+## 폼 Hook {/*form-hooks*/}
 
-*폼*은 정보 제출을 위한 상호 작용형 제어를 만들 수 있도록 해줍니다. 컴포넌트에 있는 폼을 관리하기 위해 다음과 같은 훅 중 하나를 사용할 수 있습니다.
+*폼*은 정보 제출을 위한 상호 작용형 제어를 만들 수 있도록 해줍니다. 컴포넌트에 있는 폼을 관리하기 위해 다음과 같은 Hook 중 하나를 사용할 수 있습니다.
 
 * [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 폼의 상태에 따라 UI를 업데이트할 수 있게 해줍니다.
 

From 146fdfd704c2aa810abb92316a53ced234e045b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 5 Jan 2025 16:46:30 +0900
Subject: [PATCH 12/46] docs: update `useFormStatus.md`

---
 .../reference/react-dom/hooks/useFormStatus.md     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md
index 71b3356a2..3a0617592 100644
--- a/src/content/reference/react-dom/hooks/useFormStatus.md
+++ b/src/content/reference/react-dom/hooks/useFormStatus.md
@@ -44,7 +44,7 @@ export default function App() {
 
 위의 예시에서 `Submit` 컴포넌트는 폼이 제출 중일 때 `<button>`을 누를 수 없도록 하기 위해 이 정보를 활용합니다.
 
-[아래에서 더 많은 예시를 확인해 보세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### 매개변수 {/*parameters*/}
 
@@ -52,16 +52,16 @@ export default function App() {
 
 #### 반환값 {/*returns*/}
 
-다음의 프로퍼티를 가지는 `status` 객체를 반환합니다:
+다음의 프로퍼티를 가지는 `status` 객체를 반환합니다.
 
 * `pending`: 불리언 값입니다. `true`라면 상위 `<form>`이 아직 제출 중이라는 것을 의미합니다. 그렇지 않으면 `false`입니다.
 
-* `data`: [`FormData 인터페이스`](https://developer.mozilla.org/ko/docs/Web/API/FormData)를 구현한 객체로, 상위 `<form>`이 제출하는 데이터를 포함합니다. 활성화된 제출이 없거나 상위에 `<form>`이 없는 경우에는 `null`입니다.
+* `data`: [`FormData` 인터페이스](https://developer.mozilla.org/ko/docs/Web/API/FormData)를 구현한 객체로, 상위 `<form>`이 제출하는 데이터를 포함합니다. 활성화된 제출이 없거나 상위에 `<form>`이 없는 경우에는 `null`입니다.
 
 * `method`: `'get'` 또는 `'post'` 중 하나의 문자열 값입니다. 이 프로퍼티는 상위 `<form>`이 `GET` 또는 `POST` [HTTP 메서드](https://developer.mozilla.org/ko/docs/Web/HTTP/Methods)를 사용하여 제출되는지를 나타냅니다. 기본적으로 `<form>`은 `GET` 메서드를 사용하며 [`method`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/form#method) 프로퍼티를 통해 지정할 수 있습니다.
 
 [//]: # (Link to `<form>` documentation. "Read more on the `action` prop on `<form>`.")
-* `action`: 상위 `<form>`의 `action` prop에 전달한 함수의 레퍼런스입니다. 상위 `<form>`이 없는 경우에는 이 프로퍼티는 `null`입니다. `action` prop에 URI 값이 제공되었거나 `action` prop를 지정하지 않았을 경우에는 `status.action`은 `null`입니다.
+* `action`: 상위 `<form>`의 `action` Prop에 전달한 함수의 레퍼런스입니다. 상위 `<form>`이 없는 경우에는 이 프로퍼티는 `null`입니다. `action` Prop에 URI 값이 제공되었거나 `action` prop를 지정하지 않았을 경우에는 `status.action`은 `null`입니다.
 
 #### 주의 사항 {/*caveats*/}
 
@@ -72,8 +72,8 @@ export default function App() {
 
 ## 사용법 {/*usage*/}
 
-### 폼을 제출하는 동안 보류 중인 상태로 표시하기 {/*display-a-pending-state-during-form-submission*/}
-폼을 제출하는 동안 보류 상태를 표시하려면 `<form>` 내에서 렌더링한 컴포넌트에서 `useFormStatus` Hook을 호출하고 반환된 `pending` 프로퍼티를 확인하세요.
+### 폼을 제출하는 동안 대기 중인 상태로 표시하기 {/*display-a-pending-state-during-form-submission*/}
+폼을 제출하는 동안 대기<sup>Pending</sup> 상태를 표시하려면 `<form>` 내에서 렌더링한 컴포넌트에서 `useFormStatus` Hook을 호출하고 반환된 `pending` 프로퍼티를 확인하세요.
 
 여기서는 `pending` 프로퍼티를 사용하여 폼이 제출 중인지를 나타냅니다.
 
@@ -227,5 +227,5 @@ button {
 
 `useFormStatus`를 호출하는 컴포넌트가 `<form>`에 감싸져 있지 않다면, `status.pending`은 항상 `false`를 반환합니다. `useFormStatus`가 `<form>` 엘리먼트의 자식 컴포넌트에서 호출되는지 확인하세요.
 
-`useFormStatus`는 동일한 컴포넌트에서 렌더링한 `<form>`의 상태를 추적하지 않습니다. 자세한 내용은 [주의하세요!](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component) 에서 확인할 수 있습니다.
+`useFormStatus`는 동일한 컴포넌트에서 렌더링한 `<form>`의 상태를 추적하지 않습니다. 자세한 내용은 ['주의하세요!'](#useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component)에서 확인할 수 있습니다.
 

From 634f9ed8671364c043986605f3836b549ebd5203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 6 Jan 2025 01:20:19 +0900
Subject: [PATCH 13/46] docs: update `apis.md`

---
 src/content/reference/react/apis.md  | 17 +++++++++--------
 src/content/reference/react/cache.md |  2 +-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md
index 85eab4cce..9b705817d 100644
--- a/src/content/reference/react/apis.md
+++ b/src/content/reference/react/apis.md
@@ -1,29 +1,30 @@
 ---
-title: "내부에 포함된 React APIs"
+title: "내장 React API"
 ---
 
 <Intro>
 
-[Hooks](/reference/react)와 [Components](/reference/react/components) 외에도 `react` package는 컴포넌트를 정의하는데 유용한 몇 가지 API를 가지고 있습니다. 이 페이지는 최신 React API가 모두 나열되어 있습니다.
+[Hook](/reference/react/hooks)과 [컴포넌트](/reference/react/components) 외에도 `react` 패키지는 컴포넌트를 정의하는데 유용한 몇 가지 API를 가지고 있습니다. 이 페이지는 최신 React API를 모두 나열합니다.
 
 </Intro>
-
+{/*React 영문 공식 문서에 반영되지 않은 내용 임의로 수정하여 반영하였습니다. `cahce` 및 `use`에 대한 내용 설명을 제외하고 수정하지 말아주세요*/}
 ---
+* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions.
+* [`cache`](/reference/react/cache)를 통해 가져온 데이터나 연산의 결과를 캐싱합니다.
 * [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext)
-* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef)
 * [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time.
 * [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback)
 * [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition)
-* [`act`](/reference/react/act) lets you wrap renders and interactions in tests to ensure updates have processed before making assertions.
+* [`use`](/reference/react/use)는 Promise나 Context와 같은 데이터를 참조하는 React Hook입니다.
 ---
 
 ## Resource APIs {/*resource-apis*/}
 
-*Resource*를 state의 일부로 포함하지 않고도 컴포넌트에서 resource에 액세스할 수 있습니다. 예를 들어, 구성 요소는 Promise에서 메시지를 읽거나 context에서 스타일 정보를 읽을 수 있습니다.
+*Resource*를 State의 일부로 포함하지 않고도 컴포넌트에서 Resource에 액세스할 수 있습니다. 예를 들어, 컴포넌트는 Promise에서 메시지를 읽거나 Context에서 스타일 정보를 읽을 수 있습니다.
 
-resource에서 값을 읽으려면 다음 API를 사용하세요.
+Resource에서 값을 읽으려면 다음 API를 사용하세요.
 
-- [`use`](/reference/react/use)를 사용하면 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)나 [context](/learn/passing-data-deeply-with-context)와 같은 resource의 값을 읽을 수 있습니다.
+- [`use`](/reference/react/use)를 사용하면 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)나 [Context](/learn/passing-data-deeply-with-context)와 같은 Resource의 값을 읽을 수 있습니다.
 ```js
 function MessageComponent({ messagePromise }) {
   const message = use(messagePromise);
diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
index aad38cf6c..5d8b7373c 100644
--- a/src/content/reference/react/cache.md
+++ b/src/content/reference/react/cache.md
@@ -11,7 +11,7 @@ canary: true
 
 <Intro>
 
-`cache`는 가져온 데이터나 연산의 결과를 캐싱하게 해줍니다.
+`cache`를 통해 가져온 데이터나 연산의 결과를 캐싱합니다.
 
 ```js
 const cachedFn = cache(fn);

From 506038917270df1cab6ec140f77415948f032dbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 6 Jan 2025 23:06:21 +0900
Subject: [PATCH 14/46] docs: update `cache.md`

---
 src/content/reference/react/cache.md | 48 ++++++++++++++--------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
index 5d8b7373c..80a5ba4bc 100644
--- a/src/content/reference/react/cache.md
+++ b/src/content/reference/react/cache.md
@@ -40,23 +40,23 @@ function Chart({data}) {
   // ...
 }
 ```
-`getMetrics`가 처음 `data`를 호출할 때, `getMetrics`는 `calculateMetrics(data)`를 호출하고 캐시에 결과를 저장합니다. `getMetrics`가 같은 `data`와 함께 다시 호출되면, `calculateMetrics(data)`를 다시 호출하는 대신에 캐싱 된 결과를 반환합니다.
+`getMetrics`가 처음 `data`를 호출할 때, `getMetrics`는 `calculateMetrics(data)`를 호출하고 캐시에 결과를 저장합니다. `getMetrics`가 같은 `data`와 함께 다시 호출되면, `calculateMetrics(data)`를 다시 호출하는 대신에 캐싱된 결과를 반환합니다.
 
-[아래에 있는 예시를 참고하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### 매개변수 {/*parameters*/}
 
-- `fn`: 결과를 저장하고 싶은 함수. `fn`는 어떤 인자값도 받을 수 있고 어떤 결과도 반환할 수 있습니다.
+- `fn`: 결과를 저장하고 싶은 함수. `fn`은 어떤 인수도 받을 수 있고 어떠한 결과도 반환할 수 있습니다.
 
 #### 반환값 {/*returns*/}
 
-`cache`는 같은 타입 시그니처를 가진 `fn`의 캐싱 된 버전을 반환합니다. 이 과정에서 `fn`를 호출하지 않습니다.
+`cache`는 같은 타입 시그니처를 가진 `fn`의 캐싱된 버전을 반환합니다. 이 과정에서 `fn`을 호출하지 않습니다.
 
-주어진 인자값과 함께 `cachedFn`를 호출할 때, 캐시에 캐싱 된 데이터가 있는지 먼저 확인합니다. 만약 캐싱 된 데이터가 있다면, 그 결과를 반환합니다. 만약 없다면, 매개변수와 함께 `fn`을 호출하고 결과를 캐시에 저장하고 값을 반환합니다. `fn`가 유일하게 호출되는 경우는 캐싱 된 데이터가 없는 경우입니다.
+주어진 인자값과 함께 `cachedFn`를 호출할 때, 캐시에 캐싱된 데이터가 있는지 먼저 확인합니다. 만약 캐싱된 데이터가 있다면, 그 결과를 반환합니다. 만약 없다면, 매개변수와 함께 `fn`을 호출하고 결과를 캐시에 저장하고 값을 반환합니다. `fn`이 유일하게 호출되는 경우는 캐싱된 데이터가 없는 경우입니다.
 
 <Note>
 
-입력을 기반으로 반환 값 캐싱을 최적화하는 것을 [_메모이제이션_](https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98)라고 합니다. `cache`에서 반환되는 함수를 메모화된 함수라고 합니다.
+입력을 기반으로 반환 값 캐싱을 최적화하는 것을 [_메모이제이션_](https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98)이라고 합니다. `cache`에서 반환되는 함수를 메모화된 함수라고 합니다.
 
 </Note>
 
@@ -64,7 +64,7 @@ function Chart({data}) {
 
 - React는 서버 요청마다 모든 메모화된 함수들을 위해 캐시를 무효화합니다.
 - `cache`를 호출할 때마다 새 함수가 생성됩니다. 즉, 동일한 함수로 `cache`를 여러 번 호출하면 동일한 캐시를 공유하지 않는 다른 메모화된 함수가 반환됩니다.
-- `cachedFn` 또한 캐시 에러를 잡아냅니다. `fn`가 특정 인수에 대해 에러를 던지면 캐싱 되고, 동일한 인수로 `cachedFn`를 호출하면 동일한 에러가 다시 발생합니다.
+- `cachedFn` 또한 캐시 오류를 잡아냅니다. `fn`이 특정 인수에 대해 오류를 던지면 캐싱되고, 동일한 인수로 `cachedFn`를 호출하면 동일한 오류가 다시 발생합니다.
 - `cache`는 [서버 컴포넌트](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)에서만 사용가능합니다.
 
 ---
@@ -94,11 +94,11 @@ function TeamReport({users}) {
   // ...
 }
 ```
-같은 `user` 객체가 `Profile`과 `TeamReport`에서 렌더될 때, 두 컴포넌트는 일을 공유하고, `user`를 위한 `calculateUserMetrics`를 한 번만 호출합니다.
+같은 `user` 객체가 `Profile`과 `TeamReport`에서 렌더링될 때, 두 컴포넌트는 작업을 공유하고, `user`를 위한 `calculateUserMetrics`를 한 번만 호출합니다.
 
-`Profile`이 먼저 렌더된다고 가정해 봅시다. `Profile`은 <CodeStep step={1}>`getUserMetrics`</CodeStep>를 호출하고, 캐싱 된 결과가 있는지 확인합니다. `user`와 함께 `getUserMetrics`를 처음 호출하기 때문에, 현재 저장된 캐시는 없습니다. `getUserMetrics`는 `user`와 함께 `calculateUserMetrics`를 호출하고 캐시에 결괏값을 저장합니다.
+`Profile`이 먼저 렌더링된다고 가정합시다. `Profile`은 <CodeStep step={1}>`getUserMetrics`</CodeStep>를 호출하고, 캐싱된 결과가 있는지 확인합니다. `user`와 함께 `getUserMetrics`를 처음 호출하기 때문에, 현재 저장된 캐시는 없습니다. `getUserMetrics`는 `user`와 함께 `calculateUserMetrics`를 호출하고 캐시에 결과값을 저장합니다.
 
-`TeamReport`가 `users` 목록과 함께 렌더될 때 같은 `user` 객체를 사용하게 되고, 이는 <CodeStep step={2}>`getUserMetrics`</CodeStep>를 호출해 캐시에서 결괏값을 읽어옵니다.
+`TeamReport`가 `users` 목록과 함께 렌더링될 때 같은 `user` 객체를 사용하게 되고, 이는 <CodeStep step={2}>`getUserMetrics`</CodeStep>를 호출해 캐시에서 결과값을 읽어옵니다.
 
 <Pitfall>
 
@@ -135,9 +135,9 @@ export function Precipitation({cityData}) {
 
 위의 예시에서, <CodeStep step={2}>`Precipitation`</CodeStep>와 <CodeStep step={1}>`Temperature`</CodeStep>는 각각 `cache`를 호출하여 자체 캐시 조회를 통해 새로운 메모화된 함수를 만들어 냅니다. 두 컴포넌트가 같은 `cityData`를 렌더링한다면, `calculateWeekReport`를 호출하는 반복 작업을 하게 됩니다.
 
-게다가, `Temperature`는 컴포넌트가 렌더될 때마다 어떤 캐시 공유도 허용하지 않는 <CodeStep step={1}>새로운 메모화된 함수</CodeStep>를 생성하게 됩니다.
+게다가, `Temperature`는 컴포넌트가 렌더링될 때마다 어떤 캐시 공유도 허용하지 않는 <CodeStep step={1}>새로운 메모화된 함수</CodeStep>를 생성하게 됩니다.
 
-캐시 사용을 늘리고 일을 줄이기 위해서 두 컴포넌트는 같은 캐시에 접근하는 같은 메모화된 함수를 호출해야 합니다. 대신, 컴포넌트끼리 [`import` 할 수 있는](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 전용 모듈에 메모화된 함수를 정의하세요.
+캐시 사용을 늘리고 작업을 줄이기 위해서 두 컴포넌트는 같은 캐시에 접근하는 같은 메모화된 함수를 호출해야 합니다. 대신, 컴포넌트끼리 [`import` 할 수 있는](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 전용 모듈에 메모화된 함수를 정의하세요.
 
 ```js [[3, 5, "export default cache(calculateWeekReport)"]]
 // getWeekReport.js
@@ -171,7 +171,7 @@ export default function Precipitation({cityData}) {
 
 ### 데이터의 스냅샷 공유하기 {/*take-and-share-snapshot-of-data*/}
 
-컴포넌트끼리 데이터의 스냅샷을 공유하기 위해선 `fetch`와 같이 데이터를 받아오는 함수와 함께 `cache`를 사용해야 합니다. 여러 컴포넌트가 같은 데이터를 받아올 때, 요청이 한 번만 발생하고 받아온 데이터는 캐싱 되며 컴포넌트끼리 공유됩니다. 모든 컴포넌트는 서버 렌더링 전반에 걸쳐 동일한 데이터 스냅샷을 참조합니다.
+컴포넌트끼리 데이터의 스냅샷을 공유하기 위해선 `fetch`와 같이 데이터를 가져오는 함수와 함께 `cache`를 사용해야 합니다. 여러 컴포넌트가 같은 데이터를 받아올 때, 요청이 한 번만 발생하고 받아온 데이터는 캐싱되며 컴포넌트끼리 공유됩니다. 모든 컴포넌트는 서버 렌더링 전반에 걸쳐 동일한 데이터 스냅샷을 참조합니다.
 
 ```js [[1, 4, "city"], [1, 5, "fetchTemperature(city)"], [2, 4, "getTemperature"], [2, 9, "getTemperature"], [1, 9, "city"], [2, 14, "getTemperature"], [1, 14, "city"]]
 import {cache} from 'react';
@@ -194,7 +194,7 @@ async function MinimalWeatherCard({city}) {
 
 `AnimatedWeatherCard`와 `MinimalWeatherCard`가 같은 <CodeStep step={1}>city</CodeStep>를 렌더링할 때, <CodeStep step={2}>메모화된 함수</CodeStep>로 부터 같은 데이터의 스냅샷을 받게 됩니다.
 
-`AnimatedWeatherCard`와 `MinimalWeatherCard`가 다른 <CodeStep step={1}>city</CodeStep>를 <CodeStep step={2}>`getTemperature`</CodeStep>의 인자로 받게 된다면, `fetchTemperature`는 두 번 호출되고 호출마다 다른 데이터를 받게 됩니다.
+`AnimatedWeatherCard`와 `MinimalWeatherCard`가 다른 <CodeStep step={1}>city</CodeStep>를 <CodeStep step={2}>`getTemperature`</CodeStep>의 인수로 받게 된다면, `fetchTemperature`는 두 번 호출되고 호출마다 다른 데이터를 받게됩니다.
 
 <CodeStep step={1}>city</CodeStep>가 캐시 키처럼 동작하게 됩니다.
 
@@ -251,7 +251,7 @@ function Page({id}) {
 
 #### 비동기 작업 캐싱하기 {/*caching-asynchronous-work*/}
 
-[비동기 함수](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function)의 결과를 보면, [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 받습니다. 이 Promise는 작업에 대한 상태(_보류 중_, _완료됨_, _실패함_)와 최종적으로 확정된 결과를 가지고 있습니다.
+[비동기 함수](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function)의 결과를 보면, [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)를 받습니다. 이 Promise는 작업에 대한 상태(_대기_, _완료_, _실패_)와 최종적으로 확정된 결과를 가지고 있습니다.
 
 이 예시에서, 비동기 함수 <CodeStep step={1}>`fetchData`</CodeStep>는 `fetch`를 기다리는 Promise를 반환합니다.
 
@@ -272,11 +272,11 @@ async function MyComponent() {
 
 <CodeStep step={2}>`getData`</CodeStep>를 처음 호출할 때, <CodeStep step={1}>`fetchData`</CodeStep>에서 반환된 Promise가 캐싱 됩니다. 이후 조회 시, 같은 Promise를 반환합니다.
 
-첫 번째 <CodeStep step={2}>`getData`</CodeStep> 호출은 `기다리지 않지만(await)` <CodeStep step={3}>두 번째</CodeStep>는 기다립니다. [`await`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await) 는 자바스크립트 연산자로, 기다렸다가 확정된 Promise의 결과를 반환합니다. 첫 번째 <CodeStep step={2}>`getData`</CodeStep>은 단순히 조회할 두 번째 <CodeStep step={3}>`getData`</CodeStep>에 대한 Promise를 캐싱하기 위해 `fetch`를 실행합니다.
+첫 번째 <CodeStep step={2}>`getData`</CodeStep> 호출은 기다리지 않지만(`await`) <CodeStep step={3}>두 번째</CodeStep>는 기다립니다. [`await`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await)은 자바스크립트 연산자로, 기다렸다가 확정된 Promise의 결과를 반환합니다. 첫 번째 <CodeStep step={2}>`getData`</CodeStep>는 단순히 조회할 두 번째 <CodeStep step={3}>`getData`</CodeStep>에 대한 Promise를 캐싱하기 위해 `fetch`를 실행합니다.
 
-<CodeStep step={3}>두 번째 호출</CodeStep>에서 Promise가 여전히 <em>보류 중</em>이면, 결과를 기다리는 동안 `await`가 일시 중지됩니다. 이 최적화는 데이터 불러오기를 기다리는 동안 React가 계산 작업을 계속할 수 있게 해 <CodeStep step={3}>두 번째 호출</CodeStep>에 대한 대기 시간을 줄일 수 있게 합니다.
+<CodeStep step={3}>두 번째 호출</CodeStep>에서 Promise가 여전히 <em>대기 중</em>이면, 결과를 기다리는 동안 `await`이 일시 중지됩니다. 이 최적화는 데이터 불러오기를 기다리는 동안 React가 계산 작업을 계속할 수 있게 해 <CodeStep step={3}>두 번째 호출</CodeStep>에 대한 대기 시간을 줄일 수 있게 합니다.
 
-_완료된_ 결과나 에러에 대한 Promise가 이미 정해진 경우, `await`는 즉시 값을 반환합니다. 두 결과 모두 성능상의 이점이 있습니다.
+_완료된_ 결과나 오류에 대한 Promise가 이미 정해진 경우, `await`는 즉시 값을 반환합니다. 두 결과 모두 성능상의 이점이 있습니다.
 </DeepDive>
 
 <Pitfall>
@@ -308,7 +308,7 @@ React는 컴포넌트에서 메모화된 함수의 캐시 접근만 제공합니
 
 <DeepDive>
 
-#### `cache`, [`memo`](/reference/react/memo), or [`useMemo`](/reference/react/useMemo) 중 언제 어떤 걸 사용해야 하나요? {/*cache-memo-usememo*/}
+#### `cache`, [`memo`](/reference/react/memo), [`useMemo`](/reference/react/useMemo) 중 언제 어떤 걸 사용해야 하나요? {/*cache-memo-usememo*/}
 
 언급된 모든 API들은 메모이제이션을 제공하지만, 메모화 대상, 캐시 접근 권한, 캐시 무효화 시점에 차이가 있습니다.
 
@@ -367,7 +367,7 @@ function App() {
 
 #### `memo` {/*deep-dive-memo*/}
 
-[`memo`](reference/react/memo)는 프로퍼티가 변경되지 않았을 때 컴포넌트가 재 렌더링 되는 것을 막기 위해 사용합니다.
+[`memo`](reference/react/memo)는 프로퍼티가 변경되지 않았을 때 컴포넌트가 다시 렌더링 되는 것을 막기 위해 사용합니다.
 
 ```js
 'use client';
@@ -390,9 +390,9 @@ function App() {
 }
 ```
 
-예시에서 `MemoWeatherReport` 컴포넌트 모두 첫 번째 렌더에서 `calculateAvg`를 호출합니다. 하지만 `App`이 재 렌더링 될 때 `record`의 변경이 없다면 프로퍼티의 변경이 없기 때문에 `MemoWeatherReport`가 다시 렌더링 되지 않습니다.
+예시에서 `MemoWeatherReport` 컴포넌트 모두 첫 번째 렌더링에서 `calculateAvg`를 호출합니다. 하지만 `App`이 다시 렌더링 될 때 `record`의 변경이 없다면 프로퍼티의 변경이 없기 때문에 `MemoWeatherReport`가 다시 렌더링되지 않습니다.
 
-`useMemo`와 비교하면 `memo`는 프로퍼티와 특정 계산을 기반으로 컴포넌트 렌더링을 메모화합니다. `useMemo`와 유사하게, 메모화된 컴포넌트는 마지막 프로퍼티 값에 대한 마지막 렌더링을 캐싱합니다. 프로퍼티가 변경되면, 캐쉬는 무효화되고 컴포넌트는 재 렌더링 됩니다.
+`useMemo`와 비교하면 `memo`는 프로퍼티와 특정 계산을 기반으로 컴포넌트 렌더링을 메모화합니다. `useMemo`와 유사하게, 메모화된 컴포넌트는 마지막 프로퍼티 값에 대한 마지막 렌더링을 캐싱합니다. 프로퍼티가 변경되면, 캐시는 무효화되고 컴포넌트는 다시 렌더링됩니다.
 
 </DeepDive>
 
@@ -408,9 +408,9 @@ function App() {
 
 위의 어느 것도 해당하지 않는다면, React가 캐시에 무엇이 존재하는지 확인하는 방식에 문제가 있을 수 있습니다.
 
-인자가 [원시 값](https://developer.mozilla.org/ko/docs/Glossary/Primitive)(객체, 함수, 배열 등) 이 아니라면, 같은 객체 참조를 넘겼는지 확인하세요.
+인자가 [원시 값](https://developer.mozilla.org/ko/docs/Glossary/Primitive)(객체, 함수, 배열 등)이 아니라면, 같은 객체 참조를 넘겼는지 확인하세요.
 
-메모화된 함수 호출 시, React는 입력된 인자값을 조회해 결과가 이미 캐싱 되어 있는지 확인합니다. React는 인수의 얕은 동등성을 사용해 캐시 히트가 있는지를 결정합니다.
+메모화된 함수 호출 시, React는 입력된 인자값을 조회해 결과가 이미 캐싱되어 있는지 확인합니다. React는 인수의 얕은 동등성을 사용해 캐시 히트가 있는지를 결정합니다.
 
 ```js
 import {cache} from 'react';

From 5e3e40045d9f7b716c4caa850e88ed3ab97b0dec Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Tue, 7 Jan 2025 09:34:21 -0500
Subject: [PATCH 15/46] bot to notify for PRs (#7408)

---
 .github/workflows/discord_notify.yml | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 .github/workflows/discord_notify.yml

diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml
new file mode 100644
index 000000000..ff2caa1bf
--- /dev/null
+++ b/.github/workflows/discord_notify.yml
@@ -0,0 +1,21 @@
+name: Discord Notify
+
+on:
+  pull_request_target:
+    types: [ labeled ]
+
+jobs:
+  notify:
+    if: ${{ github.event.label.name == 'React Core Team' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@v6.0.0
+        with:
+          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          embed-author-name: ${{ github.event.pull_request.user.login }}
+          embed-author-url: ${{ github.event.pull_request.user.html_url }}
+          embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
+          embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
+          embed-description: ${{ github.event.pull_request.body }}
+          embed-url: ${{ github.event.pull_request.html_url }}
\ No newline at end of file

From c0b6bafbeac857869d3158b20e8fc1206f99040d Mon Sep 17 00:00:00 2001
From: Amarachi Ugwu <49257104+amarachiugwu@users.noreply.github.com>
Date: Thu, 9 Jan 2025 07:20:15 +0100
Subject: [PATCH 16/46] Fix broken Next.js base path configuration link (#7419)

---
 src/content/learn/add-react-to-an-existing-project.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index f494b0ab1..a457d2175 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -21,7 +21,7 @@ Let's say you have an existing web app at `example.com` built with another serve
 Here's how we recommend to set it up:
 
 1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
-2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
+2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
 3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
 
 This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) baked into those frameworks.

From 7b4f9484b3172c6541b8ffe58fa51e1e7ad6d060 Mon Sep 17 00:00:00 2001
From: Hichem Fantar <fantar.hichem@gmail.com>
Date: Thu, 9 Jan 2025 07:32:35 +0100
Subject: [PATCH 17/46] fix: change overflow-x-scroll to overflow-x-auto in
 TerminalBlock component (#7415)

---
 src/components/MDX/TerminalBlock.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx
index fc13af338..7d95a6532 100644
--- a/src/components/MDX/TerminalBlock.tsx
+++ b/src/components/MDX/TerminalBlock.tsx
@@ -71,7 +71,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
         </div>
       </div>
       <div
-        className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-scroll"
+        className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-auto"
         translate="no"
         dir="ltr">
         <LevelText type={level} />

From 9c4bc2881bac1f6c72f164c15b38ff38e33730b2 Mon Sep 17 00:00:00 2001
From: Azzyxec <azzyxec@gmail.com>
Date: Thu, 9 Jan 2025 12:05:12 +0530
Subject: [PATCH 18/46] Update server-functions.md (#7396)

In the section "Importing Server Functions from Client Components"

updated "createNoteAction" to "createNote"  to match the function name in the example
---
 src/content/reference/rsc/server-functions.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md
index 74aab615c..b079e322e 100644
--- a/src/content/reference/rsc/server-functions.md
+++ b/src/content/reference/rsc/server-functions.md
@@ -82,7 +82,7 @@ export async function createNote() {
 
 ```
 
-When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNoteAction` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNoteAction` function using the reference provided:
+When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNote` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNote` function using the reference provided:
 
 ```js [[1, 2, "createNote"], [1, 5, "createNote"], [1, 7, "createNote"]]
 "use client";
@@ -90,7 +90,7 @@ import {createNote} from './actions';
 
 function EmptyNote() {
   console.log(createNote);
-  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
+  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNote'}
   <button onClick={() => createNote()} />
 }
 ```

From 9000e6e003854846c4ce5027703b5ce6f81aad80 Mon Sep 17 00:00:00 2001
From: barbaramarkiewicz <48753730+barbaramarkiewicz@users.noreply.github.com>
Date: Thu, 9 Jan 2025 19:23:03 +0100
Subject: [PATCH 19/46] Add React Universe Conf 2025 to list of conferences
 (#7421)

Added React Universe Conf 2025 to the list of conferences
---
 src/content/community/conferences.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 6b95c64c6..85ffe9831 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -25,6 +25,11 @@ June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
 
 [Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
 
+### React Universe Conf 2025 {/*react-universe-conf-2025*/}
+September 2-4, 2025. Wrocław, Poland.
+
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+
 ## Past Conferences {/*past-conferences*/}
 
 ### React Africa 2024 {/*react-africa-2024*/}

From d15d50cd4ca3ba76bf7046485b1f381d515fd73d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 12 Jan 2025 17:46:57 +0900
Subject: [PATCH 20/46] docs: update `cache.md`

---
 src/content/reference/react/cache.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md
index 80a5ba4bc..89b9e6b80 100644
--- a/src/content/reference/react/cache.md
+++ b/src/content/reference/react/cache.md
@@ -52,7 +52,7 @@ function Chart({data}) {
 
 `cache`는 같은 타입 시그니처를 가진 `fn`의 캐싱된 버전을 반환합니다. 이 과정에서 `fn`을 호출하지 않습니다.
 
-주어진 인자값과 함께 `cachedFn`를 호출할 때, 캐시에 캐싱된 데이터가 있는지 먼저 확인합니다. 만약 캐싱된 데이터가 있다면, 그 결과를 반환합니다. 만약 없다면, 매개변수와 함께 `fn`을 호출하고 결과를 캐시에 저장하고 값을 반환합니다. `fn`이 유일하게 호출되는 경우는 캐싱된 데이터가 없는 경우입니다.
+주어진 인수와 함께 `cachedFn`을 호출할 때, 캐시에 캐싱된 데이터가 있는지 먼저 확인합니다. 만약 캐싱된 데이터가 있다면, 그 결과를 반환합니다. 만약 없다면, 매개변수와 함께 `fn`을 호출하고 결과를 캐시에 저장하고 값을 반환합니다. `fn`이 유일하게 호출되는 경우는 캐싱된 데이터가 없는 경우입니다.
 
 <Note>
 
@@ -166,7 +166,7 @@ export default function Precipitation({cityData}) {
   // ...
 }
 ```
-여기 두 컴포넌트가 같은 캐시를 읽고 쓰기 위해 `./getWeekReport.js`로 부터 export해 온 <CodeStep step={3}>같은 메모화된 함수</CodeStep>를 호출했습니다.
+여기 두 컴포넌트가 같은 캐시를 읽고 쓰기 위해 `./getWeekReport.js`로 부터 `export`해 온 <CodeStep step={3}>같은 메모화된 함수</CodeStep>를 호출했습니다.
 </Pitfall>
 
 ### 데이터의 스냅샷 공유하기 {/*take-and-share-snapshot-of-data*/}
@@ -196,7 +196,7 @@ async function MinimalWeatherCard({city}) {
 
 `AnimatedWeatherCard`와 `MinimalWeatherCard`가 다른 <CodeStep step={1}>city</CodeStep>를 <CodeStep step={2}>`getTemperature`</CodeStep>의 인수로 받게 된다면, `fetchTemperature`는 두 번 호출되고 호출마다 다른 데이터를 받게됩니다.
 
-<CodeStep step={1}>city</CodeStep>가 캐시 키처럼 동작하게 됩니다.
+<CodeStep step={1}>city</CodeStep>가 캐시 키<sup>Key</sup>처럼 동작하게 됩니다.
 
 <Note>
 
@@ -214,7 +214,7 @@ async function AnimatedWeatherCard({city}) {
 
 ### 사전에 데이터 받아두기 {/*preload-data*/}
 
-장시간 실행되는 데이터 가져오기를 캐싱하면, 컴포넌트를 렌더링하기 전에 비동기 작업을 시작할 수 있습니다.
+긴 실행 시간이 소요되는 데이터 가져오기를 캐싱하면, 컴포넌트를 렌더링하기 전에 비동기 작업을 시작할 수 있습니다.
 
 ```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]]
 const getUser = cache(async (id) => {
@@ -245,7 +245,7 @@ function Page({id}) {
 
 `Page`를 렌더링할 때, 컴포넌트는 <CodeStep step={1}>`getUser`</CodeStep>를 호출하지만, 반환된 데이터를 사용하지 않는다는 점에 유의하세요. 이 초기 <CodeStep step={1}>`getUser`</CodeStep> 호출은 페이지가 다른 계산 작업을 수행하고 자식을 렌더링하는 동안 발생하는, 비동기 데이터베이스 쿼리를 시작합니다.
 
-`Profile`을 렌더링할 때, <CodeStep step={2}>`getUser`</CodeStep>를 다시 호출합니다. 초기 <CodeStep step={1}>`getUser`</CodeStep> 호출이 이미 사용자 데이터에 반환되고 캐싱 되었다면, `Profile`이 <CodeStep step={2}>해당 데이터를 요청하고 기다릴 때</CodeStep>, 다른 원격 프로시저 호출 없이 쉽게 캐시에서 읽어올 수 있습니다. <CodeStep step={1}> 초기 데이터 요청</CodeStep>이 완료되지 않은 경우, 이 패턴으로 데이터를 미리 로드하면 데이터를 받아올 때 생기는 지연이 줄어듭니다.
+`Profile`을 렌더링할 때, <CodeStep step={2}>`getUser`</CodeStep>를 다시 호출합니다. 초기 <CodeStep step={1}>`getUser`</CodeStep> 호출이 이미 사용자 데이터에 반환되고 캐싱되었다면, `Profile`이 <CodeStep step={2}>해당 데이터를 요청하고 기다릴 때</CodeStep>, 다른 원격 프로시저 호출 없이 쉽게 캐시에서 읽어올 수 있습니다. <CodeStep step={1}> 초기 데이터 요청</CodeStep>이 완료되지 않은 경우, 이 패턴으로 데이터를 미리 로드하면 데이터를 받아올 때 생기는 지연이 줄어듭니다.
 
 <DeepDive>
 
@@ -270,9 +270,9 @@ async function MyComponent() {
 }
 ```
 
-<CodeStep step={2}>`getData`</CodeStep>를 처음 호출할 때, <CodeStep step={1}>`fetchData`</CodeStep>에서 반환된 Promise가 캐싱 됩니다. 이후 조회 시, 같은 Promise를 반환합니다.
+<CodeStep step={2}>`getData`</CodeStep>를 처음 호출할 때, <CodeStep step={1}>`fetchData`</CodeStep>에서 반환된 Promise가 캐싱됩니다. 이후 조회 시, 같은 Promise를 반환합니다.
 
-첫 번째 <CodeStep step={2}>`getData`</CodeStep> 호출은 기다리지 않지만(`await`) <CodeStep step={3}>두 번째</CodeStep>는 기다립니다. [`await`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await)은 자바스크립트 연산자로, 기다렸다가 확정된 Promise의 결과를 반환합니다. 첫 번째 <CodeStep step={2}>`getData`</CodeStep>는 단순히 조회할 두 번째 <CodeStep step={3}>`getData`</CodeStep>에 대한 Promise를 캐싱하기 위해 `fetch`를 실행합니다.
+첫 번째 <CodeStep step={2}>`getData`</CodeStep> 호출은 기다리지<sup>`await`</sup> 않지만 <CodeStep step={3}>두 번째</CodeStep>는 기다립니다. [`await`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/await)은 자바스크립트 연산자로, 기다렸다가 확정된 Promise의 결과를 반환합니다. 첫 번째 <CodeStep step={2}>`getData`</CodeStep>는 단순히 조회할 두 번째 <CodeStep step={3}>`getData`</CodeStep>에 대한 Promise를 캐싱하기 위해 `fetch`를 실행합니다.
 
 <CodeStep step={3}>두 번째 호출</CodeStep>에서 Promise가 여전히 <em>대기 중</em>이면, 결과를 기다리는 동안 `await`이 일시 중지됩니다. 이 최적화는 데이터 불러오기를 기다리는 동안 React가 계산 작업을 계속할 수 있게 해 <CodeStep step={3}>두 번째 호출</CodeStep>에 대한 대기 시간을 줄일 수 있게 합니다.
 
@@ -302,7 +302,7 @@ async function DemoProfile() {
 
 React는 컴포넌트에서 메모화된 함수의 캐시 접근만 제공합니다. 컴포넌트 외부에서 <CodeStep step={1}>`getUser`</CodeStep>를 호출하면 여전히 함수를 실행하지만, 캐시를 읽거나 업데이트하지는 않습니다.
 
-이는 컴포넌트에서만 접근할 수 있는 [컨텍스트](/learn/passing-data-deeply-with-context)를 통해 캐시 접근이 제공되기 때문입니다.
+이는 컴포넌트에서만 접근할 수 있는 [Context](/learn/passing-data-deeply-with-context)를 통해 캐시 접근이 제공되기 때문입니다.
 
 </Pitfall>
 
@@ -335,9 +335,9 @@ function App() {
 }
 ```
 
-이 예시에서 `App`은 두 개의 `WeatherReport`를 같은 데이터와 함께 렌더했습니다. 두 컴포넌트가 같은 작업을 수행했음에도 불구하고 서로 작업을 공유하지 않습니다. `useMemo`의 캐시는 해당 컴포넌트 내부에만 있습니다.
+이 예시에서 `App`은 두 개의 `WeatherReport`를 같은 데이터와 함께 렌더링했습니다. 두 컴포넌트가 같은 작업을 수행했음에도 불구하고 서로 작업을 공유하지 않습니다. `useMemo`의 캐시는 해당 컴포넌트 내부에만 있습니다.
 
-하지만 `useMemo`는 `App`이 다시 렌더링 되고 `record` 객체가 변경되지 않는 경우, 각 컴포넌트 인스턴스가 작업을 건너뛰고 메모화된 `avgTemp`의 값을 사용합니다. `useMemo`는 주어진 종속성을 가진 `avgTemp`의 마지막 계산만 캐싱합니다.
+하지만 `useMemo`는 `App`이 다시 렌더링되고 `record` 객체가 변경되지 않는 경우, 각 컴포넌트 인스턴스가 작업을 건너뛰고 메모화된 `avgTemp`의 값을 사용합니다. `useMemo`는 주어진 종속성을 가진 `avgTemp`의 마지막 계산만 캐싱합니다.
 
 #### `cache` {/*deep-dive-cache*/}
 
@@ -367,7 +367,7 @@ function App() {
 
 #### `memo` {/*deep-dive-memo*/}
 
-[`memo`](reference/react/memo)는 프로퍼티가 변경되지 않았을 때 컴포넌트가 다시 렌더링 되는 것을 막기 위해 사용합니다.
+[`memo`](reference/react/memo)는 프로퍼티가 변경되지 않았을 때 컴포넌트가 다시 렌더링되는 것을 막기 위해 사용합니다.
 
 ```js
 'use client';
@@ -390,7 +390,7 @@ function App() {
 }
 ```
 
-예시에서 `MemoWeatherReport` 컴포넌트 모두 첫 번째 렌더링에서 `calculateAvg`를 호출합니다. 하지만 `App`이 다시 렌더링 될 때 `record`의 변경이 없다면 프로퍼티의 변경이 없기 때문에 `MemoWeatherReport`가 다시 렌더링되지 않습니다.
+예시에서 `MemoWeatherReport` 컴포넌트 모두 첫 번째 렌더링에서 `calculateAvg`를 호출합니다. 하지만 `App`이 다시 렌더링될 때 `record`의 변경이 없다면 프로퍼티의 변경이 없기 때문에 `MemoWeatherReport`가 다시 렌더링되지 않습니다.
 
 `useMemo`와 비교하면 `memo`는 프로퍼티와 특정 계산을 기반으로 컴포넌트 렌더링을 메모화합니다. `useMemo`와 유사하게, 메모화된 컴포넌트는 마지막 프로퍼티 값에 대한 마지막 렌더링을 캐싱합니다. 프로퍼티가 변경되면, 캐시는 무효화되고 컴포넌트는 다시 렌더링됩니다.
 
@@ -400,7 +400,7 @@ function App() {
 
 ## 문제 해결 {/*troubleshooting*/}
 
-### 동일한 인수로 함수를 호출해도 메모된 함수가 계속 실행됩니다. {/*memoized-function-still-runs*/}
+### 동일한 인수로 함수를 호출해도 메모된 함수가 계속 실행됩니다 {/*memoized-function-still-runs*/}
 
 앞서 언급된 주의 사항들을 확인하세요.
 * [다른 메모화된 함수를 호출하면 다른 캐시에서 읽습니다.](#pitfall-different-memoized-functions)
@@ -410,7 +410,7 @@ function App() {
 
 인자가 [원시 값](https://developer.mozilla.org/ko/docs/Glossary/Primitive)(객체, 함수, 배열 등)이 아니라면, 같은 객체 참조를 넘겼는지 확인하세요.
 
-메모화된 함수 호출 시, React는 입력된 인자값을 조회해 결과가 이미 캐싱되어 있는지 확인합니다. React는 인수의 얕은 동등성을 사용해 캐시 히트가 있는지를 결정합니다.
+메모화된 함수 호출 시, React는 입력된 인자값을 조회해 결과가 이미 캐싱되어 있는지 확인합니다. React는 인수들의 얕은 동등성을 사용해 캐시 히트가 있는지를 결정합니다.
 
 ```js
 import {cache} from 'react';

From 293d497949651a3fa41d6e8c53e339ee586b3873 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 12 Jan 2025 18:07:05 +0900
Subject: [PATCH 21/46] docs: update `createContext.md`

---
 src/content/reference/react/createContext.md | 26 ++++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md
index 43a085e89..67e71dbe9 100644
--- a/src/content/reference/react/createContext.md
+++ b/src/content/reference/react/createContext.md
@@ -19,7 +19,7 @@ const SomeContext = createContext(defaultValue)
 
 ## 레퍼런스 {/*reference*/}
 
-### `createContext(기본값)` {/*createcontext*/}
+### `createContext(defaultValue)` {/*createcontext*/}
 
 컴포넌트 외부에서 `createContext`를 호출하여 컨텍스트를 생성합니다.
 
@@ -29,11 +29,11 @@ import { createContext } from 'react';
 const ThemeContext = createContext('light');
 ```
 
-[아래에서 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### 매개변수 {/*parameters*/}
 
-* `기본값`: 컴포넌트가 컨텍스트를 읽을 때 상위에 일치하는 컨텍스트 제공자가 없는 경우 컨텍스트가 가져야 할 값입니다. 의미 있는 기본값이 없으면 `null`을 지정하세요. 기본값은 "최후의 수단"으로 사용됩니다. 이 값은 정적이며 시간이 지나도 변경되지 않습니다.
+* `defaultValue`: 컴포넌트가 컨텍스트를 읽을 때 상위에 일치하는 컨텍스트 제공자가 없는 경우 컨텍스트가 가져야 할 값입니다. 의미 있는 기본값이 없으면 `null`을 지정하세요. 기본값은 "최후의 수단"으로 사용됩니다. 이 값은 정적이며 시간이 지나도 변경되지 않습니다.
 
 #### 반환값 {/*returns*/}
 
@@ -41,8 +41,8 @@ const ThemeContext = createContext('light');
 
 **컨텍스트 객체 자체는 어떠한 정보도 가지고 있지 않습니다.** 다른 컴포넌트가 읽거나 제공하는 어떤 컨텍스트를 나타냅니다. 일반적으로 상위 컴포넌트에서 컨텍스트 값을 지정하기 위해 [`SomeContext.Provider`](#provider)를 사용하고, 아래 컴포넌트에서 읽기 위해 [`useContext(SomeContext)`](/reference/react/useContext)를 호출합니다. 컨텍스트 객체에는 몇 가지 속성이 있습니다.
 
-* `SomeContext.Provider`는 컴포넌트에 컨텍스트 값을 제공하게 해줍니다.
-* `SomeContext.Consumer`는 컨텍스트 값을 읽는 대안적이며 드물게 사용되는 방법입니다.
+* `SomeContext.Provider`는 컴포넌트에 컨텍스트 값을 제공합니다.
+* `SomeContext.Consumer`는 컨텍스트 값을 읽는 대안이며 드물게 사용됩니다.
 
 ---
 
@@ -70,7 +70,7 @@ function App() {
 
 ### `SomeContext.Consumer` {/*consumer*/}
 
-`useContext`가 존재하기 전에는 컨텍스트를 읽는 더 오래된 방법이 있습니다.
+`useContext`가 등장하기 전에 컨텍스트를 읽는 이전 방식이 있었습니다.
 
 ```js
 function Button() {
@@ -85,11 +85,11 @@ function Button() {
 }
 ```
 
-이 오래된 방법은 여전히 작동하지만, **새로 작성된 코드는 대신 [`useContext()`](/reference/react/useContext)로 컨텍스트를 읽어야 합니다:**
+이 예전 방식은 여전히 작동하지만, **새로 작성된 코드는 대신 [`useContext()`](/reference/react/useContext)로 컨텍스트를 읽어야 합니다**.
 
 ```js
 function Button() {
-  // ✅ 권장되는 방법
+  // ✅ 권장하는 방법
   const theme = useContext(ThemeContext);
   return <button className={theme} />;
 }
@@ -154,13 +154,13 @@ function App() {
 
 이제 `Page` 컴포넌트와 그 안의 모든 컴포넌트, 얼마나 깊든지 간에 전달된 컨텍스트 값을 "볼" 수 있습니다. 전달된 컨텍스트 값이 변경되면, React는 컨텍스트를 읽는 컴포넌트를 다시 렌더링합니다.
 
-[컨텍스트 읽기와 제공에 대해 더 알아보고 예시를 확인하세요.](/reference/react/useContext)
+[컨텍스트를 읽고 제공하는 방법에 대해 더 알아보고 예시를 확인하세요.](/reference/react/useContext)
 
 ---
 
 ### 파일에서 컨텍스트 가져오기 및 내보내기 {/*importing-and-exporting-context-from-a-file*/}
 
-다른 파일의 컴포넌트가 동일한 컨텍스트에 액세스해야 할 필요가 종종 있습니다. 이것이 별도의 파일에서 컨텍스트를 선언하는 것이 일반적인 이유입니다. 그런 다음 [`export` 문](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export)을 사용하여 다른 파일에서 사용할 수 있도록 컨텍스트를 사용할 수 있습니다.
+종종 서로 다른 파일에 있는 컴포넌트들이 동일한 컨텍스트에 접근해야 할 때가 있습니다. 이것이 별도의 파일에서 컨텍스트를 선언하는 것이 일반적인 이유입니다. 그런 다음 [`export` 문](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export)을 사용하여 다른 파일에서 사용할 수 있도록 컨텍스트를 사용할 수 있습니다.
 
 ```js {4-5}
 // Contexts.js
@@ -198,7 +198,7 @@ function App() {
 }
 ```
 
-이것은 [컴포넌트를 가져오고 내보내기](/learn/importing-and-exporting-components)와 유사하게 작동합니다.
+이것은 [컴포넌트 `import` 및 `export`하기](/learn/importing-and-exporting-components)와 유사하게 동작합니다.
 
 ---
 
@@ -212,6 +212,6 @@ function App() {
 const ThemeContext = createContext('light');
 ```
 
-이 값은 절대 변경되지 않습니다. React는 일치하는 제공자가 위에 없는 경우 이 값을 대체로 사용합니다.
+이 값은 절대 변경되지 않습니다. React는 상위에 일치하는 제공자를 찾을 수 없는 경우에만 이 값을 기본값으로 사용합니다.
 
-시간이 지나면서 컨텍스트를 변경하려면, [상태를 추가하고 컴포넌트를 컨텍스트 제공자로 감싸세요.](/reference/react/useContext#updating-data-passed-via-context)
+컨텍스트가 시간에 따라 변경되도록 만들려면, [State를 추가하고 컴포넌트를 컨텍스트 제공자로 감싸세요.](/reference/react/useContext#updating-data-passed-via-context)

From 2ed922a515d2cec11e8e0fac60abd4de443fa049 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 12 Jan 2025 18:24:21 +0900
Subject: [PATCH 22/46] docs: update` lazy.md`

---
 src/content/reference/react/lazy.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md
index 3dd2ab3b7..988677215 100644
--- a/src/content/reference/react/lazy.md
+++ b/src/content/reference/react/lazy.md
@@ -4,7 +4,7 @@ title: lazy
 
 <Intro>
 
-`lazy`는 로딩 중인 컴포넌트 코드가 처음으로 렌더링 될 때까지 연기할 수 있습니다.
+`lazy`를 사용하면 컴포넌트가 처음 렌더링될 때까지 해당 컴포넌트의 코드를 로딩하는 것을 지연할 수 있습니다.
 
 ```js
 const SomeComponent = lazy(load)
@@ -20,7 +20,7 @@ const SomeComponent = lazy(load)
 
 ### `lazy(load)` {/*lazy*/}
 
-lazy를 이용하여 로딩하는 React 컴포넌트를 선언하려면 컴포넌트 외부에서 `lazy`를 호출하세요.
+`lazy`를 컴포넌트 외부에서 호출하여 지연 로딩된 React 컴포넌트를 선언하세요.
 
 ```js
 import { lazy } from 'react';
@@ -28,15 +28,15 @@ import { lazy } from 'react';
 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 ```
 
-[아래에서 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### 매개변수 {/*parameters*/}
 
-* `load`: [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) 또는 또 다른 *thenable* (`then` 메서드가 있는 Promise 유사 객체)을 반환하는 함수입니다. React는 반환된 컴포넌트를 처음 렌더링하려고 할 때까지 `load`를 호출하지 않을 것입니다. React는 먼저 `load`를 실행한 후 `load`가 이행될 때까지 기다렸다가 이행된 값의 `.default`를 React 컴포넌트로 렌더링합니다. 반환된 Promise와 Promise의 이행된 값이 모두 캐시 되므로 React는 `load`를 두 번 이상 호출하지 않습니다. Promise가 거부하면 React는 가장 가까운 Error Boundary를 처리하기 위해 Error Boundary에 대한 거부 사유를 `throw` 할 것입니다.
+* `load`: [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) 혹은 또 다른 *thenable* (`then` 메서드가 있는 Promise 유사 객체)을 반환하는 함수입니다. React는 반환된 컴포넌트를 처음 렌더링하려고 시도할 때까지 `load`를 호출하지 않습니다. React가 처음으로 `load`를 호출하면, 그것이 해결될 때까지 기다리고, 그 후 해결된 값의 `.default`를 React 컴포넌트로 렌더링합니다. 반환된 Promise와 Promise의 해결된 값은 캐시되므로, React는 `load`를 한 번만 호출합니다. 만약 Promise가 거부되면, React는 거부 이유를 가장 가까운 Error Boundary가 처리할 수 있도록 `throw` 합니다.
 
 #### 반환값 {/*returns*/}
 
-`lazy`는 트리에 렌더링할 수 있는 React 컴포넌트를 반환합니다. 컴포넌트의 코드가 여전히 로드되는 동안 렌더링을 시도하면 일시 중지됩니다. 로딩 중에 loading indicator를 표시하려면 [`<Suspense>`](/reference/react/Suspense)를 사용합니다.
+`lazy`는 트리에 렌더링할 수 있는 React 컴포넌트를 반환합니다. 컴포넌트의 코드가 여전히 로딩되는 동안 렌더링을 시도하면 일시 중지됩니다. 로딩 중에 Loading Indicator를 표시하려면 [`<Suspense>`](/reference/react/Suspense)를 사용하세요.
 
 ---
 
@@ -44,17 +44,17 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 
 #### 매개변수 {/*load-parameters*/}
 
-`load`는 매개변수를 수신하지 않습니다.
+`load`는 매개변수를 받지 않습니다.
 
 #### 반환값 {/*load-returns*/}
 
-[Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) 또는 다른 *thenable* (`then` 메서드가 있는 Promise 유사 객체)을 반환해야 합니다. 결국  `.default` 프로퍼티가 함수, [`memo`](/reference/react/memo) 또는 [`forwardRef`](/reference/react/forwardRef) 컴포넌트와 같은 유효한 React 컴포넌트 유형인 객체로 해석되어야 합니다.
+[Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) 또는 다른 *thenable* (`then` 메서드가 있는 Promise 유사 객체)을 반환해야 합니다. 결국  `.default` 프로퍼티가 함수, [`memo`](/reference/react/memo), [`forwardRef`](/reference/react/forwardRef) 컴포넌트와 같은 유효한 React 컴포넌트 유형인 객체로 해석되어야 합니다.
 
 ---
 
 ## 사용법 {/*usage*/}
 
-### Suspense와 Lazy-loading 컴포넌트 {/*suspense-for-code-splitting*/}
+### Suspense와 지연 로딩 컴포넌트 {/*suspense-for-code-splitting*/}
 
 일반적으로 정적 [`import`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import) 선언으로 컴포넌트를 가져옵니다.
 
@@ -62,7 +62,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 import MarkdownPreview from './MarkdownPreview.js';
 ```
 
-해당 컴포넌트 코드가 처음 렌더링 될 때까지 로드하는 것을 연기하려면 import를 다음과 같이 대체합니다.
+해당 컴포넌트 코드가 처음 렌더링 될 때까지 로드하는 것을 연기하려면 `import`를 다음과 같이 대체합니다.
 
 ```js
 import { lazy } from 'react';
@@ -70,9 +70,9 @@ import { lazy } from 'react';
 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 ```
 
-위의 코드는 [동적 `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)에 의존하므로 번들러 또는 프레임워크의 지원이 필요할 수 있습니다. 이 패턴을 사용하려면 임포트하려는 lazy 컴포넌트가 `default` 내보내기로 내보내져 있어야 합니다.
+위의 코드는 [동적 `import()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)에 의존하므로 번들러 또는 프레임워크의 지원이 필요할 수 있습니다. 이 패턴을 사용하려면 임포트하려는 `lazy` 컴포넌트가 `default` 내보내기로 내보내져 있어야 합니다.
 
-이제 요청에 따라 컴포넌트의 코드가 로드되므로 로드하는 동안 표시할 항목도 지정해야 합니다. lazy 컴포넌트 또는 해당 부모 컴포넌트 중 하나를 [`<Suspense>`](/reference/react/Suspense) 바운더리로 감싸서 이 작업을 수행할 수 있습니다.
+이제 요청에 따라 컴포넌트의 코드가 로딩되므로, 로딩하는 동안 표시할 항목도 지정해야 합니다. `lazy` 컴포넌트 또는 해당 부모 컴포넌트 중 하나를 [`<Suspense>`](/reference/react/Suspense) 경계<sup>Boundary</sup>로 감싸서 이 작업을 수행할 수 있습니다.
 
 ```js {1,4}
 <Suspense fallback={<Loading />}>
@@ -81,7 +81,7 @@ const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 </Suspense>
 ```
 
-이 예시에서 `MarkdownPreview` 코드는 렌더링을 시도할 때까지 로드되지 않습니다. `MarkdownPreview`가 아직 로딩되지 않는 경우에는 그 자리에 `Loading` 코드가 대신 표시됩니다. 체크박스를 선택해 보세요.
+이 예시에서 `MarkdownPreview` 코드는 렌더링을 시도할 때까지 로딩되지 않습니다. `MarkdownPreview`가 아직 로딩되지 않는 경우에는 그 자리에 `Loading` 코드가 대신 표시됩니다. 체크박스를 선택해 보세요.
 
 <Sandpack>
 
@@ -175,7 +175,7 @@ body {
 
 </Sandpack>
 
-이 데모는 인위적인 지연으로 로드됩니다. 다음에 체크박스를 선택 해제하고 다시 선택하면 `Preview`가 캐시 되어 로딩 상태가 되지 않습니다. 로딩 상태를 다시 보려면 샌드박스에서 "Reset"을 클릭하세요.
+이 데모는 인위적인 지연으로 로딩됩니다. 다음에 체크박스를 선택 해제하고 다시 선택하면 `Preview`가 캐시 되어 로딩 상태가 되지 않습니다. 로딩 상태를 다시 보려면 샌드박스에서 "Reset"을 클릭하세요.
 
 [Suspense를 사용하여 로딩 상태를 관리하는 방법에 대해 자세히 알아보세요.](/reference/react/Suspense)
 
@@ -202,7 +202,7 @@ function Editor() {
 ```js {3-4}
 import { lazy } from 'react';
 
-// ✅ 올바른 방법: lazy 컴포넌트를 컴포넌트 외부에 선언합니다.
+// ✅ 올바른 방법: `lazy` 컴포넌트를 컴포넌트 외부에 선언합니다.
 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 
 function Editor() {

From 63f46125d5b78065f9fd3ab7ef404135d3535658 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 12 Jan 2025 19:19:28 +0900
Subject: [PATCH 23/46] docs: update `memo.md`

---
 src/content/reference/react/memo.md | 76 ++++++++++++++---------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md
index e0437458a..d79d672ff 100644
--- a/src/content/reference/react/memo.md
+++ b/src/content/reference/react/memo.md
@@ -4,7 +4,7 @@ title: memo
 
 <Intro>
 
-`memo`를 사용하면 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있습니다.
+`memo`를 사용하면 컴포넌트의 Props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있습니다.
 
 ```
 const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
@@ -20,7 +20,7 @@ const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
 
 ### `memo(Component, arePropsEqual?)` {/*memo*/}
 
-컴포넌트를 `memo`로 감싸면 해당 컴포넌트의 *memoized* 버전을 얻을 수 있습니다. memoized 버전의 컴포넌트는 일반적으로 부모 컴포넌트가 리렌더링 되어도 props가 변경되지 않았다면 리렌더링 되지 않습니다. 그러나 memoization는 성능을 최적화하는 것이지 보장하지 않기 때문에 React는 여전히 리렌더링 될 수도 있습니다.
+컴포넌트를 `memo`로 감싸면 해당 컴포넌트의 메모된<sup>Memoized</sup> 버전을 얻을 수 있습니다. 메모된 버전의 컴포넌트는 일반적으로 부모 컴포넌트가 리렌더링 되어도 Props가 변경되지 않았다면 리렌더링되지 않습니다. 그러나 메모이제이션은 성능을 최적화하는 것이지, 보장하는 것은 아니기 때문에 React는 여전히 다시 렌더링될 수도 있습니다.
 
 ```js
 import { memo } from 'react';
@@ -30,27 +30,27 @@ const SomeComponent = memo(function SomeComponent(props) {
 });
 ```
 
-[아래에서 더 많은 예시를 확인하세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### 매개변수 {/*parameters*/}
 
-* `Component`: memoize 하려는 컴포넌트입니다. `memo`는 이 컴포넌트를 수정하지 않고 대신 새로운 memoized 컴포넌트를 반환합니다. 함수와 [`forwardRef`](/reference/react/forwardRef) 컴포넌트를 포함한 모든 유효한 React 컴포넌트가 허용됩니다.
+* `Component`: 메모<sup>Memoize</sup>하려는 컴포넌트입니다. `memo`는 이 컴포넌트를 수정하지 않고 대신 새로운 메모된 컴포넌트를 반환합니다. 함수와 [`forwardRef`](/reference/react/forwardRef) 컴포넌트를 포함한 모든 유효한 React 컴포넌트가 허용됩니다.
 
-* **optional** `arePropsEqual`: 컴포넌트의 이전 props와 새로운 props의 두 가지 인수를 받는 함수입니다. 이전 props와 새로운 props가 동일한 경우, 즉 컴포넌트가 이전 props와 동일한 결과를 렌더링하고 새로운 props에서도 이전 props와 동일한 방식으로 동작하는 경우 `true`를 반환해야 합니다. 그렇지 않으면 `false`를 반환해야 합니다. 일반적으로 이 함수를 지정하지 않습니다. React는 기본적으로 [`Object.is`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is)로 각 props를 비교합니다.
+* **optional** `arePropsEqual`: 컴포넌트의 이전 Props와 새로운 Props의 두 가지 인수를 받는 함수입니다. 이전 Props와 새로운 Props가 동일한 경우, 컴포넌트가 이전 Props와 동일한 결과를 렌더링하고 새로운 Props에서도 이전 Props와 동일한 방식으로 동작하는 경우 `true`를 반환해야 합니다. 그렇지 않으면 `false`를 반환해야 합니다. 일반적으로 이 함수를 지정하지 않습니다. React는 기본적으로 [`Object.is`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is)로 각 Props를 비교합니다.
 
 #### 반환값 {/*returns*/}
 
-`memo`는 새로운 React 컴포넌트를 반환합니다. `memo`에 제공한 컴포넌트와 동일하게 동작하지만, 부모가 리렌더링되더라도 props가 변경되지 않는 한 React는 이를 리렌더링하지 않습니다.
+`memo`는 새로운 React 컴포넌트를 반환합니다. `memo`에 제공한 컴포넌트와 동일하게 동작하지만, 부모가 리렌더링되더라도 Props가 변경되지 않는 한 React는 이를 리렌더링하지 않습니다.
 
 ---
 
 ## 사용법 {/*usage*/}
 
-### props가 변경되지 않았을 때 리렌더링 건너뛰기 {/*skipping-re-rendering-when-props-are-unchanged*/}
+### Props가 변경되지 않았을 때 리렌더링 건너뛰기 {/*skipping-re-rendering-when-props-are-unchanged*/}
 
-React는 일반적으로 부모가 리렌더링될 때마다 컴포넌트를 리렌더링합니다. `memo`를 사용하면, 새로운 props가 이전 props와 동일하다면 부모가 리렌더링될 때 새로운 props가 이전 props와 동일하면 리렌더링 되지 않는 컴포넌트를 만들 수 있습니다. 이러한 컴포넌트를 *memoized* 상태라고 합니다.
+React는 일반적으로 부모가 리렌더링될 때마다 컴포넌트를 리렌더링합니다. `memo`를 사용하면, 새로운 Props가 이전 Props와 같으면 부모 컴포넌트가 다시 렌더링되더라도 React가 해당 컴포넌트를 다시 렌더링하지 않도록 만들 수 있습니다. 이러한 컴포넌트를 메모된<sup>Memoized</sup> 상태라고 합니다.
 
-컴포넌트를 memoize 하려면 `memo`로 감싸고 기존 컴포넌트 대신에 반환된 값을 사용하세요.
+컴포넌트를 메모하려면 `memo`로 감싸고 기존 컴포넌트 대신에 반환된 값을 사용하세요.
 
 ```js
 const Greeting = memo(function Greeting({ name }) {
@@ -59,9 +59,9 @@ const Greeting = memo(function Greeting({ name }) {
 
 export default Greeting;
 ```
-React 컴포넌트는 항상 [순수한 렌더링 로직](/learn/keeping-components-pure)을 가져야 합니다. 이는 props, state 그리고 context가 변경되지 않으면 항상 동일한 결과를 반환해야 함을 의미합니다. `memo`를 사용하면 컴포넌트가 이 요구 사항을 준수한다고 알리므로, props가 변경되지 않는 한 React는 리렌더링 될 필요가 없습니다. `memo`를 사용하더라도 컴포넌트의 state가 변경되거나 사용 중인 context가 변경되면 리렌더링 됩니다.
+React 컴포넌트는 항상 [순수한 렌더링 로직](/learn/keeping-components-pure)을 가져야 합니다. 이는 Props, State 그리고 Context가 변경되지 않으면 항상 동일한 결과를 반환해야 함을 의미합니다. `memo`를 사용하면 컴포넌트가 이 요구 사항을 준수한다고 알리므로, Props가 변경되지 않는 한 React는 리렌더링 될 필요가 없습니다. `memo`를 사용하더라도 컴포넌트의 State가 변경되거나 사용 중인 Context가 변경되면 리렌더링 됩니다.
 
-아래 예시에서 `Greeting` 컴포넌트는 `name`이 props 중 하나이기 때문에 `name`이 변경될 때마다 리렌더링 됩니다. 하지만 `address`는 `Greeting`의 props가 아니기 때문에 `address`가 변경될 때는 리렌더링 되지 않습니다.
+아래 예시에서 `Greeting` 컴포넌트는 `name`이 Props 중 하나이기 때문에 `name`이 변경될 때마다 리렌더링 됩니다. 하지만 `address`는 `Greeting`의 Props가 아니기 때문에 `address`가 변경될 때는 리렌더링되지 않습니다.
 
 <Sandpack>
 
@@ -109,31 +109,31 @@ label {
 
 <DeepDive>
 
-#### 모든 곳에 memo를 추가해야할까요? {/*should-you-add-memo-everywhere*/}
+#### 모든 곳에 `memo`를 추가해야할까요? {/*should-you-add-memo-everywhere*/}
 
-이 사이트와 같이 대부분의 상호작용이 투박한 앱의 경우(페이지 또는 전체 섹션 교체 등) 일반적으로 memoization는 불필요합니다. 반면 앱이 그림 편집기이고 도형 이동과 같이 대부분의 상호작용이 세분되어 있다면, memoization가 유용할 수 있습니다.
+이 사이트와 같이 대부분의 상호작용이 투박한 앱의 경우(페이지 또는 전체 섹션 교체 등) 일반적으로 메모이제이션은 불필요합니다. 반면 앱이 그림 편집기이고 도형 이동과 같은 대부분의 상호작용이 세분되어 있다면, 메모이제이션이 유용할 수 있습니다.
 
-`memo`로 최적화하는 것은 컴포넌트가 정확히 동일한 props로 자주 리렌더링 되고, 리렌더링 로직이 비용이 많이 드는 경우에만 유용합니다. 컴포넌트가 리렌더링 될 때 인지할 수 있을 만큼의 지연이 없다면 `memo`가 필요하지 않습니다. `memo`는 객체 또는 렌더링 중에 정의된 일반 함수처럼 *항상 다른* props가 컴포넌트에 전달되는 경우에 완전히 무용지물입니다. 따라서 `memo`와 함께 [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components)와 [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components)이 종종 필요합니다.
+`memo`로 최적화하는 것은 컴포넌트가 정확히 동일한 Props로 자주 리렌더링 되고, 리렌더링 로직이 비용이 많이 드는 경우에만 유용합니다. 컴포넌트가 리렌더링 될 때 인지할 수 있을 만큼의 지연이 없다면 `memo`가 필요하지 않습니다. `memo`는 객체 또는 렌더링 중에 정의된 일반 함수처럼 *항상 다른* Props가 컴포넌트에 전달되는 경우에 완전히 무용지물입니다. 따라서 `memo`와 함께 [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components)와 [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components)이 종종 필요합니다.
 
-그 외의 경우에는 컴포넌트를 `memo`로 감싸는 이점이 없습니다. 그렇다고 해서 크게 해가 되지 않기 때문에 일부 팀에서는 개별 사례에 대해 고려하지 않고 가능한 한 많이 memoize 하는 방식을 선택하기도 합니다. 이 접근 방식은 코드 가독성이 떨어진다는 단점이 있습니다. 또한 모든 memoization가 효과적이지는 않습니다. 항상 변경되는 값이 하나라도 있다면, 컴포넌트 전체의 memoization를 중단하기에 충분합니다.
+그 외의 경우에는 컴포넌트를 `memo`로 감싸는 이점이 없습니다. 그렇다고 해서 크게 해가 되지 않기 때문에 일부 팀에서는 개별 사례에 대해 고려하지 않고 가능한 한 많이 메모이제이션하는 방식을 선택하기도 합니다. 이 접근 방식은 코드 가독성이 떨어진다는 단점이 있습니다. 또한 모든 메모이제이션이 효과적이지는 않습니다. 항상 변경되는 값이 하나라도 있다면, 컴포넌트 전체의 메모이제이션을 중단하기에 충분합니다.
 
-**실제로 몇가지 원칙을 따르면 memoization가 불필요할 수 있습니다.**
+**실제로 몇가지 원칙을 따르면 메모이제이션이 불필요할 수 있습니다.**
 
-1. 컴포넌트가 다른 컴포넌트를 시각적으로 감쌀 때 [JSX를 자식으로 받아들이도록 하세요.](/learn/passing-props-to-a-component#passing-jsx-as-children) 이렇게 하면 래퍼 컴포넌트가 자신의 state를 업데이트할 때 React는 그 자식 컴포넌트가 리렌더링 될 필요가 없다는 것을 알 수 있습니다.
-2. 지역 state를 선호하고 필요 이상으로 [state를 끌어올리기](/learn/sharing-state-between-components)를 하지 마세요. 예를 들어, 최상위 트리나 전역 state 라이브러리에 폼이나 아이템이 호버되었는지와 같은 일시적인 state를 두지 마세요.
-3. [렌더링 로직을 순수하게](/learn/keeping-components-pure) 유지하세요. 컴포넌트를 렌더링했을 때 문제가 발생하거나 눈에 띄는 시각적 아티팩트가 생성된다면 컴포넌트에 버그가 있는 것입니다! memoization 하는 대신 버그를 수정하세요.
-4. [state를 업데이트하는 불필요한 Effect](/learn/you-might-not-need-an-effect)를 피하세요. React 앱에서 대부분의 성능 문제는 컴포넌트를 반복해서 렌더링하게 만드는 Effect에서 발생하는 일련의 업데이트로 인해 발생합니다.
-5. [Effect에서 불필요한 의존성을 제거](/learn/removing-effect-dependencies)하세요. 예를 들어, memoization 대신에 일부 객체나 함수를 Effect 내부나 컴포넌트 외부로 이동하는 것이 더 간단할 때가 많습니다.
+1. 컴포넌트가 다른 컴포넌트를 시각적으로 감쌀 때 [JSX를 자식으로 받아들이도록 하세요.](/learn/passing-props-to-a-component#passing-jsx-as-children) 이렇게 하면 래퍼 컴포넌트가 자신의 State를 업데이트할 때 React는 그 자식 컴포넌트가 리렌더링 될 필요가 없다는 것을 알 수 있습니다.
+2. 지역 State를 선호하고 필요 이상으로 [State 끌어올리기](/learn/sharing-state-between-components)를 하지 마세요. 예를 들어, 최상위 트리나 전역 State 라이브러리에 폼이나 아이템이 호버<sup>Hover</sup>되었는지와 같은 일시적인 State를 두지 마세요.
+3. [렌더링 로직을 순수하게](/learn/keeping-components-pure) 유지하세요. 컴포넌트를 렌더링했을 때 문제가 발생하거나 눈에 띄는 시각적 아티팩트가 생성된다면 컴포넌트에 버그가 있는 것입니다! 메모이제이션하는 대신 버그를 수정하세요.
+4. [State를 업데이트하는 불필요한 Effect](/learn/you-might-not-need-an-effect)를 피하세요. React 앱에서 대부분의 성능 문제는 컴포넌트를 반복해서 렌더링하게 만드는 Effect에서 발생하는 일련의 업데이트로 인해 발생합니다.
+5. [Effect에서 불필요한 의존성을 제거](/learn/removing-effect-dependencies)하세요. 예를 들어, 메모이제이션 대신에 일부 객체나 함수를 Effect 내부나 컴포넌트 외부로 이동하는 것이 더 간단할 때가 많습니다.
 
-특정 상호작용이 여전히 느리게 느껴진다면 [React 개발자 도구 profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)를 사용해 어떤 컴포넌트가 memoization를 통해 가장 큰 이점을 얻을 수 있는지 확인하고 필요한 경우에 memoization 하세요. 이러한 원칙은 컴포넌트를 더 쉽게 디버깅하고 이해할 수 있게 해주므로 어떤 경우든 이 원칙을 따르는 것이 좋습니다. 장기적으로는 이 문제를 완전히 해결하기 위해 [세분된 memoization를 자동으로 수행하는 방법](https://www.youtube.com/watch?v=lGEMwh32soc)을 연구하고 있습니다.
+특정 상호작용이 여전히 느리게 느껴진다면 [React 개발자 도구 Profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)를 사용해 어떤 컴포넌트가 메모이제이션을 통해 가장 큰 이점을 얻을 수 있는지 확인하고 필요한 경우에 메모이제이션하세요. 이러한 원칙은 컴포넌트를 더 쉽게 디버깅하고 이해할 수 있게 해주므로 어떤 경우든 이 원칙을 따르는 것이 좋습니다. 장기적으로는 이 문제를 완전히 해결하기 위해 [세분된 메모이제이션을 자동으로 수행하는 방법](https://www.youtube.com/watch?v=lGEMwh32soc)을 연구하고 있습니다.
 
 </DeepDive>
 
 ---
 
-### state를 사용하여 memoization 된 컴포넌트 업데이트하기 {/*updating-a-memoized-component-using-state*/}
+### State를 사용해 메모이제이션된 컴포넌트 업데이트하기 {/*updating-a-memoized-component-using-state*/}
 
-컴포넌트가 memoization 된 경우에도, 컴포넌트의 state가 변경되면 리렌더링 됩니다. 메모화는 부모에서 컴포넌트로 전달되는 props에만 적용됩니다.
+컴포넌트가 메모이제이션된 경우에도, 컴포넌트의 State가 변경되면 리렌더링됩니다. 메모이제이션은 부모에서 컴포넌트로 전달되는 Props에만 적용됩니다.
 
 <Sandpack>
 
@@ -202,13 +202,13 @@ label {
 
 </Sandpack>
 
-state 변수를 현재 값으로 설정하면 React는 `memo` 없이도 컴포넌트 리렌더링을 건너뜁니다. 컴포넌트가 한 번 더 호출될 수 있지만, 결과는 무시됩니다.
+State 변수를 현재 값으로 설정하면 React는 `memo` 없이도 컴포넌트 리렌더링을 건너뜁니다. 컴포넌트가 한 번 더 호출될 수 있지만, 결과는 무시됩니다.
 
 ---
 
-### context를 사용하여 메모화된 컴포넌트 업데이트하기 {/*updating-a-memoized-component-using-a-context*/}
+### Context를 사용하여 메모화된 컴포넌트 업데이트하기 {/*updating-a-memoized-component-using-a-context*/}
 
-컴포넌트가 메모화 되었더라도, 사용 중인 context가 변경될 때 이 컴포넌트는 리렌더링 됩니다. 메모화는 부모로부터 전달되는 props에만 적용됩니다.
+컴포넌트가 메모되었더라도, 사용 중인 Context가 변경될 때 컴포넌트는 리렌더링됩니다. 메모는 부모로부터 전달되는 Props에만 적용됩니다.
 
 <Sandpack>
 
@@ -262,16 +262,16 @@ label {
 
 </Sandpack>
 
-일부 context의 _일정 부분_ 이 변경될 때만 컴포넌트가 리렌더링 되도록 하려면 컴포넌트를 두 개로 나눠야 합니다. 외부 컴포넌트의 context에서 필요한 내용을 읽고, 메모화된 자식에게 prop으로 전달하세요.
+일부 Context의 <em>일정 부분</em>이 변경될 때만 컴포넌트가 리렌더링되도록 하려면 컴포넌트를 두 개로 나눠야 합니다. 외부 컴포넌트의 Context에서 필요한 내용을 읽고, 메모화된 자식에게 Prop으로 전달하세요.
 
 ---
 
-### props 변경 최소화하기 {/*minimizing-props-changes*/}
+### Props 변경 최소화하기 {/*minimizing-props-changes*/}
 
-`memo`를 사용할 때 어떤 prop든 이전의 prop과 *얕은 비교 결과*가 같지 않을 때마다 컴포넌트가 리렌더링 됩니다. 즉 React는 [`Object.is`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교를 사용하여 컴포넌트의 모든 prop을 이전 값과 비교합니다. `Object.is(3, 3)`는 `true`이지만 `Object.is({}, {})`는 `false`입니다.
+`memo`를 사용할 때 어떤 Prop든 이전의 Prop과 *얕은 비교 결과*가 같지 않을 때마다 컴포넌트가 리렌더링 됩니다. 즉 React는 [`Object.is`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교를 사용하여 컴포넌트의 모든 Prop을 이전 값과 비교합니다. `Object.is(3, 3)`는 `true`이지만 `Object.is({}, {})`는 `false`입니다.
 
 
-`memo`를 최대한 활용하려면, props가 변경되는 횟수를 최소화해야 합니다. 예를 들어 prop이 객체인 경우, [`useMemo`:](/reference/react/useMemo)를 사용하여 부모 컴포넌트가 해당 객체를 매번 다시 만드는 것을 방지하세요.
+`memo`를 최대한 활용하려면, Props가 변경되는 횟수를 최소화해야 합니다. 예를 들어 Prop이 객체인 경우, [`useMemo`](/reference/react/useMemo)를 사용하여 부모 컴포넌트가 해당 객체를 매번 다시 만드는 것을 방지하세요.
 
 ```js {5-8}
 function Page() {
@@ -291,7 +291,7 @@ const Profile = memo(function Profile({ person }) {
 });
 ```
 
-props의 변경을 최소화하는 더 좋은 방법은 컴포넌트가 props에 필요한 최소한의 정보만 받도록 하는 것입니다. 예를 들어, 전체 객체 대신 개별 값을 받을 수 있습니다.
+Props의 변경을 최소화하는 더 좋은 방법은 컴포넌트가 Props에 필요한 최소한의 정보만 받도록 하는 것입니다. 예를 들어, 전체 객체 대신 개별 값을 받을 수 있습니다.
 
 ```js {4,7}
 function Page() {
@@ -305,7 +305,7 @@ const Profile = memo(function Profile({ name, age }) {
 });
 ```
 
-때로는 개별 값도 자주 변경되지 않는 값으로 사용될 수 있습니다. 예를 들어 다음 컴포넌트는 값 자체가 아니라 값의 존재를 나타내는 불리언 값을 받습니다.
+때로는 개별 값도 자주 변경되지 않는 값으로 사용할 수 있습니다. 예를 들어 다음 컴포넌트는 값 자체가 아니라 값의 존재를 나타내는 불리언 값을 받습니다.
 
 ```js {3}
 function GroupsLanding({ person }) {
@@ -317,13 +317,13 @@ const CallToAction = memo(function CallToAction({ hasGroups }) {
   // ...
 });
 ```
-메모화된 컴포넌트에 함수를 전달해야 하는 경우, 컴포넌트 외부에 함수를 선언하여 변경되지 않도록 하거나, [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components)을 사용하여 리렌더링 사이에 함수의 선언을 캐시 합니다.
+메모화된 컴포넌트에 함수를 전달해야 하는 경우, 컴포넌트 외부에 함수를 선언하여 변경되지 않도록 하거나, [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components)을 사용하여 리렌더링 사이에 함수의 선언을 캐시합니다.
 
 ---
 
 ### 사용자 정의 비교 함수 지정하기 {/*specifying-a-custom-comparison-function*/}
 
-드물지만 메모화된 컴포넌트의 props 변경을 최소화하는 것이 불가능할 수 있습니다. 이 경우 사용자 정의 비교 함수를 제공하여 React가 얕은 비교를 사용하는 대신에 이전 props와 새로운 props를 비교할 수 있습니다. 이 함수는 `memo`의 두 번째 인수로 전달됩니다. 새로운 props가 이전 props와 동일한 결과를 생성하는 경우에만 `true`를 반환해야 합니다. 그렇지 않으면 `false`를 반환해야 합니다.
+드물지만 메모화된 컴포넌트의 Props 변경을 최소화하는 것이 불가능할 수 있습니다. 이 경우 사용자 정의 비교 함수를 제공하여 React가 얕은 비교를 사용하는 대신에 이전 Props와 새로운 Props를 비교할 수 있습니다. 이 함수는 `memo`의 두 번째 인수로 전달됩니다. 새로운 Props가 이전 Props와 동일한 결과를 생성하는 경우에만 `true`를 반환해야 합니다. 그렇지 않으면 `false`를 반환해야 합니다.
 
 ```js {3}
 const Chart = memo(function Chart({ dataPoints }) {
@@ -347,7 +347,7 @@ function arePropsEqual(oldProps, newProps) {
 
 <Pitfall>
 
-`arePropsEqual`를 구현하는 경우 **함수를 포함하여 모든 prop를 비교해야 합니다.** 함수는 종종 부모 컴포넌트의 props와 state를 [클로저로 다룹니다](https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures). `oldProps.onClick !== newProps.onClick`일 때 `true`를 반환하면 컴포넌트가 `onClick` 핸들러 내에서 이전 렌더링의 props와 state를 계속 "인식"하여 매우 혼란스러운 버그가 발생할 수 있습니다.
+`arePropsEqual`를 구현하는 경우 **함수를 포함하여 모든 Prop를 비교해야 합니다.** 함수는 종종 부모 컴포넌트의 Props와 State를 [클로저<sup>Closure</sup>로 다룹니다](https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures). `oldProps.onClick !== newProps.onClick`일 때 `true`를 반환하면 컴포넌트가 `onClick` 핸들러 내에서 이전 렌더링의 Props와 State를 계속 "인식"하여 매우 혼란스러운 버그가 발생할 수 있습니다.
 
 작업 중인 데이터 구조가 알려진 제한된 깊이를 가지고 있다고 100% 확신하지 않는 한, `arePropsEqual` 내에서 깊은 비교를 수행하지 마세요. **깊은 비교는 매우 느려질 수 있으며** 나중에 누군가 데이터 구조를 변경하면 앱이 잠깐 정지될 수 있습니다.
 
@@ -356,6 +356,6 @@ function arePropsEqual(oldProps, newProps) {
 ---
 
 ## 문제 해결 {/*troubleshooting*/}
-### prop가 객체, 배열 또는 함수인 경우 컴포넌트가 리렌더링됩니다. {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
+### Prop가 객체, 배열 또는 함수인 경우 컴포넌트가 리렌더링됩니다. {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/}
 
-React는 얕은 비교를 기준으로 이전 props와 새로운 props를 비교합니다. 즉, 각각의 새로운 prop가 이전 prop와 참조가 동일한지 여부를 고려합니다. 부모가 리렌더링 될 때마다 새로운 객체나 배열을 생성하면, 개별 요소들이 모두 동일하더라도 React는 여전히 변경된 것으로 간주합니다. 마찬가지로 부모 컴포넌트를 렌더링할 때 새로운 함수를 만들면 React는 함수의 정의가 동일하더라도 변경된 것으로 간주합니다. 이를 방지하려면 [부모 컴포넌트에서 props를 단순화하거나 메모화 하세요.](#minimizing-props-changes)
+React는 얕은 비교를 기준으로 이전 Props와 새로운 Props를 비교합니다. 즉, 각각의 새로운 Prop가 이전 Prop와 참조가 동일한지 여부를 고려합니다. 부모가 리렌더링 될 때마다 새로운 객체나 배열을 생성하면, 개별 요소들이 모두 동일하더라도 React는 여전히 변경된 것으로 간주합니다. 마찬가지로 부모 컴포넌트를 렌더링할 때 새로운 함수를 만들면 React는 함수의 정의가 동일하더라도 변경된 것으로 간주합니다. 이를 방지하려면 [부모 컴포넌트에서 Props를 단순화하거나 메모화 하세요.](#minimizing-props-changes)

From 892331fdb574d53126aeb9ef3d83ac5a0fa857ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Sun, 12 Jan 2025 19:31:17 +0900
Subject: [PATCH 24/46] docs: update `startTransition.md`

---
 .../reference/react/startTransition.md        | 30 +++++++------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md
index b59d07fa3..3d396660b 100644
--- a/src/content/reference/react/startTransition.md
+++ b/src/content/reference/react/startTransition.md
@@ -4,9 +4,7 @@ title: startTransition
 
 <Intro>
 
-`startTransition`은 UI를 Blocking 않고 상태를 업데이트할 수 있게 해줍니다.
-
-`startTransition` lets you render a part of the UI in the background. {/*TODO*/}
+`startTransition`을 사용하면 UI의 일부를 백그라운드에서 렌더링할 수 있습니다.
 
 ```js
 startTransition(action)
@@ -22,7 +20,7 @@ startTransition(action)
 
 ### `startTransition(action)` {/*starttransition*/}
 
-`startTransition` 함수는 상태 업데이트를 Transition 으로 표시할 수 있게 해줍니다.
+`startTransition` 함수는 State 업데이트를 Transition으로 표시할 수 있게 해줍니다.
 
 ```js {7,9}
 import { startTransition } from 'react';
@@ -39,13 +37,11 @@ function TabContainer() {
 }
 ```
 
-[See more examples below.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### 매개변수 {/*parameters*/}
 
-* `scope`: 하나 이상의 [`set` 함수](/reference/react/useState#setstate)를 호출하여 일부 state를 업데이트하는 함수입니다. React는 매개변수 없이 `scope`를 즉시 호출하고 `scope` 함수를 호출하는 동안 동기적으로 예약된 모든 state 업데이트를 Transition 으로 표시합니다. 이는 [non-blocking](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition)이며 [원치 않는 로딩을 표시하지 않습니다.](/reference/react/useTransition#preventing-unwanted-loading-indicators)
-
-* `action`: A function that updates some state by calling one or more [`set` functions](/reference/react/useState#setstate). React calls `action` immediately with no parameters and marks all state updates scheduled synchronously during the `action` function call as Transitions. Any async calls awaited in the `action` will be included in the transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators). {/*TODO*/}
+* `action`: 하나 이상의 [`set` 함수](/reference/react/useState#setstate)를 호출하여 일부 State를 업데이트하는 함수입니다. React는 매개변수 없이 `action`을 즉시 호출하고 `action` 함수를 호출하는 동안 동기적으로 예약된 모든 State 업데이트를 Transition으로 표시합니다. Any async calls awaited in the `action` will be included in the transition, but currently require wrapping any `set` functions after the `await` in an additional `startTransition` (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)). State updates marked as Transitions will be [non-blocking](#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators](/reference/react/useTransition#preventing-unwanted-loading-indicators).
 
 #### 반환값 {/*returns*/}
 
@@ -53,31 +49,27 @@ function TabContainer() {
 
 #### 주의 사항 {/*caveats*/}
 
-* `startTransition`은 Transition 이 진행 중인지 추적할 수 있는 방법을 제공하지 않습니다. 진행 중인 Transition 을 표시하려면 [`useTransition`](/reference/react/useTransition)이 필요합니다.
+* `startTransition`은 Transition이 대기<sup>Pending</sup> 중인지 추적할 수 있는 방법을 제공하지 않습니다. 대기 중인 Transition을 표시하려면 [`useTransition`](/reference/react/useTransition)이 필요합니다.
 
-* 해당 state의 `set` 함수에 접근할 수 있는 경우에만 업데이트를 Transition 으로 래핑할 수 있습니다. 일부 props 이나 custom Hook 반환 값에 대한 응답으로 Transition 을 시작하려면 [`useDeferredValue`](/reference/react/useDeferredValue)를 대신 사용하세요.
-
-* `startTransition` 에 전달하는 함수는 동기식이어야 합니다. React는 이 함수를 즉시 실행하여 실행하는 동안 발생하는 모든 state 업데이트를 Transition 으로 표시합니다. 나중에 더 많은 state 업데이트를 수행하려고 하면(예시: timeout), Transition 으로 표시되지 않습니다.
+* 해당 State의 `set` 함수에 접근할 수 있는 경우에만 업데이트를 Transition으로 래핑할 수 있습니다. 일부 Props나 Custom Hook 반환 값에 대한 응답으로 Transition을 시작하려면 [`useDeferredValue`](/reference/react/useDeferredValue)를 대신 사용하세요.
 
 * The function you pass to `startTransition` is called immediately, marking all state updates that happen while it executes as Transitions. If you try to perform state updates in a `setTimeout`, for example, they won't be marked as Transitions. {/*TODO*/}
 
 * You must wrap any state updates after any async requests in another `startTransition` to mark them as Transitions. This is a known limitation that we will fix in the future (see [Troubleshooting](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition)).
 
-* Transition 으로 표시된 state 업데이트는 다른 state 업데이트에 의해 중단됩니다. 예를 들어, Transition 내에서 차트 컴포넌트를 업데이트하지만 차트가 다시 렌더링되는 동안 입력을 시작하면 React는 입력 state 업데이트를 처리한 후 차트 컴포넌트에서 렌더링 작업을 다시 시작합니다.
+* Transition으로 표시된 State 업데이트는 다른 State 업데이트에 의해 중단됩니다. 예를 들어, Transition 내에서 차트 컴포넌트를 업데이트하지만 차트가 다시 렌더링되는 동안 입력을 시작하면 React는 입력 State 업데이트를 처리한 후 차트 컴포넌트에서 렌더링 작업을 다시 시작합니다.
 
 * Transition 업데이트는 텍스트 입력을 제어하는 데 사용할 수 없습니다.
 
-* 만약 진행 중인 Transition 이 여러 개 있는 경우, React에서는 함께 일괄 처리 합니다. 이는 향후 릴리즈에서 제거될 가능성이 높은 제한 사항입니다.
-
-* If there are multiple ongoing Transitions, React currently batches them together. This is a limitation that may be removed in a future release. {/*TODO*/}
+* 만약 진행 중인 Transition이 여러 개 있는 경우, React에서는 함께 일괄 처리 합니다. 이는 향후 릴리즈에서 제거될 가능성이 높은 제한 사항입니다.
 
 ---
 
 ## 사용법 {/*usage*/}
 
-### state 업데이트를 non-blocking Transition 으로 표시 {/*marking-a-state-update-as-a-non-blocking-transition*/}
+### State 업데이트를 Non-Blocking Transition으로 표시 {/*marking-a-state-update-as-a-non-blocking-transition*/}
 
-`startTransition`으로 래핑함으로써 state 업데이트를 *Transition*으로 표시할 수 있습니다.
+`startTransition`으로 래핑함으로써 State 업데이트를 *Transition*으로 표시할 수 있습니다.
 
 ```js {7,9}
 import { startTransition } from 'react';
@@ -100,7 +92,7 @@ Transition을 사용하면 UI가 리렌더링 도중에도 반응성을 유지
 
 <Note>
 
-`startTransition`은 [`useTransition`](/reference/react/useTransition)과 매우 유사하지만, Transition 이 진행 중인지 추적하는 `isPending` 플래그를 제공하지 않습니다. `useTransition`을 사용할 수 없을 때 `startTransition`을 호출할 수 있습니다. 예를 들어, `startTransition`은 데이터 라이브러리에서와 같이 컴포넌트 외부에서 작동합니다.
+`startTransition`은 [`useTransition`](/reference/react/useTransition)과 매우 유사하지만, Transition이 대기 중인지 추적하는 `isPending` 플래그를 제공하지 않습니다. `useTransition`을 사용할 수 없을 때 `startTransition`을 호출할 수 있습니다. 예를 들어, `startTransition`은 데이터 라이브러리에서와 같이 컴포넌트 외부에서 작동합니다.
 
 [Transition에 대한 학습 및 예시는 `useTransition` 페이지에서 확인하세요.](/reference/react/useTransition)
 

From eadf04c3e3f9192a07c4ef5a5af1dc588d2bfd3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 13 Jan 2025 12:12:05 +0900
Subject: [PATCH 25/46] ci: format `discord_notify.yml` to add a new line

---
 .github/workflows/discord_notify.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml
index ff2caa1bf..c8dc662c2 100644
--- a/.github/workflows/discord_notify.yml
+++ b/.github/workflows/discord_notify.yml
@@ -2,7 +2,7 @@ name: Discord Notify
 
 on:
   pull_request_target:
-    types: [ labeled ]
+    types: [labeled]
 
 jobs:
   notify:
@@ -18,4 +18,4 @@ jobs:
           embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }}
           embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}'
           embed-description: ${{ github.event.pull_request.body }}
-          embed-url: ${{ github.event.pull_request.html_url }}
\ No newline at end of file
+          embed-url: ${{ github.event.pull_request.html_url }}

From ac92b972c957088de4a2382a8330f2bf29b2a7a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 13 Jan 2025 20:01:19 +0900
Subject: [PATCH 26/46] docs: update `useContext.md`

---
 src/content/reference/react/useContext.md | 98 +++++++++++------------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
index f930e223d..987132fc3 100644
--- a/src/content/reference/react/useContext.md
+++ b/src/content/reference/react/useContext.md
@@ -4,7 +4,7 @@ title: useContext
 
 <Intro>
 
-`useContext` 는 컴포넌트에서 [context](/learn/passing-data-deeply-with-context)를 읽고 구독할 수 있는 React Hook입니다.
+`useContext`는 컴포넌트에서 [Context](/learn/passing-data-deeply-with-context)를 읽고 구독할 수 있는 React Hook입니다.
 
 ```js
 const value = useContext(SomeContext)
@@ -20,7 +20,7 @@ const value = useContext(SomeContext)
 
 ### `useContext(SomeContext)` {/*usecontext*/}
 
-`useContext` 를 컴포넌트의 최상위 수준에서 호출하여 [context](/learn/passing-data-deeply-with-context)를 읽고 구독합니다.
+`useContext`를 컴포넌트의 최상위 수준에서 호출하여 [Context](/learn/passing-data-deeply-with-context)를 읽고 구독합니다.
 
 ```js
 import { useContext } from 'react';
@@ -30,21 +30,21 @@ function MyComponent() {
   // ...
 ```
 
-[아래에서 더 많은 예시를 확인해보세요.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### 매개변수 {/*parameters*/}
 
-* `SomeContext`: [`createContext`](/reference/react/createContext) 로 생성한 context입니다. context 자체는 정보를 담고 있지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타냅니다.
+* `SomeContext`: [`createContext`](/reference/react/createContext)로 생성한 Context입니다. Context 자체는 정보를 담고 있지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타냅니다.
 
 #### 반환값 {/*returns*/}
 
-`useContext` 는 호출하는 컴포넌트에 대한 context 값을 반환합니다. 이 값은 트리에서 호출하는 컴포넌트 위의 가장 가까운 `SomeContext.Provider` 에 전달된 value로 결정됩니다. provider가 없으면 반환된 값은 해당 컨텍스트에 대해 [`createContext`](/reference/react/createContext) 에 전달한 `defaultValue` 가 됩니다. 반환된 값은 항상 최신 상태입니다. 컨텍스트가 변경되면 React는 자동으로 해당 context 를 읽는 컴포넌트를 다시 렌더링합니다.
+`useContext`는 호출하는 컴포넌트에 대한 Context 값을 반환합니다. 이 값은 트리에서 호출하는 컴포넌트 상위의 가장 가까운 `SomeContext.Provider`에 전달된 값으로 결정됩니다. Provider가 없으면 반환된 값은 해당 Context에 대해 [`createContext`](/reference/react/createContext)에 전달한 `defaultValue`가 됩니다. 반환된 값은 항상 최신 상태입니다. Context가 변경되면 React는 자동으로 해당 Context를 읽는 컴포넌트를 다시 렌더링합니다.
 
 #### 주의 사항 {/*caveats*/}
 
-* 컴포넌트 내의 `useContext()` 호출은 **동일한** 컴포넌트에서 반환된 provider에 영향을 받지 않습니다. 해당하는 `<Context.Provider>` 는 `useContext()` 호출을 하는 컴포넌트 ***위에* 배치되어야 합니다.**
-* React는 다른 `value`을 받는 provider로부터 시작해서 특정 context를 사용하는 모든 자식들을 **자동으로 리렌더링**합니다. 이전 값과 다음 값은 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교를 통해 비교됩니다. [`memo`](/reference/react/memo)로 리렌더링을 건너뛰어도 자식들이 새로운 context 값을 받는 것을 막지는 못합니다.
-* 빌드 시스템이 결과물에 중복 모듈을 생성하는 경우(심볼릭 링크에서 발생할 수 있음) context가 손상될 수 있습니다.  context를 통해 무언가를 전달하는 것은 `===` 비교에 의해 결정되는 것처럼 컨텍스트를 제공하는 데 사용하는 `SomeContext`와 context를 읽는 데 사용하는 `SomeContext`가 ***정확하게* 동일한 객체**인 경우에만 작동합니다.
+* 컴포넌트 내의 `useContext()` 호출은 **동일한** 컴포넌트에서 반환된 Provider에 영향을 받지 않습니다. 해당하는 `<Context.Provider>`는 `useContext()` 호출을 하는 컴포넌트 ***상위에* 배치되어야 합니다.**
+* React는 다른 `value`을 받는 Provider로부터 시작해서 특정 Context를 사용하는 모든 자식들을 **자동으로 리렌더링**합니다. 이전 값과 다음 값은 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)를 통해 비교합니다. [`memo`](/reference/react/memo)로 리렌더링을 건너뛰어도 자식들이 새로운 Context 값을 받는 것을 막지는 못합니다.
+* 빌드 시스템이 결과물에 중복 모듈을 생성하는 경우(심볼릭 링크에서 발생할 수 있음) Context가 손상될 수 있습니다. Context를 통해 무언가를 전달하는 것은 `===` 비교에 의해 결정되는 것처럼 Context를 제공하는 데 사용하는 `SomeContext`와 Context를 읽는 데 사용하는 `SomeContext`가 ***정확하게* 동일한 객체**인 경우에만 작동합니다.
 
 ---
 
@@ -53,7 +53,7 @@ function MyComponent() {
 
 ### 트리의 깊은 곳에 데이터 전달하기 {/*passing-data-deeply-into-the-tree*/}
 
-컴포넌트의 최상위 수준에서 `useContext`를 호출하여 [context](/learn/passing-data-deeply-with-context)를 읽고 구독합니다.
+컴포넌트의 최상위 수준에서 `useContext`를 호출하여 [Context](/learn/passing-data-deeply-with-context)를 읽고 구독합니다.
 
 ```js [[2, 4, "theme"], [1, 4, "ThemeContext"]]
 import { useContext } from 'react';
@@ -63,9 +63,9 @@ function Button() {
   // ...
 ```
 
-`useContext`는 전달한 <CodeStep step={1}>context</CodeStep> 에 대한 <CodeStep step={2}>context value </CodeStep>를 반환합니다. context 값을 결정하기 위해 React는 컴포넌트 트리를 검색하고 특정 context에 대해 **상위에서 가장 가까운 context provider**를 찾습니다.
+`useContext`는 전달한 <CodeStep step={1}>Context</CodeStep>에 대한 <CodeStep step={2}>Context Value</CodeStep>를 반환합니다. Context 값을 결정하기 위해 React는 컴포넌트 트리를 탐색하고 특정 Context에 대해 **상위에서 가장 가까운 Context Provider**를 찾습니다.
 
-context를 `Button`에 전달하려면 해당 버튼 또는 상위 컴포넌트 중 하나를 해당 context provider로 감쌉니다:
+Context를 `Button`에 전달하려면 해당 버튼 또는 상위 컴포넌트 중 하나를 해당 Context Provider로 감쌉니다.
 
 ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]]
 function MyPage() {
@@ -81,11 +81,11 @@ function Form() {
 }
 ```
 
-provider와 `Button`사이에 얼마나 많은 컴포넌트 레이어가 있는지는 중요하지 않습니다. `Form` 내부의 `Button` 이 *어디에서나* `useContext(ThemeContext)`를 호출하면,`"dark"`를 값으로 받습니다.
+Provider와 `Button`사이에 얼마나 많은 컴포넌트 레이어가 있는지는 중요하지 않습니다. `Form` 내부의 `Button`이 *어디에서나* `useContext(ThemeContext)`를 호출하면,`"dark"`를 값으로 받습니다.
 
 <Pitfall>
 
-`useContext()` 는 항상 호출하는 컴포넌트 *상위*에서 가장 가까운 provider를 찾습니다. 위쪽으로 찾고 `useContext()`를 호출하는 컴포넌트 안의 provider는 **고려하지 않습니다.**
+`useContext()`는 항상 호출하는 컴포넌트 *상위*에서 가장 가까운 Provider를 찾습니다. 위쪽 방향으로 찾고 `useContext()`를 호출하는 컴포넌트 안의 Provider는 **고려하지 않습니다.**
 
 </Pitfall>
 
@@ -177,7 +177,7 @@ function Button({ children }) {
 
 ### Context를 통해 전달된 데이터 업데이트하기 {/*updating-data-passed-via-context*/}
 
-가끔은 context가 시간이 지남에 따라 변경되기를 원할 것입니다. context를 업데이트 하려면 [state](/reference/react/useState)와 결합하십시오. 부모 컴포넌트에서 state변수를 선언하고 현재 state를<CodeStep step={2}>context value</CodeStep>로 provider에 전달합니다.
+때떄로 Context가 시간이 지남에 따라 변경되기를 원할 것입니다. Context를 업데이트 하려면 [State](/reference/react/useState)와 결합하세요. 부모 컴포넌트에서 State변수를 선언하고 현재 State를 <CodeStep step={2}>Context Value</CodeStep>로 Provider에 전달합니다.
 
 ```js {2} [[1, 4, "ThemeContext"], [2, 4, "theme"], [1, 11, "ThemeContext"]]
 function MyPage() {
@@ -195,13 +195,13 @@ function MyPage() {
 }
 ```
 
-이제 provider 내부의 모든 `Button`은 현재 `theme` 값을 받게 됩니다. provider에게 전달된 `theme`값을 업데이트 하기 위해 `setTheme`을 호출하면, 모든`Button` 컴포넌트가 새로운 `'light'` 값으로 리렌더링 됩니다.
+이제 Provider 내부의 모든 `Button`은 현재 `theme` 값을 받게 됩니다. Provider에 전달된 `theme` 값을 업데이트 하기 위해 `setTheme`을 호출하면, 모든 `Button` 컴포넌트가 새로운 `'light'` 값으로 다시 렌더링됩니다.
 
-<Recipes titleText="context 업데이트 예시" titleId="examples-basic">
+<Recipes titleText="Context 업데이트 예시" titleId="examples-basic">
 
 #### Context를 통해 값 업데이트 {/*updating-a-value-via-context*/}
 
-이 예시에서 `MyApp` 컴포넌트는 state 변수를 가지고 있고, 이 state 변수는 `ThemeContext` provider 로 전달됩니다. "Dark mode" 체크박스를 체크하면 state가 업데이트 됩니다. 제공된 값을 변경하면 해당 context를 사용하는 모든 컴포넌트가 리렌더링 됩니다.
+이 예시에서 `MyApp` 컴포넌트는 State 변수를 가지고 있고, 이 State 변수는 `ThemeContext` Provider로 전달됩니다. "Use dark mode" 체크박스를 체크하면 State가 업데이트 됩니다. 제공된 값을 변경하면 해당 Context를 사용하는 모든 컴포넌트가 다시 렌더링됩니다.
 
 <Sandpack>
 
@@ -299,13 +299,13 @@ function Button({ children }) {
 
 </Sandpack>
 
-`value="dark"`는 `"dark"` 문자열을 전달하지만, `value={theme}`는 [JSX 중괄호](/learn/javascript-in-jsx-with-curly-braces)를 사용하여 JavaScript `theme` 변수 값을 전달합니다. 중괄호를 사용하면 문자열이 아닌 context 값도 전달할 수 있습니다.
+`value="dark"`는 `"dark"` 문자열을 전달하지만, `value={theme}`는 [JSX 중괄호](/learn/javascript-in-jsx-with-curly-braces)를 사용하여 자바스크립트 `theme` 변수 값을 전달합니다. 중괄호를 사용하면 문자열이 아닌 Context 값도 전달할 수 있습니다.
 
 <Solution />
 
-#### context를 통해 object 업데이트 {/*updating-an-object-via-context*/}
+#### Context를 통해 객체 업데이트 {/*updating-an-object-via-context*/}
 
-이 예시에서는 object를 가지고 있는 `currentUser` 상태 변수가 있습니다. `{ currentUser, setCurrentUser }`를 하나의 객체로 결합하여 `value={}` 내부의 컨텍스트를 통해 전달합니다. 이렇게 하면 `LoginButton`과 같은 아래의 모든 컴포넌트가 `currentUser`와 `setCurrentUser`를 모두 읽은 다음 필요할 때 `setCurrentUser`를 호출할 수 있습니다.
+이 예시에서는 객체를 가지고 있는 `currentUser` State 변수가 있습니다. `{ currentUser, setCurrentUser }`를 하나의 객체로 결합하여 `value={}` 내부의 Context를 통해 전달합니다. 이렇게 하면 `LoginButton`과 같은 하위의 모든 컴포넌트가 `currentUser`와 `setCurrentUser`를 모두 읽은 다음 필요할 때 `setCurrentUser`를 호출할 수 있습니다.
 
 <Sandpack>
 
@@ -395,9 +395,9 @@ label {
 
 <Solution />
 
-#### 다양한 contexts {/*multiple-contexts*/}
+#### 다양한 Context {/*multiple-contexts*/}
 
-이 예시에서는 두 개의 독립적인 context가 있습니다. `ThemeContext`는 문자열인 현재 테마를 제공하고 `CurrentUserContext`는 현재 사용자를 나타내는 object를 보유합니다.
+이 예시에서는 두 개의 독립적인 Context가 있습니다. `ThemeContext`는 현재 테마를 문자열로 제공하고 `CurrentUserContext`는 현재 사용자를 나타내는 객체를 보유합니다.
 
 <Sandpack>
 
@@ -562,9 +562,9 @@ label {
 
 <Solution />
 
-#### 컴포넌트로 providers 분리 {/*extracting-providers-to-a-component*/}
+#### 컴포넌트로 Provider 분리 {/*extracting-providers-to-a-component*/}
 
-앱이 성장함에 따라 앱의 루트에 더 가까운 context의 "피라미드"를 갖게 될 것입니다. 이는 잘못된 것이 아닙니다. 하지만 중첩이 보기에 좋지 않다면 provider들을 단일 컴포넌트로 분리할 수 있습니다. 이 예시에서 `MyProviders`는 "context들"을 숨기고 필요한 provider들의 내부에 전달된 자식을 렌더링합니다. `theme` 및 `setTheme` 상태는 `MyApp` 자체에 필요하므로 `MyApp`이 여전히 해당 상태를 소유하고 있습니다.
+앱이 성장함에 따라 앱의 루트에 더 가까운 Context "피라미드"를 갖게 될 것입니다. 이는 잘못된 것이 아닙니다. 하지만 중첩이 보기에 좋지 않다면 Provider들을 단일 컴포넌트로 분리할 수 있습니다. 이 예시에서 `MyProviders`는 "Context"들을 숨기고 필요한 Provider들의 내부에 전달된 자식을 렌더링합니다. `theme` 및 `setTheme` State는 `MyApp` 자체에 필요하므로 `MyApp`이 여전히 해당 State를 소유하고 있습니다.
 
 <Sandpack>
 
@@ -737,9 +737,9 @@ label {
 
 <Solution />
 
-#### context 와 reducer를 통한 확장 {/*scaling-up-with-context-and-a-reducer*/}
+#### Context와 Reducer를 통한 확장 {/*scaling-up-with-context-and-a-reducer*/}
 
-규모가 큰 앱에서는 컨텍스트와 [reducer](/reference/react/useReducer)를 결합하여 컴포넌트에서 특정 상태와 관련된 로직을 분리하는 것이 일반적입니다. 이 예시에서는 모든 "wiring"이 reducer와 두 개의 개별 contexts가 포함된 `TasksContext.js`에 숨겨져 있습니다.
+규모가 큰 앱에서는 컨텍스트와 [Reducer](/reference/react/useReducer)를 결합하여 컴포넌트에서 특정 State와 관련된 로직을 분리하는 것이 일반적입니다. 이 예시에서는 모든 "Wiring"이 Reducer와 두 개의 개별 Context가 포함된 `TasksContext.js`에 숨겨져 있습니다.
 
 이 예시에 대한 [전체 안내](/learn/scaling-up-with-reducer-and-context)를 읽어보세요.
 
@@ -947,15 +947,15 @@ ul, li { margin: 0; padding: 0; }
 
 ---
 
-### fallback 기본값 지정 {/*specifying-a-fallback-default-value*/}
+### Fallback 기본값 지정 {/*specifying-a-fallback-default-value*/}
 
-React가 부모 트리에서 특정 <CodeStep step={1}>context</CodeStep> providers를 찾을 수 없는 경우, `useContext()`가 반환하는 context 값은 [해당 context를 생성할 때](/reference/react/createContext)지정한 기본값과 동일합니다.
+React가 부모 트리에서 특정 <CodeStep step={1}>Context</CodeStep> Provider를 찾을 수 없는 경우, `useContext()`가 반환하는 Context 값은 [해당 Context를 생성할 때](/reference/react/createContext) 지정한 기본값과 동일합니다.
 
 ```js [[1, 1, "ThemeContext"], [3, 1, "null"]]
 const ThemeContext = createContext(null);
 ```
 
-기본값은 **변경되지 않습니다**. context를 업데이트하려면 [위에서 설명한 대로](#updating-data-passed-via-context) 상태와 함께 사용하세요.
+기본값은 **변경되지 않습니다**. Context를 업데이트하려면 [위에서 설명한 대로](#updating-data-passed-via-context) State와 함께 사용하세요.
 
 예를 들어 `null` 대신에 기본값으로 사용할 수 있는 더 의미 있는 값이 있는 경우가 많습니다.
 
@@ -963,9 +963,9 @@ const ThemeContext = createContext(null);
 const ThemeContext = createContext('light');
 ```
 
-이렇게 하면 실수로 해당 provider 없이 일부 컴포넌트를 렌더링해도 깨지지 않습니다. 또한 테스트 환경에서 많은 provider를 설정하지 않고도 컴포넌트가 테스트 환경에서 잘 작동하는 데 도움이 됩니다.
+이렇게 하면 실수로 해당 Provider 없이 일부 컴포넌트를 렌더링해도 깨지지 않습니다. 또한 테스트 환경에서 많은 Provider를 설정하지 않고도 컴포넌트가 테스트 환경에서 잘 작동하는 데 도움이 됩니다.
 
-아래 예시에서 "Toggle theme" 버튼은 **테마 context provider의 외부** 에 있고 기본 컨텍스트 테마 값이 `'light'`이기 때문에 항상 밝게 표시되어 있습니다. 기본 테마를 `'dark'`로 변경해 보세요.
+아래 예시에서 "Toggle theme" 버튼은 **테마 Context Provider의 외부**에 있고 기본 컨텍스트 테마 값이 `'light'`이기 때문에 항상 밝게 표시되어 있습니다. 기본 테마를 `'dark'`로 변경해 보세요.
 
 <Sandpack>
 
@@ -1062,9 +1062,9 @@ function Button({ children, onClick }) {
 
 ---
 
-### 트리의 일부 context 오버라이드 하기 {/*overriding-context-for-a-part-of-the-tree*/}
+### 트리의 일부 Context 오버라이딩 하기 {/*overriding-context-for-a-part-of-the-tree*/}
 
-트리의 일부분을 다른 값의 provider로 감싸서 해당 부분에 대한 context를 오버라이드 할 수 있습니다.
+트리의 일부분을 다른 값의 Provider로 감싸서 해당 부분에 대한 Context를 오버라이딩 할 수 있습니다.
 
 ```js {3,5}
 <ThemeContext.Provider value="dark">
@@ -1076,13 +1076,13 @@ function Button({ children, onClick }) {
 </ThemeContext.Provider>
 ```
 
-필요한 만큼 provider를 중첩하고 오버라이드 할 수 있습니다.
+필요한 만큼 Provider를 중첩하고 오버라이딩 할 수 있습니다.
 
-<Recipes titleText="Examples of overriding context">
+<Recipes titleText="Context 오버라이딩 예시">
 
-#### theme 오버라이드 {/*overriding-a-theme*/}
+#### 테마 오버라이드 {/*overriding-a-theme*/}
 
-여기서 `Footer` *내부의* 버튼은 외부의 버튼(`"dark"`)과 다른 context 값(`"light"`)을 받습니다.
+여기서 `Footer` *내부의* 버튼은 외부의 버튼(`"dark"`)과 다른 Context 값(`"light"`)을 받습니다.
 
 <Sandpack>
 
@@ -1188,7 +1188,7 @@ footer {
 
 #### 자동으로 중첩된 제목 {/*automatically-nested-headings*/}
 
-context provider를 중첩할 때 정보를 "누적"할 수 있습니다. 이 예시에서 `Section` 컴포넌트는 섹션 중첩의 깊이를 지정하는 `LevelContext`를 추적합니다. 이 컴포넌트는 부모 섹션에서 `LevelContext`를 읽은 다음 1씩 증가한 `LevelContext` 숫자를 자식에게 제공합니다. 그 결과 `Heading`  컴포넌트는 얼마나 많은 `Section` 컴포넌트가 중첩되어 있는지에 따라 `<h1>`, `<h2>`, `<h3>`, ...,  태그 중 어떤 태그를 사용할지 자동으로 결정할 수 있습니다.
+Ccontext Provider를 중첩할 때 정보를 "누적"할 수 있습니다. 이 예시에서 `Section` 컴포넌트는 섹션 중첩의 깊이를 지정하는 `LevelContext`를 추적합니다. 이 컴포넌트는 부모 섹션에서 `LevelContext`를 읽은 다음 1씩 증가한 `LevelContext` 숫자를 자식에게 제공합니다. 그 결과 `Heading`  컴포넌트는 얼마나 많은 `Section` 컴포넌트가 중첩되어 있는지에 따라 `<h1>`, `<h2>`, `<h3>`, ...,  태그 중 어떤 태그를 사용할지 자동으로 결정할 수 있습니다.
 
 이 예시에 대한 [자세한 안내](/learn/passing-data-deeply-with-context)를 읽어보세요.
 
@@ -1290,7 +1290,7 @@ export const LevelContext = createContext(0);
 
 ### 객체와 함수를 전달할 때 리렌더링 최적화하기 {/*optimizing-re-renders-when-passing-objects-and-functions*/}
 
-context를 통해 객체와 함수를 포함한 모든 값을 전달할 수 있습니다.
+Context를 통해 객체와 함수를 포함한 모든 값을 전달할 수 있습니다.
 
 ```js [[2, 10, "{ currentUser, login }"]]
 function MyApp() {
@@ -1309,7 +1309,7 @@ function MyApp() {
 }
 ```
 
-여기서 <CodeStep step={2}>context value</CodeStep>은 두 개의 프로퍼티를 가진 자바스크립트 객체이며, 그 중 하나는 함수입니다. `MyApp`이 다시 렌더링할 때마다(예를 들어 경로 업데이트 시) *다른* 함수를 가리키는 *다른* 객체가 될 것이므로 React는 `useContext(AuthContext)`를 호출하는 트리 깊숙한 곳에 있는 모든 컴포넌트도 다시 렌더링해야 합니다.
+여기서 <CodeStep step={2}>Context Value</CodeStep>는 두 개의 프로퍼티를 가진 자바스크립트 객체이며, 그 중 하나는 함수입니다. `MyApp`이 다시 렌더링할 때마다(예를 들어 경로 업데이트 시) *다른* 함수를 가리키는 *다른* 객체가 될 것이므로 React는 `useContext(AuthContext)`를 호출하는 트리 깊숙한 곳에 있는 모든 컴포넌트도 다시 렌더링해야 합니다.
 
 작은 앱에서는 문제가 되지 않습니다. 그러나 `currentUser`와 같은 기본적인 데이터가 변경되지 않았다면 다시 렌더링할 필요가 없습니다. React가 이 사실을 활용할 수 있도록 `login` 함수를 [`useCallback`](/reference/react/useCallback)으로 감싸고 객체 생성을 [`useMemo`](/reference/react/useMemo)로 감싸면 됩니다. 이것이 성능 최적화입니다.
 
@@ -1339,22 +1339,22 @@ function MyApp() {
 
 이 변경으로 인해 `MyApp`이 다시 렌더링해야 하는 경우에도 `currentUser`가 변경되지 않는 한 `useContext(AuthContext)`를 호출하는 컴포넌트는 다시 렌더링할 필요가 없습니다.
 
-[`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) 와 [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) 에 대해 자세히 알아보세요.
+[`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components)와 [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components)에 대해 자세히 알아보세요.
 
 ---
 
 ## 문제 해결 {/*troubleshooting*/}
 
-### 컴포넌트에 provider 값이 보이지 않습니다. {/*my-component-doesnt-see-the-value-from-my-provider*/}
+### 컴포넌트가 Provider에서 값을 인식하지 못하고 있습니다. {/*my-component-doesnt-see-the-value-from-my-provider*/}
 
 이런 일이 발생하는 몇 가지 이유가 있습니다.
 
-1. `useContext()`를 호출하는 컴포넌트와 동일한 컴포넌트(또는 그 아래)에서 `<SomeContext.Provider>`를 렌더링하는 경우. `<SomeContext.Provider>`를 `useContext()`를 호출하는 컴포넌트의 *위와 바깥*으로 이동하세요.
+1. `useContext()`를 호출하는 컴포넌트와 동일한 컴포넌트(또는 그 아래)에서 `<SomeContext.Provider>`를 렌더링하는 경우, `<SomeContext.Provider>`를 `useContext()`를 호출하는 컴포넌트의 *위와 바깥*으로 이동하세요.
 2. 컴포넌트를 `<SomeContext.Provider>`로 감싸는 것을 잊었거나 생각했던 것과 다른 트리의 다른 부분에 배치했을 수 있습니다. [React 개발자 도구](/learn/react-developer-tools)를 사용하여 계층 구조가 올바른지 확인하세요.
-3. 제공하는 컴포넌트에서 보는 `someContext`와 읽는 컴포넌트에서 보는 `someContext`가 서로 다른 두 개의 객체가 되는 빌드 문제가 발생할 수 있습니다. 예를 들어 심볼릭 링크를 사용하는 경우 이런 문제가 발생할 수 있습니다. 이를 확인하려면 `window.SomeContext1`와 `window.SomeContext2`을 전역에 할당하고 콘솔에서 `window.SomeContext1 === window.SomeContext2`인지 확인하면 됩니다. 동일하지 않은 경우 빌드 도구 수준에서 해당 문제를 수정하세요.
-### 기본값이 다른데도 context가 `undefined`이 됩니다. {/*i-am-always-getting-undefined-from-my-context-although-the-default-value-is-different*/}
+3. 사용 중인 도구에서 발생하는 빌드 문제로 인해, 제공하는 컴포넌트에서의 `someContext`와 값을 읽는 컴포넌트에서의 `someContext`가 서로 다른 객체로 처리되는 문제가 발생할 수 있습니다. 예를 들어 심볼릭 링크를 사용하는 경우 이런 문제가 발생할 수 있습니다. 이를 확인하려면 `window.SomeContext1`과 `window.SomeContext2`를 전역에 할당하고 콘솔에서 `window.SomeContext1 === window.SomeContext2`인지 확인하면 됩니다. 동일하지 않은 경우 빌드 도구 수준에서 해당 문제를 수정하세요.
+### 기본값이 다른데도 Context가 `undefined`를 반환합니다. {/*i-am-always-getting-undefined-from-my-context-although-the-default-value-is-different*/}
 
-트리에 `value`가 없는 provider가 있을 수 있습니다.
+트리에 `value`가 없는 Provider가 있을 수 있습니다.
 
 ```js {1,2}
 // 🚩 Doesn't work: no value prop
@@ -1365,7 +1365,7 @@ function MyApp() {
 
 `value`를 지정하는 것을 잊어버린 경우, `value={undefined}`를 전달하는 것과 같습니다.
 
-실수로 다른 prop의 이름을 실수로 사용했을 수도 있습니다.
+실수로 다른 Prop의 이름을 실수로 사용했을 수도 있습니다.
 
 ```js {1,2}
 // 🚩 Doesn't work: prop should be called "value"
@@ -1374,7 +1374,7 @@ function MyApp() {
 </ThemeContext.Provider>
 ```
 
-두 가지 경우 모두 콘솔에 React에서 경고가 표시될 것입니다. 이를 수정하려면 prop `value`를 호출하세요.
+두 가지 경우 모두 콘솔에 React에서 경고가 표시될 것입니다. 이를 수정하려면 Prop `value`를 호출하세요.
 
 ```js {1,2}
 // ✅ Passing the value prop
@@ -1383,4 +1383,4 @@ function MyApp() {
 </ThemeContext.Provider>
 ```
 
-[`createContext(defaultValue)` 호출의 기본값](#specifying-a-fallback-default-value)은 **위에 일치하는 provider가 전혀 없는 경우**에만 사용된다는 점에 유의하세요. 부모 트리 어딘가에 `<SomeContext.Provider value={undefined}>` 컴포넌트가 있는 경우, `useContext(SomeContext)`를 호출하는 컴포넌트는 `undefined`를 context 값으로 받습니다.
+[`createContext(defaultValue)` 호출의 기본값](#specifying-a-fallback-default-value)은 **위에 일치하는 Provider가 전혀 없는 경우**에만 사용된다는 점에 유의하세요. 부모 트리 어딘가에 `<SomeContext.Provider value={undefined}>` 컴포넌트가 있는 경우, `useContext(SomeContext)`를 호출하는 컴포넌트는 `undefined`를 Context 값으로 받습니다.

From c57d200e1f39056e2a50b17be339be1afa71e687 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 13 Jan 2025 20:34:22 +0900
Subject: [PATCH 27/46] docs: update `use.md`

---
 src/content/reference/react/use.md | 68 +++++++++++++-----------------
 1 file changed, 29 insertions(+), 39 deletions(-)

diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index ee0e7c231..6dd3ee9b1 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -4,8 +4,7 @@ title: use
 
 <Intro>
 
-`use`는 [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)나 [context](/learn/passing-data-deeply-with-context)와 같은 데이터를 참조하는 React Hook입니다.
-
+`use`는 [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)나 [Context](/learn/passing-data-deeply-with-context)와 같은 데이터를 참조하는 React API입니다.
 
 ```js
 const value = use(resource);
@@ -21,8 +20,7 @@ const value = use(resource);
 
 ### `use(resource)` {/*use*/}
 
-컴포넌트에서 [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)나 [context](/learn/passing-data-deeply-with-context)와 같은 데이터를 참조하려면 `use`를 사용합니다.
-
+컴포넌트에서 [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)나 [Context](/learn/passing-data-deeply-with-context)와 같은 데이터를 참조하려면 `use`를 사용하세요.
 
 ```jsx
 import { use } from 'react';
@@ -35,35 +33,31 @@ function MessageComponent({ messagePromise }) {
 
 다른 React Hook과 달리 `use`는 `if`와 같은 조건문과 반복문 내부에서 호출할 수 있습니다. 다만, 다른 React Hook과 같이 `use`는 컴포넌트 또는 Hook에서만 호출해야 합니다.
 
-Promise와 함께 호출될 때 `use` Hook은 [`Suspense`](/reference/react/Suspense) 및 [error boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary)와 통합됩니다. `use`에 전달된 Promise가 pending되는 동안 `use`를 호출하는 컴포넌트는 *suspend*됩니다. `use`를 호출하는 컴포넌트가 Suspense 경계로 둘러싸여 있으면 fallback이 표시됩니다. Promise가 리졸브되면 Suspense fallback은 `use` Hook이 반환한 컴포넌트로 대체됩니다. `use`에 전달된 Promise가 reject되면 가장 가까운 Error Boundary의 fallback이 표시됩니다.
+Promise와 함께 호출될 때 `use` Hook은 [`Suspense`](/reference/react/Suspense) 및 [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary)와 통합됩니다. `use`에 전달된 Promise가 대기<sup>Pending</sup>하는 동안 `use`를 호출하는 컴포넌트는 *Suspend*됩니다. `use`를 호출하는 컴포넌트가 Suspense 경계로 둘러싸여 있으면 Fallback이 표시됩니다. Promise가 리졸브되면 Suspense Fallback은 `use` Hook이 반환한 컴포넌트로 대체됩니다. `use`에 전달된 Promise가 Reject되면 가장 가까운 Error Boundary의 Fallback이 표시됩니다.
 
-[아래에서 더 많은 예시를 확인하세요](#usage).
+[아래 예시를 참고하세요.](#usage)
 
 #### 매개변수 {/*parameters*/}
 
-* `resource`: 참조하려는 데이터입니다. 데이터는 [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)나 [context](/learn/passing-data-deeply-with-context)일 수 있습니다.
+* `resource`: 참조하려는 데이터입니다. 데이터는 [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)나 [Context](/learn/passing-data-deeply-with-context)일 수 있습니다.
 
 #### 반환값 {/*returns*/}
 
-`use` Hook은 [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)나 [context](/learn/passing-data-deeply-with-context)에서 참조한 값을 반환합니다.
+`use` Hook은 [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)나 [Context](/learn/passing-data-deeply-with-context)에서 참조한 값을 반환합니다.
 
 #### 주의 사항 {/*caveats*/}
 
-* `use` Hook은 컴포넌트나 Hook 내부에서 호출되어야 합니다.
-* [서버 컴포넌트](/reference/rsc/use-server)에서 데이터를 fetch 할 때는 `use`보다 `async` 및 `await`을 사용합니다. `async` 및 `await`은 `await`이 호출된 시점부터 렌더링을 시작하는 반면, `use`는 데이터가 리졸브된 후 컴포넌트를 리렌더링합니다.
-* [클라이언트 컴포넌트](/reference/rsc/use-clientt)에서 Promise를 생성하는 것보다 [서버 컴포넌트](/reference/rsc/use-server)에서 Promise를 생성하여 클라이언트 컴포넌트에 전달하는 것이 좋습니다. 클라이언트 컴포넌트에서 생성된 Promise는 렌더링할 때마다 다시 생성됩니다. 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 Promise는 리렌더링 전반에 걸쳐 안정적입니다. [예시 확인하기](#streaming-data-from-server-to-client).
-
-* The `use` API must be called inside a Component or a Hook.
-* When fetching data in a [Server Component](/reference/rsc/server-components), prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved.
-* Prefer creating Promises in [Server Components](/reference/rsc/server-components) and passing them to [Client Components](/reference/rsc/use-client) over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders. [See this example](#streaming-data-from-server-to-client). {/*TODO*/}
+* `use` API는 컴포넌트나 Hook 내부에서 호출되어야 합니다.
+* [서버 컴포넌트](/reference/rsc/use-server)에서 데이터를 가져올 때는 `use`보다 `async` 및 `await`을 사용합니다. `async` 및 `await`은 `await`이 호출된 시점부터 렌더링을 시작하는 반면, `use`는 데이터가 리졸브된 후 컴포넌트를 리렌더링합니다.
+* [클라이언트 컴포넌트](/reference/rsc/use-clientt)에서 Promise를 생성하는 것보다 [서버 컴포넌트](/reference/rsc/use-server)에서 Promise를 생성하여 클라이언트 컴포넌트에 전달하는 것이 좋습니다. 클라이언트 컴포넌트에서 생성된 Promise는 렌더링할 때마다 다시 생성됩니다. 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 Promise는 리렌더링 전반에 걸쳐 안정적입니다. [예시를 확인하세요](#streaming-data-from-server-to-client).
 
 ---
 
 ## 사용법 {/*usage*/}
 
-### `use`를 사용하여 context 참조하기 {/*reading-context-with-use*/}
+### `use`를 사용하여 Context 참조하기 {/*reading-context-with-use*/}
 
-[context](/learn/passing-data-deeply-with-context)가 `use`에 전달되면 [`useContext`](/reference/react/useContext)와 유사하게 작동합니다. `useContext`는 컴포넌트의 최상위 수준에서 호출해야 하지만, `use`는 `if`와 같은 조건문이나 `for`와 같은 반복문 내부에서 호출할 수 있습니다. `use`는 유연하므로 `useContext`보다 선호됩니다.
+[Context](/learn/passing-data-deeply-with-context)가 `use`에 전달되면 [`useContext`](/reference/react/useContext)와 유사하게 작동합니다. `useContext`는 컴포넌트의 최상위 수준에서 호출해야 하지만, `use`는 `if`와 같은 조건문이나 `for`와 같은 반복문 내부에서 호출할 수 있습니다. `use`는 유연하므로 `useContext`보다 선호됩니다.
 
 ```js [[2, 4, "theme"], [1, 4, "ThemeContext"]]
 import { use } from 'react';
@@ -73,9 +67,9 @@ function Button() {
   // ...
 ```
 
-`use`는 전달한 <CodeStep step={1}>context</CodeStep>의 <CodeStep step={2}>context 값</CodeStep>을 반환합니다. context 값을 결정하기 위해 React는 컴포넌트 트리를 탐색하고 **위에서 가장 가까운 context provider**를 찾습니다.
+`use`는 전달한 <CodeStep step={1}>Context</CodeStep>의 <CodeStep step={2}>Context Value</CodeStep>를 반환합니다. Context 값을 결정하기 위해 React는 컴포넌트 트리를 탐색하고 **위에서 가장 가까운 Context Provider**를 찾습니다.
 
-context를 `Button`에 전달하려면 `Button` 또는 상위 컴포넌트 중 하나를 context provider로 래핑합니다.
+Context를 `Button`에 전달하려면 `Button` 또는 상위 컴포넌트 중 하나를 Context Provider로 래핑합니다.
 
 ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]]
 function MyPage() {
@@ -91,11 +85,10 @@ function Form() {
 }
 ```
 
-provider와 `Button` 사이에 얼마나 많은 컴포넌트가 있는지는 중요하지 않습니다. `Form` 내부의 *어느 곳이든* `Button`이 `use(ThemeContext)`를 호출하면 `"dark"`를 값으로 받습니다.
+Provider와 `Button` 사이에 얼마나 많은 컴포넌트가 있는지는 중요하지 않습니다. `Form` 내부의 *어느 곳이든* `Button`이 `use(ThemeContext)`를 호출하면 `"dark"`를 값으로 받습니다.
 
 [`useContext`](/reference/react/useContext)와 달리, <CodeStep step={2}>`use`</CodeStep>는 <CodeStep step={1}>`if`</CodeStep>와 같은 조건문과 반복문 내부에서 호출할 수 있습니다.
 
-
 ```js [[1, 2, "if"], [2, 3, "use"]]
 function HorizontalRule({ show }) {
   if (show) {
@@ -106,12 +99,11 @@ function HorizontalRule({ show }) {
 }
 ```
 
-<CodeStep step={2}>`use`</CodeStep>는 <CodeStep step={1}>`if`</CodeStep> 내부에서 호출되므로 context에서 조건부로 값을 참조할 수 있습니다.
-
+<CodeStep step={2}>`use`</CodeStep>는 <CodeStep step={1}>`if`</CodeStep> 내부에서 호출되므로 Context에서 조건부로 값을 참조할 수 있습니다.
 
 <Pitfall>
 
-`useContext`와 마찬가지로, `use(context)`는 항상 이를 호출하는 컴포넌트의 **위쪽에서** 가장 가까운 context provider를 찾습니다. 위쪽으로 탐색하며, `use(context)`를 호출하는 컴포넌트 내부의 context provider는 고려하지 **않습니다**.
+`useContext`와 마찬가지로, `use(context)`는 항상 이를 호출하는 컴포넌트의 **위쪽에서** 가장 가까운 Context Provider를 찾습니다. 위쪽으로 탐색하며, `use(context)`를 호출하는 컴포넌트 내부의 Context Provider는 고려하지 **않습니다**.
 
 </Pitfall>
 
@@ -204,7 +196,7 @@ function Button({ show, children }) {
 
 ### 서버에서 클라이언트로 데이터 스트리밍하기 {/*streaming-data-from-server-to-client*/}
 
-<CodeStep step={1}>서버 컴포넌트</CodeStep>에서 <CodeStep step={2}>클라이언트 컴포넌트</CodeStep>로 Promise prop을 전달하여 서버에서 클라이언트로 데이터를 스트리밍할 수 있습니다.
+<CodeStep step={1}>서버 컴포넌트</CodeStep>에서 <CodeStep step={2}>클라이언트 컴포넌트</CodeStep>로 Promise Prop을 전달하여 서버에서 클라이언트로 데이터를 스트리밍할 수 있습니다.
 
 ```js [[1, 4, "App"], [2, 2, "Message"], [3, 7, "Suspense"], [4, 8, "messagePromise", 30], [4, 5, "messagePromise"]]
 import { fetchMessage } from './lib.js';
@@ -220,8 +212,7 @@ export default function App() {
 }
 ```
 
-<CodeStep step={2}>클라이언트 컴포넌트</CodeStep>는 <CodeStep step={4}>prop으로 받은 Promise</CodeStep>를 <CodeStep step={5}>`use`</CodeStep> API 에 전달합니다.
-<CodeStep step={2}>클라이언트 컴포넌트</CodeStep>는 서버 컴포넌트가 처음에 생성한 <CodeStep step={4}>Promise</CodeStep>에서 값을 읽을 수 있습니다.
+<CodeStep step={2}>클라이언트 컴포넌트</CodeStep>는 <CodeStep step={4}> Prop으로 받은 Promise</CodeStep>를 <CodeStep step={5}>`use`</CodeStep> API에 전달합니다. <CodeStep step={2}>클라이언트 컴포넌트</CodeStep>는 서버 컴포넌트가 처음에 생성한 <CodeStep step={4}>Promise</CodeStep>에서 값을 읽을 수 있습니다.
 
 ```js [[2, 6, "Message"], [4, 6, "messagePromise"], [4, 7, "messagePromise"], [5, 7, "use"]]
 // message.js
@@ -234,8 +225,7 @@ export function Message({ messagePromise }) {
   return <p>Here is the message: {messageContent}</p>;
 }
 ```
-
-<CodeStep step={2}>`Message`</CodeStep>는 <CodeStep step={3}>[`Suspense`](/reference/react/Suspense)</CodeStep>로 래핑되어 있으므로 Promise가 리졸브될 때까지 fallback이 표시됩니다. Promise가 리졸브되면 <CodeStep step={5}>`use`</CodeStep> Hook이 값을 참조하고 <CodeStep step={2}>`Message`</CodeStep> 컴포넌트가 Suspense fallback을 대체합니다.
+<CodeStep step={2}>`Message`</CodeStep>는 <CodeStep step={3}>[`Suspense`](/reference/react/Suspense)</CodeStep>로 래핑되어 있으므로 Promise가 리졸브될 때까지 Fallback이 표시됩니다. Promise가 리졸브되면 <CodeStep step={5}>`use`</CodeStep> Hook이 값을 참조하고 <CodeStep step={2}>`Message`</CodeStep> 컴포넌트가 Suspense Fallback을 대체합니다.
 
 <Sandpack>
 
@@ -309,9 +299,9 @@ root.render(
 
 <DeepDive>
 
-#### 서버 또는 클라이언트 컴포넌트에서 프로미스를 리졸브해야 하나요? {/*resolve-promise-in-server-or-client-component*/}
+#### Promise를 서버 컴포넌트에서 처리해야 하나요, 아니면 클라이언트 컴포넌트에서 처리해야 하나요? {/*resolve-promise-in-server-or-client-component*/}
 
-Promise는 서버 컴포넌트에서 클라이언트 컴포넌트로 전달할 수 있으며 `use` API 를 통해 클라이언트 컴포넌트에서 리졸브됩니다. 또한 서버 컴포넌트에서 `await` 을 사용하여 Promise를 리졸브하고 데이터를 클라이언트 컴포넌트에 `prop`으로 전달하는 방법도 존재합니다.
+Promise는 서버 컴포넌트에서 클라이언트 컴포넌트로 전달할 수 있으며 `use` API를 통해 클라이언트 컴포넌트에서 리졸브됩니다. 또한 서버 컴포넌트에서 `await`을 사용하여 Promise를 리졸브하고 데이터를 클라이언트 컴포넌트에 Prop으로 전달하는 방법도 존재합니다.
 
 ```js
 export default async function App() {
@@ -320,7 +310,7 @@ export default async function App() {
 }
 ```
 
-하지만 [서버 컴포넌트](/reference/react/use-server)에서 `await`을 사용하면 `await` 문이 완료될 때까지 렌더링이 차단됩니다. 서버 컴포넌트에서 클라이언트 컴포넌트로 Promise를 prop으로 전달하면 Promise가 서버 컴포넌트의 렌더링을 차단하는 것을 방지할 수 있습니다.
+하지만 [서버 컴포넌트](/reference/react/use-server)에서 `await`을 사용하면 `await` 문이 완료될 때까지 렌더링이 차단됩니다. 서버 컴포넌트에서 클라이언트 컴포넌트로 Promise를 Prop으로 전달하면 Promise가 서버 컴포넌트의 렌더링을 차단하는 것을 방지할 수 있습니다.
 
 </DeepDive>
 
@@ -328,18 +318,18 @@ export default async function App() {
 
 경우에 따라 `use`에 전달된 Promise가 거부될 수 있습니다. 거부된 프로미스를 처리하는 방법은 2가지가 존재합니다.
 
-1. [error boundary를 사용하여 오류 표시하기](#displaying-an-error-to-users-with-error-boundary)
+1. [Error Boundary를 사용하여 오류 표시하기](#displaying-an-error-to-users-with-error-boundary)
 2. [`Promise.catch`로 대체 값 제공하기](#providing-an-alternative-value-with-promise-catch)
 
 <Pitfall>
 
-`use`는 try-catch 블록에서 호출할 수 없습니다. try-catch 블록 대신 [컴포넌트를 Error Boundary로 래핑]((#displaying-an-error-to-users-with-error-boundary))하거나, Promise의 [`catch` 메서드를 사용하여 대체 값을 제공해야 합니다.]((#providing-an-alternative-value-with-promise-catch))
+`use`는 `try`-`catch` 블록에서 호출할 수 없습니다. `try`-`catch` 블록 대신 [컴포넌트를 Error Boundary로 래핑]((#displaying-an-error-to-users-with-error-boundary))하거나, Promise의 [`catch` 메서드를 사용하여 대체 값을 제공해야 합니다.]((#providing-an-alternative-value-with-promise-catch))
 </Pitfall>
 
-####  error boundary를 사용하여 오류 표시하기 {/*error-boundary를-사용하여-오류-표시하기*/}
+#### Error Boundary를 사용하여 오류 표시하기 {/*error-boundary를-사용하여-오류-표시하기*/}
  {/*displaying-an-error-to-users-with-error-boundary*/}
 
-Promise가 reject 될 때 오류를 표시하고 싶다면 [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary)를 사용합니다. error boundary를 사용하려면 `use` API 를 호출하는 컴포넌트를 error boundary로 래핑합니다. `use`에 전달된 Promise가 reject 되면 error boundary에 대한 fallback이 표시됩니다.
+Promise가 거부될 때 오류를 표시하고 싶다면 [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary)를 사용합니다. Error Boundary를 사용하려면 `use` API 를 호출하는 컴포넌트를 Error Boundary로 래핑합니다. `use`에 전달된 Promise가 거부되면 Error Boundary에 대한 Fallback이 표시됩니다.
 
 <Sandpack>
 
@@ -444,12 +434,12 @@ Promise의 <CodeStep step={1}>`catch`</CodeStep> 메서드를 사용하려면 Pr
 
 ---
 
-## 트러블슈팅 {/*troubleshooting*/}
+## 문제 해결 {/*troubleshooting*/}
 
 
 ### "Suspense Exception: This is not a real error!" {/*suspense-exception-error*/}
 
-React 컴포넌트 또는 hook 함수 외부에서, 혹은 try-catch 블록에서 `use`를 호출하고 있는 경우입니다. try-catch 블록 내에서 `use`를 호출하는 경우 컴포넌트를 error boundary로 래핑하거나 Promise의 `catch`를 호출하여 에러를 발견하고 Promise를 다른 값으로 리졸브합니다. [이러한 예시들 확인하기](#dealing-with-rejected-promises).
+React 컴포넌트 또는 Hook 함수 외부에서, 혹은 `try`-`catch` 블록에서 `use`를 호출하고 있는 경우입니다. `try`-`catch` 블록 내에서 `use`를 호출하는 경우 컴포넌트를 Error Boundary로 래핑하거나 Promise의 `catch`를 호출하여 오류를 발견하고 Promise를 다른 값으로 리졸브합니다. [이러한 예시들을 확인하세요](#dealing-with-rejected-promises).
 
 React 컴포넌트나 Hook 함수 외부에서 `use`를 호출하는 경우 `use` 호출을 React 컴포넌트나 Hook 함수로 이동합니다.
 
@@ -457,7 +447,7 @@ React 컴포넌트나 Hook 함수 외부에서 `use`를 호출하는 경우 `use
 ```jsx
 function MessageComponent({messagePromise}) {
   function download() {
-    // ❌ `use`를 호출하는 함수가 컴포넌트나 hook이 아닙니다.
+    // ❌ `use`를 호출하는 함수가 컴포넌트나 Hook이 아닙니다.
     const message = use(messagePromise);
     // ...
 ```

From 6b713133d7cad95ba9e59aa0ae63a0ea98126018 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 13 Jan 2025 20:39:57 +0900
Subject: [PATCH 28/46] docs: update `experimental_useEffectEvent.md`

---
 src/content/reference/react/experimental_useEffectEvent.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/experimental_useEffectEvent.md b/src/content/reference/react/experimental_useEffectEvent.md
index bd19a35b8..4cfaf120d 100644
--- a/src/content/reference/react/experimental_useEffectEvent.md
+++ b/src/content/reference/react/experimental_useEffectEvent.md
@@ -19,7 +19,7 @@ React 패키지를 최신 실험 버전으로 업그레이드하여 API를 사
 
 <Intro>
 
-`useEffectEvent`는 [Effect Event.](/learn/separating-events-from-effects#declaring-an-effect-event) 에 반응하지 않는 로직을 추출하는 React 훅입니다.
+`useEffectEvent`는 [Effect Event](/learn/separating-events-from-effects#declaring-an-effect-event)에 반응하지 않는 로직을 추출하는 React Hook입니다.
 
 ```js
 const onSomething = useEffectEvent(callback)

From f9353c2adcc704743145317d10e7a886d70362e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 13 Jan 2025 20:58:42 +0900
Subject: [PATCH 29/46] docs: update `experimental_taintObjectReference`

---
 .../experimental_taintObjectReference.md      | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/content/reference/react/experimental_taintObjectReference.md b/src/content/reference/react/experimental_taintObjectReference.md
index f2c5d264e..31a13ea0f 100644
--- a/src/content/reference/react/experimental_taintObjectReference.md
+++ b/src/content/reference/react/experimental_taintObjectReference.md
@@ -6,7 +6,7 @@ title: experimental_taintObjectReference
 
 **이 API는 실험적이며 React 안정 버전에서는 아직 사용할 수 없습니다.**
 
-이 API를 사용하려면 React 패키지를 가장 최근의 실험적인 버전으로 업그레이드해야 합니다.
+이 API를 사용하려면 React 패키지를 가장 최신의 실험적인 버전으로 업그레이드해야 합니다.
 
 - `react@experimental`
 - `react-dom@experimental`
@@ -14,7 +14,7 @@ title: experimental_taintObjectReference
 
 실험적인 버전의 React에는 버그가 있을 수 있습니다. 프로덕션에서는 사용하지 마세요.
 
-이 API는 React 서버 컴포넌트에서만 사용할 수 있습니다.
+이 API는 [React 서버 컴포넌트](/reference/rsc/server-components)에서만 사용할 수 있습니다.
 
 </Wip>
 
@@ -49,13 +49,13 @@ experimental_taintObjectReference(
 );
 ```
 
-[더 많은 예시를 아래에서 볼 수 있습니다.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### 매개변수 {/*parameters*/}
 
-* `message`: 객체가 클라이언트 컴포넌트로 전달될 때 표시할 메시지. 객체가 클라이언트 컴포넌트로 전달될 때 발생하는 에러 객체에 포함되어 나타나는 메시지입니다.
+* `message`: 객체가 클라이언트 컴포넌트로 전달될 때 표시할 메시지. 객체가 클라이언트 컴포넌트로 전달될 때 발생하는 오류 객체에 포함되어 나타나는 메시지입니다.
 
-* `object`: 오염(taint)될 객체. 함수와 클래스 인스턴스도 `object`로서 `taintObjectReference`에 전달될 수 있습니다. 함수와 클래스는 클라이언트 컴포넌트로 전달되지 않도록 이미 막혀있지만 React의 기본 에러 메시지 대신 `message`에 설정한 메시지를 보여줄 수 있습니다. 타입 배열(Typed Array)의 인스턴스를 `object`로서 `taintObjectReference`에 전달하면 같은 타입 배열의 다른 인스턴스가 오염되지 않습니다.
+* `object`: 오염(taint)될 객체. 함수와 클래스 인스턴스도 `object`로서 `taintObjectReference`에 전달될 수 있습니다. 함수와 클래스는 클라이언트 컴포넌트로 전달되지 않도록 이미 막혀있지만 React의 기본 오류 메시지 대신 `message`에 설정한 메시지를 보여줄 수 있습니다. 타입 배열<sup>Typed Array</sup>의 인스턴스를 `object`로서 `taintObjectReference`에 전달하면 같은 타입 배열의 다른 인스턴스가 오염되지 않습니다.
 
 #### 반환값 {/*returns*/}
 
@@ -67,7 +67,7 @@ experimental_taintObjectReference(
 
 <Pitfall>
 
-**보안을 오염에만 의존하지 마세요.** 객체를 오염시켰다고 해서 모든 누출 가능성을 막을 수는 없습니다. 예를 들어 오염된 객체를 복제하면 오염되지 않은 새로운 객체가 만들어집니다. 오염된 객체에서 가져온 데이터를 사용하여(예. `{secret: taintedObj.secret}`) 작성된 새 값이나 객체는 오염되지 않습니다. 오염은 한 겹의 보호 장치일 뿐입니다. 보안성이 높은 애플리케이션은 여러 겹의 보호 장치와 잘 설계된 API를 마련해 두고 격리 패턴을 따릅니다.
+**보안을 오염<sup>Tainting</sup>에만 의존하지 마세요.** 객체를 오염시켰다고 해서 모든 누출 가능성을 막을 수는 없습니다. 예를 들어 오염된 객체를 복제하면 오염되지 않은 새로운 객체가 만들어집니다. 오염된 객체에서 가져온 데이터를 사용하여(예: `{secret: taintedObj.secret}`) 작성된 새 값이나 객체는 오염되지 않습니다. 오염은 한 겹의 보호 장치일 뿐입니다. 보안성이 높은 애플리케이션은 여러 겹의 보호 장치와 잘 설계된 API를 마련해 두고 격리 패턴을 따릅니다.
 
 </Pitfall>
 
@@ -75,9 +75,9 @@ experimental_taintObjectReference(
 
 ## 사용법 {/*usage*/}
 
-### 사용자 데이터가 의도하지 않게 클라이언트로 전달되는 것을 방지하기 {/*prevent-user-data-from-unintentionally-reaching-the-client*/}
+### 사용자 데이터가 의도치 않게 클라이언트로 전달되는 것을 방지하기 {/*prevent-user-data-from-unintentionally-reaching-the-client*/}
 
-클라이언트 컴포넌트에는 민감한 데이터를 담은 객체가 전달되어서는 안 됩니다. 이상적으로, 데이터 페치 함수는 현재 사용자가 접근할 수 없는 데이터를 노출하면 안 됩니다. 하지만 리팩토링 도중 가끔 실수가 발생하기도 합니다. 데이터 API에서 사용자 객체를 "오염(taint)"시켜서 이러한 실수를 방지할 수 있습니다.
+클라이언트 컴포넌트에는 민감한 데이터를 담은 객체가 전달되어서는 안 됩니다. 이상적으로, 데이터 가져오기<sup>Data Fetching</sup> 함수는 현재 사용자가 접근할 수 없는 데이터를 노출하면 안 됩니다. 하지만 리팩토링 도중 가끔 실수가 발생하기도 합니다. 데이터 API에서 사용자 객체를 "오염<sup>Taint</sup>"시켜서 이러한 실수를 방지할 수 있습니다.
 
 ```js
 import {experimental_taintObjectReference} from 'react';
@@ -93,11 +93,11 @@ export async function getUser(id) {
 }
 ```
 
-이제 누군가 이 객체를 클라이언트 컴포넌트로 전달하려고 하면 전달된 에러 메시지와 함께 에러가 발생됩니다.
+이제 누군가 이 객체를 클라이언트 컴포넌트로 전달하려고 하면 전달된 오류 메시지와 함께 오류가 발생합니다.
 
 <DeepDive>
 
-#### 데이터 페치에서 누출 방지하기 {/*protecting-against-leaks-in-data-fetching*/}
+#### 데이터 가져오기에서 누출 방지하기 {/*protecting-against-leaks-in-data-fetching*/}
 
 민감한 데이터에 접근할 수 있는 서버 컴포넌트 환경을 실행하고 있다면 객체를 그대로 전달할 때 주의를 기울여야 합니다.
 
@@ -129,7 +129,7 @@ export async function InfoCard({ user }) {
 }
 ```
 
-이상적으로, `getUser`는 현재 사용자가 접근할 수 없는 데이터를 노출하지 않아야 합니다. `user` 객체가 클라이언트 컴포넌트로 전달되는 것을 방지하려면 사용자 객체를 "오염(taint)"시켜야 합니다.
+이상적으로, `getUser`는 현재 사용자가 접근할 수 없는 데이터를 노출하지 않아야 합니다. `user` 객체가 클라이언트 컴포넌트로 전달되는 것을 방지하려면 사용자 객체를 "오염<sup>Taint</sup>"시켜야 합니다.
 
 ```js
 // api.js
@@ -146,6 +146,6 @@ export async function getUser(id) {
 }
 ```
 
-이제 누군가 `user` 객체를 클라이언트 컴포넌트로 전달하려고 하면 설정한 에러 메시지와 함께 에러가 발생합니다.
+이제 누군가 `user` 객체를 클라이언트 컴포넌트로 전달하려고 하면 설정한 오류 메시지와 함께 오류가 발생합니다.
 
 </DeepDive>

From efe01ce11a8ebf1c2f090a69b6c6cde58716eaf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 13 Jan 2025 20:59:07 +0900
Subject: [PATCH 30/46] docs: update `experimental_taintUniqueValue.md`

---
 .../react/experimental_taintUniqueValue.md    | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index 94721e739..fd028f04d 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -6,7 +6,7 @@ title: experimental_taintUniqueValue
 
 **이 API는 실험적이며 React 안정 버전에서는 아직 사용할 수 없습니다.**
 
-이 API를 사용하려면 React 패키지를 가장 최근의 실험적인 버전으로 업그레이드해야 합니다.
+이 API를 사용하려면 React 패키지를 가장 최신의 실험적인 버전으로 업그레이드해야 합니다.
 
 - `react@experimental`
 - `react-dom@experimental`
@@ -14,7 +14,7 @@ title: experimental_taintUniqueValue
 
 실험적인 버전의 React에는 버그가 있을 수 있습니다. 프로덕션에서는 사용하지 마세요.
 
-이 API는 [React Server Components](/reference/rsc/use-client)에서만 사용할 수 있습니다.
+이 API는 [React 서버 컴포넌트](/reference/rsc/server-components)에서만 사용할 수 있습니다.
 
 </Wip>
 
@@ -39,7 +39,7 @@ taintUniqueValue(errMessage, lifetime, value)
 
 ### `taintUniqueValue(message, lifetime, value)` {/*taintuniquevalue*/}
 
-클라이언트에 전달되지 않아야 할 패스워드, 토큰, 키 또는 해시를 `taintUniqueValue`와 함께 호출하여 React에 등록합니다.
+클라이언트에 전달되지 않아야 할 패스워드, 토큰, 키, 해시를 `taintUniqueValue`와 함께 호출하여 React에 등록합니다.
 
 ```js
 import {experimental_taintUniqueValue} from 'react';
@@ -51,15 +51,15 @@ experimental_taintUniqueValue(
 );
 ```
 
-[더 많은 예시를 아래에서 볼 수 있습니다.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 #### 매개변수 {/*parameters*/}
 
 * `message`: 클라이언트 컴포넌트에 `value`가 전달될 경우 표시하고자 하는 메시지입니다.  이 메시지는 `value`가 클라이언트 컴포넌트에 전달될 경우 발생하는 오류의 일부로 표시됩니다.
 
-* `lifetime`: `value가` 얼마나 오랫동안 오염(taint) 상태를 유지해야 하는지를 나타내는 객체입니다.`value`는 이 객체가 존재하는 동안 클라이언트 컴포넌트로 전달되지 않도록 차단됩니다. 예를 들어 `globalThis`를 전달하면 앱이 종료될 때까지 값이 차단됩니다. `lifetime`은 일반적으로 `value`를 프로퍼티로 가지는 객체입니다.
+* `lifetime`: `value`가 얼마나 오랫동안 오염<sup>Taint</sup> 상태를 유지해야 하는지를 나타내는 객체입니다.`value`는 이 객체가 존재하는 동안 클라이언트 컴포넌트로 전달되지 않도록 차단됩니다. 예를 들어 `globalThis`를 전달하면 앱이 종료될 때까지 값이 차단됩니다. `lifetime`은 일반적으로 `value`를 프로퍼티로 가지는 객체입니다.
 
-* `value`: string, bigint 또는 TypedArray입니다. `value`는 암호화 토큰, 개인 키, 해시 또는 긴 비밀번호와 같이 높은 엔트로피를 가진 고유한 문자 또는 바이트 시퀀스여야 합니다. `value`는 클라이언트 컴포넌트로 전송되지 않도록 차단됩니다.
+* `value`: 문자열, bigint 또는 TypedArray입니다. `value`는 암호화 토큰, 개인 키, 해시, 긴 비밀번호와 같이 높은 엔트로피를 가진 고유한 문자 또는 바이트 시퀀스여야 합니다. `value`는 클라이언트 컴포넌트로 전송되지 않도록 차단됩니다.
 
 #### 반환값 {/*returns*/}
 
@@ -67,8 +67,8 @@ experimental_taintUniqueValue(
 
 #### 주의 사항 {/*caveats*/}
 
-* 오염된 값을 이용해서 새로운 값을 만들어 내면 오염 보호가 손상될 수 있습니다. 오염된 값을 대문자로 변경하거나, 다른 문자열과 연결하거나, base64로 변환하거나, 잘라내는 등 기타 유사한 변환을 통해서 새롭게 생성된 값은 `taintUniqueValue`을 명시적으로 호출하지 않으면 오염되지 않습니다.
-* PIN 코드나 전화번호와 같이 복잡도가 낮은 값을 보호하기 위해 'tainUniqueValue'를 사용하지 마십시오. 공격자가 요청의 값을 이용하여 암호의 가능한 모든 값을 열거하여 어떤 값이 오염되었는지 추론할 수 있습니다.
+* 오염된 값을 이용해서 새로운 값을 만들어 내면 오염 보호가 손상될 수 있습니다. 오염된 값을 대문자로 변경하거나, 다른 문자열과 연결하거나, Base64로 변환하거나, 잘라내는 등 기타 유사한 변환을 통해서 새롭게 생성된 값은 `taintUniqueValue`을 명시적으로 호출하지 않으면 오염되지 않습니다.
+* PIN 코드나 전화번호와 같이 복잡도가 낮은 값을 보호하기 위해 `tainUniqueValue`를 사용하지 마세요. 공격자가 요청의 값을 이용하여 암호의 가능한 모든 값을 열거하여 어떤 값이 오염되었는지 추론할 수 있습니다.
 
 ---
 
@@ -76,7 +76,7 @@ experimental_taintUniqueValue(
 
 ### 토큰이 클라이언트 구성 요소로 전달되지 않도록 방지하기 {/*prevent-a-token-from-being-passed-to-client-components*/}
 
-패스워드, 세션 토큰 또는 기타 고유 값과 같은 민감한 정보가 실수로 클라이언트 컴포넌트로 전달되지 않도록 `taintUniqueValue` 함수는 보호 레이어을 제공합니다. 값이 오염되면 클라이언트 컴포넌트로 전달하려는 시도는 에러를 발생시킵니다.
+패스워드, 세션 토큰 또는 기타 고유 값과 같은 민감한 정보가 실수로 클라이언트 컴포넌트로 전달되지 않도록 `taintUniqueValue` 함수는 보호 레이어을 제공합니다. 값이 오염되면 클라이언트 컴포넌트로 전달하려는 시도는 오류를 발생시킵니다.
 
 `lifetime` 인자는 값이 오염된 상태로 남아 있는 기간을 정의합니다. 오염된 상태로 무기한 유지되어야 하는 값의 경우 [`globalThis`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) 또는 `process`와 같은 객체가 `lifetime` 인자로 사용될 수 있습니다. 이 객체들은 앱이 실행되는 전체 기간을 수명으로 가집니다.
 
@@ -106,7 +106,7 @@ export async function getUser(id) {
 }
 ```
 
-이 예시에서 `user` 객체는 `lifetime` 인자 역할을 합니다. 이 객체가 글로벌 캐시에 저장되거나 다른 요청에 의해 접근할 수 있다면 세션 토큰은 오염된 상태로 유지됩니다.
+이 예시에서 `user` 객체는 `lifetime` 인수 역할을 합니다. 이 객체가 전역 캐시에 저장되거나 다른 요청에 의해 접근할 수 있다면 세션 토큰은 오염된 상태로 유지됩니다.
 
 <Pitfall>
 
@@ -129,9 +129,9 @@ const uppercasePassword = password.toUpperCase() // `uppercasePassword`는 오
 
 이 예시에서는 상수 `password`가 오염되어 있습니다. 이러한 `password`에 `toUpperCase`메서드를 사용하여 `uppercasePassword`라는 새로운 값을 만들었습니다. 이렇게 새로 생성된 `uppercasePassword`는 오염되지 않았습니다.
 
-오염되지 않은 새로운 값이 만들어지는 다른 유사한 방법에는 오염된 값을 다른 문자열과 연결하거나, base64로 변환하거나, 잘라내는 것이 있습니다.
+오염되지 않은 새로운 값이 만들어지는 다른 유사한 방법에는 오염된 값을 다른 문자열과 연결하거나, Base64로 변환하거나, 잘라내는 것이 있습니다.
 
-오염은 비밀 값을 클라이언트에 전달하는 것과 같이 단순한 실수만 방지합니다. lifetime 객체 없이 React 외부의 글로벌 스토어를 사용하는 것과 같이 `taintUniqueValue`를 호출하는 실수는 오염된 값을 오염되지 않은 값으로 만들 수 있습니다. 오염은 보호 레이어이며 안전한 앱에는 여러 개의 보호 레이어와 잘 설계된 API, 격리 패턴이 있습니다.
+오염은 비밀 값을 클라이언트에 전달하는 것과 같이 단순한 실수만 방지합니다. `lifetime` 객체 없이 React 외부의 전역 스토어를 사용하는 것과 같이 `taintUniqueValue`를 호출하는 실수는 오염된 값을 오염되지 않은 값으로 만들 수 있습니다. 오염은 보호 레이어이며 안전한 앱에는 여러 개의 보호 레이어와 잘 설계된 API, 격리 패턴이 있습니다.
 
 </Pitfall>
 
@@ -162,11 +162,11 @@ export async function Overview({ password }) {
 }
 ```
 
-이 예시는 비밀 API 토큰을 클라이언트에 유출시킵니다. 이 API 토큰을 사용하여 특정 사용자가 접근해서는 안 되는 데이터에 접근한다면 데이터 유출로 이어질 수 있습니다.
+이 예시는 비밀 API 토큰을 클라이언트에 유출시킵니다. 이 API 토큰을 사용하여 특정 사용자가 접근해서는 안되는 데이터에 접근한다면 데이터 유출로 이어질 수 있습니다.
 
 [comment]: <> (TODO: Link to `server-only` docs once they are written)
 
-이와 같은 비밀은 서버의 신뢰할 수 있는 데이터 유틸리티에서만 임포트할 수 있는 단일 헬퍼(helper) 파일로 추상화 되는 것이 이상적입니다. 헬퍼는 [`server-only`](https://www.npmjs.com/package/server-only)라는 태그를 지정하여 이 파일을 클라이언트에서 임포트 되지 않도록 할 수 있습니다.
+이와 같은 비밀은 서버의 신뢰할 수 있는 데이터 유틸리티에서만 불러올<sup>Import</sup> 수 있는 단일 헬퍼<sup>Helper</sup> 파일로 추상화되는 것이 이상적입니다. 헬퍼는 [`server-only`](https://www.npmjs.com/package/server-only)라는 태그를 지정하여 이 파일을 클라이언트에서 불러와지지 않도록 할 수 있습니다.
 
 ```js
 import "server-only";
@@ -192,9 +192,7 @@ experimental_taintUniqueValue(
 );
 ```
 
-이제 다른 사용자가 이 패스워드를 클라이언트 컴포넌트로 전달하거나, Server Action으로 클라이언트 컴포넌트에 패스워드를 보내려고 할 때마다 `taintUniqueValue`를 호출했을 때 정의한 메시지와 함께 오류가 발생합니다.
-
-Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Function, an error will be thrown with message you defined when you called `taintUniqueValue`. {/*TODO*/}
+이제 다른 사용자가 이 패스워드를 클라이언트 컴포넌트로 전달하거나, 서버 함수로 클라이언트 컴포넌트에 패스워드를 보내려고 할 때마다, `taintUniqueValue`를 호출했을 때 정의한 메시지와 함께 오류가 발생합니다.
 
 </DeepDive>
 

From 289f211c0d897885a8b771524a56c69bedc9dfc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 13 Jan 2025 21:06:08 +0900
Subject: [PATCH 31/46] docs: update `components.md`

---
 src/content/reference/react/components.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/reference/react/components.md b/src/content/reference/react/components.md
index 250615f4d..380ba16f5 100644
--- a/src/content/reference/react/components.md
+++ b/src/content/reference/react/components.md
@@ -1,5 +1,5 @@
 ---
-title: "내장 컴포넌트"
+title: "내장 React 컴포넌트"
 ---
 
 <Intro>
@@ -12,13 +12,13 @@ React는 JSX에서 사용할 수 있는 몇 가지 내장 컴포넌트를 제공
 
 ## 내장 컴포넌트 {/*built-in-components*/}
 
-* [`<Fragment>`](/reference/react/Fragment), 또는 `<>...</>` 로 표기하며, 여러 JSX 노드를 함께 그룹화할 수 있습니다.
-* [`<Profiler>`](/reference/react/Profiler) React 트리의 렌더링 성능을 프로그래밍적으로 측정할 수 있습니다.
-* [`<Suspense>`](/reference/react/Suspense) 자식 컴포넌트를 로딩하는 동안 fallback을 표시할 수 있습니다.
-* [`<StrictMode>`](/reference/react/StrictMode) 초기에 버그를 찾는 데 도움이 되는 추가 개발 전용 검사를 사용할 수 있습니다.
+* [`<Fragment>`](/reference/react/Fragment) 또는 `<>...</>` 로 표기하며, 여러 JSX 노드를 함께 그룹화할 수 있습니다.
+* [`<Profiler>`](/reference/react/Profiler)를 통해 React 트리의 렌더링 성능을 프로그래밍적으로 측정할 수 있습니다.
+* [`<Suspense>`](/reference/react/Suspense)를 통해 자식 컴포넌트를 로딩하는 동안 Fallback을 표시할 수 있습니다.
+* [`<StrictMode>`](/reference/react/StrictMode)를 통해 초기에 버그를 찾는 데 도움이 되는 추가 개발 전용 검사를 사용할 수 있습니다.
 
 ---
 
-## 자신의 컴포넌트 {/*your-own-components*/}
+## 자신만의 컴포넌트 {/*your-own-components*/}
 
-JavaScript [함수로 자신의 컴포넌트를 정의](/learn/your-first-component)할 수도 있습니다.
+자바스크립트 [함수로 자신만의 컴포넌트를 정의](/learn/your-first-component)할 수도 있습니다.

From e92757682d6a0bdefc9182f604d45dfbde19e87b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 13 Jan 2025 21:10:27 +0900
Subject: [PATCH 32/46] docs: resolve conflicts in `server-functions.md`

---
 src/content/reference/rsc/server-functions.md | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md
index 4312dcfd7..d1e8e9137 100644
--- a/src/content/reference/rsc/server-functions.md
+++ b/src/content/reference/rsc/server-functions.md
@@ -22,7 +22,7 @@ Server Functions are for use in [React Server Components](/learn/start-a-new-rea
 
 #### 서버 함수를 지원하려면 어떻게 해야 하나요? {/*how-do-i-build-support-for-server-functions*/}
 
-React 19의 서버 함수는 안정적이며 마이너<sup>Minor</sup> 버전 간에는 변경되지 않습니다. 그러나 React 서버 컴포넌트 번들러나 프레임워크에서 서버 함수를 구현하는 데 사용되는 기본 API는 시맨틱 버전(semver)을 따르지 않으며 React 19.x의 마이너<sup>Minor</sup> 버전 간에 변경될 수 있습니다.
+React 19의 서버 함수는 안정적이며 마이너<sup>Minor</sup> 버전 간에는 변경되지 않습니다. 그러나 React 서버 컴포넌트 번들러나 프레임워크에서 서버 함수를 구현하는 데 사용되는 기본 API는 유의적 버전<sup>SemVer</sup>을 따르지 않으며 React 19.x의 마이너<sup>Minor</sup> 버전 간에 변경될 수 있습니다.
 
 서버 함수를 번들러나 프레임워크로 지원하려면, 특정 React 버전에 고정하거나 Canary 릴리즈를 사용하는 것을 권장합니다. 향후 서버 함수를 구현하는 데 사용되는 API를 안정화하기 위해 번들러 및 프레임워크와 계속 협력할 것입니다.
 
@@ -39,12 +39,12 @@ React 19의 서버 함수는 안정적이며 마이너<sup>Minor</sup> 버전 
 서버 컴포넌트는 `"use server"` 지시어로 서버 함수를 정의할 수 있습니다.
 
 ```js [[2, 7, "'use server'"], [1, 5, "createNote"], [1, 12, "createNote"]]
-// Server Component
+// 서버 컴포넌트
 import Button from './Button';
 
 function EmptyNote () {
   async function createNote() {
-    // Server Function
+    // 서버 함수
     'use server';
 
     await db.notes.create();
@@ -82,11 +82,7 @@ export async function createNote() {
 
 ```
 
-<<<<<<< HEAD
 번들러가 `EmptyNote` 클라이언트 컴포넌트를 빌드할 때, 번들에서 `createNote` 함수에 대한 참조를 생성합니다. 버튼을 클릭하면, React는 제공된 참조를 통해 `createNote` 함수를 실행하도록 서버에 요청<sup>Request</sup>을 보냅니다.
-=======
-When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNote` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNote` function using the reference provided:
->>>>>>> 9000e6e003854846c4ce5027703b5ce6f81aad80
 
 ```js [[1, 3, "createNote"], [1, 6, "createNote"], [1, 8, "createNote"]]
 "use client";

From c89b4021741112dab2273843d5ce518e34ca1470 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 13 Jan 2025 21:14:53 +0900
Subject: [PATCH 33/46] docs: resolve conflicts in
 `add-react-to-existing-project.md`

---
 src/content/learn/add-react-to-an-existing-project.md | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index fa9c1a99e..b60997633 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -20,15 +20,9 @@ title: 기존 프로젝트에 React 추가하기
 
 다음과 같이 설정하는 것을 추천합니다.
 
-<<<<<<< HEAD
 1. [React 기반 프레임워크](/learn/start-a-new-react-project) 중 하나를 사용하여 **앱의 React 부분을 빌드하세요.**
-2. 사용하는 프레임워크 설정에서 **`/some-app` 을 *기본 경로*<sup>*Base Path*</sup>로 명시하세요**. (이때, [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)를 사용하세요!)
-3. **서버 또는 프록시를 구성**하여 `/some-app/` 하위의 모든 요청이 React 애플리케이션에서 처리되도록 하세요.
-=======
-1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
-2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
-3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
->>>>>>> 9000e6e003854846c4ce5027703b5ce6f81aad80
+2. 사용하는 프레임워크 설정에서 **`/some-app` 을 *기본 경로*<sup>*Base Path*</sup>로 명시하세요**. (이때, [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)를 사용하세요!)
+3. **서버 또는 프록시를 구성**하여 `/some-app/` 하위의 모든 요청이 React 앱에서 처리되도록 하세요.
 
 이는 앱의 React 부분이 이러한 프레임워크에 내장된 [최고의 사례들<sup>Best Practices</sup>로부터 이점을 얻을 수 있습니다.](/learn/start-a-new-react-project#can-i-use-react-without-a-framework)
 

From cfff64c2b4c9bb6f50cda66c33a6bcbb16f73247 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Mon, 13 Jan 2025 22:52:33 +0900
Subject: [PATCH 34/46] docs: update `Fragment.md`

---
 src/content/reference/react/Fragment.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md
index 796ce555d..e15cc762b 100644
--- a/src/content/reference/react/Fragment.md
+++ b/src/content/reference/react/Fragment.md
@@ -3,7 +3,7 @@ title: <Fragment> (<>...</>)
 ---
 
 <Intro>
-`<Fragment>`는 종종 `<>...</>` 구문으로 사용되고, 래퍼 노드 없이 엘리먼트를 그룹화할 수 있습니다.
+`<Fragment>`는 종종 `<>...</>` 구문으로 사용하고, 래퍼 노드 없이 엘리먼트를 그룹화할 수 있습니다.
 
 ```js
 <>
@@ -25,13 +25,13 @@ title: <Fragment> (<>...</>)
 하나의 엘리먼트가 필요한 상황에서 엘리먼트를 `<Fragment>`로 감싸서 그룹화하세요. `Fragment` 안에서 그룹화된 엘리먼트는 DOM 결과물에 영향을 주지 않습니다. 즉, 엘리먼트가 그룹화되지 않은 것과 같습니다. 대부분의 경우 빈 JSX 태그인 `<></>`는 `<Fragment></Fragment>`의 줄임말입니다.
 
 #### Props {/*props*/}
-- **optional** `key`: 명시적 `<Fragment>`로 선언된 Fragment에는 [key](/learn/rendering-lists#keeping-list-items-in-order-with-key)를 사용할 수 있습니다.
+- **optional** `key`: 명시적 `<Fragment>`로 선언된 Fragment에는 [`key`](/learn/rendering-lists#keeping-list-items-in-order-with-key)를 사용할 수 있습니다.
 
 #### 주의 사항 {/*caveats*/}
 
-- Fragment에 `key`를 사용하려면 `<>...</>` 구문을 사용할 수 없습니다. 명시적으로 `react`에서 `Fragment`를 import하고 `<Fragment key={yourKey}>...</Fragment>`를 렌더링해야 합니다.
+- Fragment에 `key`를 사용하려면 `<>...</>` 구문을 사용할 수 없습니다. 명시적으로 `react`에서 `Fragment`를 불러오고<sup>Import</sup> `<Fragment key={yourKey}>...</Fragment>`를 렌더링해야 합니다.
 
-- React는 `<><Child /></>`에서 `[<Child />]`로 렌더링하거나 (또는 반대의 경우), 혹은 `<><Child /></>` 에서 `<Child />` 렌더링하거나 (또는 반대의 경우) [state를 초기화](/learn/preserving-and-resetting-state)하지 않습니다. 이는 오직 Single Level Deep까지만 적용됩니다. 예를 들어 `<><><Child /></></>` 에서 `<Child />`로 렌더링하는 것은 state가 초기화됩니다. 정확한 semantics는 [여기](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)서 참조하실 수 있습니다.
+- React는 `<><Child /></>`에서 `[<Child />]`로 렌더링하거나 (또는 반대의 경우), 혹은 `<><Child /></>` 에서 `<Child />` 렌더링하거나 (또는 반대의 경우) [State를 초기화](/learn/preserving-and-resetting-state)하지 않습니다. 이는 오직 한 단계 깊이<sup>Single Level Deep</sup>까지만 적용됩니다. 예를 들어 `<><><Child /></></>` 에서 `<Child />`로 렌더링하는 것은 State가 초기화됩니다. 정확한 의미는 [여기](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)서 확인할 수 있습니다.
 
 ---
 
@@ -39,7 +39,7 @@ title: <Fragment> (<>...</>)
 
 ### 여러 엘리먼트 반환하기 {/*returning-multiple-elements*/}
 
-여러 엘리먼트를 함께 그룹화하기 위해 `Fragment`나 `<>...</>` 문법을 사용하세요. 한 개의 엘리먼트가 존재할 수 있는 곳에 여러 엘리먼트를 넣을 수 있습니다. 예를 들어 컴포넌트는 한 개의 엘리먼트만 반환할 수 있지만 Fragment를 사용하여 여러 엘리먼트를 함께 그룹화하여 반환할 수 있습니다.
+여러 엘리먼트를 함께 그룹화하기 위해 `Fragment`나 `<>...</>` 문법을 사용하세요. 한 개의 엘리먼트가 존재할 수 있는 곳에 여러 엘리먼트를 넣을 수 있습니다. 예를 들어 컴포넌트는 한 개의 엘리먼트만 반환할 수 있지만 `Fragment`를 사용하여 여러 엘리먼트를 함께 그룹화하여 반환할 수 있습니다.
 
 ```js {3,6}
 function Post() {
@@ -52,7 +52,7 @@ function Post() {
 }
 ```
 
-Fragment로 엘리먼트를 그룹화하면 DOM 엘리먼트와 같은 다른 컨테이너로 엘리먼트를 감싸는 경우와는 달리 레이아웃이나 스타일에 영향을 주지 않기 때문에 Fragment는 효과적입니다. 브라우저로 아래 예시를 검사하면 모든 `<h1>`, `<article>` DOM 노드가 래퍼 없이 형제 노드로 나타나는 것을 볼 수 있습니다.
+`Fragment`로 엘리먼트를 그룹화하면 DOM 엘리먼트와 같은 다른 컨테이너로 엘리먼트를 감싸는 경우와는 달리, 레이아웃이나 스타일에 영향을 주지 않기 때문에 `Fragment`는 효과적입니다. 브라우저로 아래 예시를 검사하면 모든 `<h1>`, `<article>` DOM 노드가 래퍼 없이 형제 노드로 나타나는 것을 볼 수 있습니다.
 
 <Sandpack>
 
@@ -92,9 +92,9 @@ function PostBody({ body }) {
 
 <DeepDive>
 
-#### 특별한 문법 없이 Fragment를 작성하는 방법은 무엇입니까? {/*how-to-write-a-fragment-without-the-special-syntax*/}
+#### 특별한 문법 없이 `Fragment`를 작성하는 방법은 무엇인가요? {/*how-to-write-a-fragment-without-the-special-syntax*/}
 
-위의 예시는 React에서 `Fragment`를 import 하는 것과 동일합니다.
+위의 예시는 React에서 `Fragment`를 불러오는<sup>Import</sup> 것과 동일합니다.
 
 ```js {1,5,8}
 import { Fragment } from 'react';
@@ -117,7 +117,7 @@ function Post() {
 
 ### 변수에 여러 엘리먼트 할당 {/*assigning-multiple-elements-to-a-variable*/}
 
-다른 엘리먼트와 마찬가지로 Fragment를 변수에 할당하고 props로 전달하는 등의 작업을 할 수 있습니다.
+다른 엘리먼트와 마찬가지로 `Fragment`를 변수에 할당하고 Props로 전달하는 등의 작업을 할 수 있습니다.
 
 ```js
 function CloseDialog() {
@@ -156,9 +156,9 @@ function DateRangePicker({ start, end }) {
 
 ---
 
-### Fragment 리스트 렌더링 {/*rendering-a-list-of-fragments*/}
+### `Fragment` 리스트 렌더링 {/*rendering-a-list-of-fragments*/}
 
-`<></>` 문법을 사용하는 대신 명시적으로 `Fragment`를 작성해야 하는 상황이 있습니다. [반복을 통해 여러 엘리먼트를 렌더링할 때](/learn/rendering-lists) 각 요소에 `key`를 할당해야 합니다. 반복 안에 엘리먼트가 Fragment인 경우 `key` 속성을 제공하기 위해 일반 JSX 엘리먼트 문법을 사용해야 합니다.
+`<></>` 문법을 사용하는 대신 명시적으로 `Fragment`를 작성해야 하는 상황이 있습니다. [반복을 통해 여러 엘리먼트를 렌더링할 때](/learn/rendering-lists) 각 요소에 `key`를 할당해야 합니다. 반복 안에 엘리먼트가 `Fragment`인 경우 `key` 속성을 제공하기 위해 일반 JSX 엘리먼트 문법을 사용해야 합니다.
 
 ```js {3,6}
 function Blog() {
@@ -171,7 +171,7 @@ function Blog() {
 }
 ```
 
-DOM을 검사하여 Fragment 자식 주위에 래퍼 엘리먼트가 없는지 확인할 수 있습니다.
+DOM을 검사하여 `Fragment` 자식 주위에 래퍼 엘리먼트가 없는 것을 확인할 수 있습니다.
 
 <Sandpack>
 

From d8e582151a30d1424a0dd1e698c9a6e236f63b93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Tue, 14 Jan 2025 13:23:12 +0900
Subject: [PATCH 35/46] ci: add `pull_request_target` triggers to workflow
 files

---
 .github/workflows/analyze.yml       |  1 +
 .github/workflows/site_lint.yml     |  2 ++
 .github/workflows/textlint_lint.yml | 10 ++++++++++
 .github/workflows/textlint_test.yml |  9 +++++++++
 4 files changed, 22 insertions(+)

diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml
index 555efe26b..f5d2041eb 100644
--- a/.github/workflows/analyze.yml
+++ b/.github/workflows/analyze.yml
@@ -2,6 +2,7 @@ name: Analyze Bundle
 
 on:
   pull_request:
+  pull_request_target:
   push:
     branches:
       - main # change this if your default branch is named differently
diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml
index 2b01231eb..139451d32 100644
--- a/.github/workflows/site_lint.yml
+++ b/.github/workflows/site_lint.yml
@@ -6,6 +6,8 @@ on:
       - main # change this if your default branch is named differently
   pull_request:
     types: [opened, synchronize, reopened]
+  pull_request_target:
+    types: [opened, synchronize, reopened]
 
 jobs:
   lint:
diff --git a/.github/workflows/textlint_lint.yml b/.github/workflows/textlint_lint.yml
index 8c15e1214..74a45b0e8 100644
--- a/.github/workflows/textlint_lint.yml
+++ b/.github/workflows/textlint_lint.yml
@@ -19,6 +19,16 @@ on:
       - 'textlint/**/*.js'
       - '.github/workflows/textlint_lint.yml'
 
+  pull_request_target:
+    types:
+      - opened
+      - synchronize
+      - reopened
+    paths:
+      - 'src/**/*.md'
+      - 'textlint/**/*.js'
+      - '.github/workflows/textlint_lint.yml'
+
 jobs:
   Lint:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/textlint_test.yml b/.github/workflows/textlint_test.yml
index 10af72be0..30cb94d5c 100644
--- a/.github/workflows/textlint_test.yml
+++ b/.github/workflows/textlint_test.yml
@@ -17,6 +17,15 @@ on:
       - 'textlint/**/*.js'
       - '.github/workflows/textlint_test.yml'
 
+  pull_request_target:
+    types:
+      - opened
+      - synchronize
+      - reopened
+    paths:
+      - 'textlint/**/*.js'
+      - '.github/workflows/textlint_test.yml'
+
 jobs:
   Test:
     runs-on: ubuntu-latest

From 63731840d06f6933b57b7d62730f2081fe2e4953 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Tue, 14 Jan 2025 13:51:55 +0900
Subject: [PATCH 36/46] docs: update `react-developer-tools.md`

---
 src/content/learn/react-developer-tools.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md
index f237cbcf1..983fbd188 100644
--- a/src/content/learn/react-developer-tools.md
+++ b/src/content/learn/react-developer-tools.md
@@ -1,38 +1,38 @@
 ---
-title: React Developer Tools
+title: React 개발자 도구
 ---
 
 <Intro>
 
-React Developer Tools를 사용하여 React [컴포넌트](/learn/your-first-component)를 검사하고 [props](/learn/passing-props-to-a-component)와 [state](/learn/state-a-components-memory)를 편집할 수 있으며 성능 문제를 식별할 수 있습니다.
+React 개발자 도구를 사용하여 React [컴포넌트](/learn/your-first-component)를 검사하고 [Props](/learn/passing-props-to-a-component)와 [State](/learn/state-a-components-memory)를 편집할 수 있으며 성능 문제를 식별할 수 있습니다.
 
 </Intro>
 
 <YouWillLearn>
 
-* React Developer Tools 설치 방법
+* React 개발자 도구 설치 방법
 
 </YouWillLearn>
 
 ## 브라우저 확장 프로그램 {/*browser-extension*/}
 
-React로 빌드된 웹 사이트를 디버깅하는 가장 쉬운 방법은 React Developer Tools 브라우저 확장 프로그램을 설치하는 것입니다. 널리 사용되는 여러 브라우저에서 사용할 수 있습니다.
+React로 빌드된 웹 사이트를 디버깅하는 가장 쉬운 방법은 React 개발자 도구 브라우저 확장 프로그램을 설치하는 것입니다. 널리 사용되는 여러 브라우저에서 사용할 수 있습니다.
 
 * [**Chrome**용으로 설치](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
 * [**Firefox**용으로 설치](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
 * [**Edge**용으로 설치](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil)
 
-설치가 완료되면 **React로 구축된** 사이트에 방문하면 _Components_ and _Profiler_ 패널이 표시됩니다.
+설치가 완료된 후 **React로 빌드된** 사이트에 방문하면 _Components_ and _Profiler_ 패널이 표시됩니다.
 
-![React Developer Tools extension](/images/docs/react-devtools-extension.png)
+![React 개발자 도구 확장 프로그램](/images/docs/react-devtools-extension.png)
 
 ### Safari 및 기타 브라우저 {/*safari-and-other-browsers*/}
-다른 브라우저(예: Safari)의 경우, [`react-devtools`](https://www.npmjs.com/package/react-devtools)를 npm package로 설치해야 합니다.
+다른 브라우저(예: Safari)의 경우, [`react-devtools`](https://www.npmjs.com/package/react-devtools)를 npm 패키지로 설치해야 합니다.
 ```bash
 # Yarn
 yarn global add react-devtools
 
-# Npm
+# npm
 npm install -g react-devtools
 ```
 
@@ -41,7 +41,7 @@ npm install -g react-devtools
 react-devtools
 ```
 
-다음으로 당신의 웹 사이트의 `<head>`의 `<script>` 태그를 통해 웹 사이트를 연결합니다.
+다음으로 웹 사이트의 `<head>`의 `<script>` 태그를 통해 웹 사이트를 연결합니다.
 ```html {3}
 <html>
   <head>

From 9ecff327c752bf4126fa89e033a364e09edf8480 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Tue, 14 Jan 2025 13:53:09 +0900
Subject: [PATCH 37/46] docs: update `Profiler.md`

---
 src/content/reference/react/Profiler.md   | 24 +++++++++++------------
 src/content/reference/react/components.md |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md
index 03c3e3174..c491864a3 100644
--- a/src/content/reference/react/Profiler.md
+++ b/src/content/reference/react/Profiler.md
@@ -4,7 +4,7 @@ title: <Profiler>
 
 <Intro>
 
-`<Profiler>`는 프로그래밍 방식으로 React 트리의 렌더링 성능을 측정할 수 있습니다.
+`<Profiler>`를 통해 React 트리의 렌더링 성능을 프로그래밍 방식으로 측정할 수 있습니다.
 
 ```js
 <Profiler id="App" onRender={onRender}>
@@ -33,16 +33,16 @@ title: <Profiler>
 #### Props {/*props*/}
 
 * `id`: 성능을 측정하는 UI 컴포넌트를 식별하기 위한 문자열입니다.
-* `onRender`: 프로파일링 된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 [`onRender` 콜백](#onrender-callback)입니다. 렌더링 된 내용과 소요된 시간에 대한 정보를 받고 있습니다.
+* `onRender`: 프로파일링된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 [`onRender` 콜백](#onrender-callback)입니다. 렌더링된 내용과 소요된 시간에 대한 정보를 받습니다.
 
 #### 주의 사항 {/*caveats*/}
 
-* 프로파일링은 추가적인 오버헤드를 더하기 때문에, **프로덕션 빌드에서는 기본적으로 비활성화가 되어있습니다.** 프로덕션 프로파일링을 사용하려면, [프로파일링 기능이 활성화된 특수한 프로덕션 빌드](https://fb.me/react-profiling)를 사용해야 합니다.
+* 프로파일링은 추가적인 오버헤드를 더하기 때문에, **프로덕션 빌드에서는 기본적으로 비활성화 되어있습니다.** 프로덕션 프로파일링을 사용하려면, [프로파일링 기능이 활성화된 특수한 프로덕션 빌드](https://fb.me/react-profiling)를 사용해야 합니다.
 ---
 
 ### `onRender` 콜백 {/*onrender-callback*/}
 
-React는 `onRender` 콜백을 렌더링 된 내용과 같이 호출합니다.
+React는 `onRender` 콜백을 렌더링된 내용과 같이 호출합니다.
 
 ```js
 function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
@@ -53,9 +53,9 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
 #### 매개변수 {/*onrender-parameters*/}
 
 * `id`: 커밋된 `<Profiler>` 트리의 문자열 `id` 프로퍼티입니다. 프로파일러를 다중으로 사용하고 있는 트리 내에서 어떤 부분이 커밋 되었는지 식별할 수 있도록 해줍니다.
-* `phase`: `"mount"`, `"update"` 혹은 `"nested-update"`. 트리가 최초로 마운트되었는지 또는 props, state 또는 hook 의 변경으로 인해 리렌더링 되었는지 알 수 있습니다.
-* `actualDuration`: 현재 업데이트에 대해 `<Profiler>`와 자식들을 렌더링하는데 소요된 시간(밀리초)입니다. 이는 하위 트리가 memoization을 얼마나 잘 사용하는지를 나타냅니다 (e.g. [`memo`](/reference/react/memo) 와 [`useMemo`](/reference/react/useMemo)). 많은 자식이 특정 props가 변경되는 경우에만 다시 리렌더링이 되어야 하므로 이상적으로는 이 값은 최초 마운트 이후에는 많이 감소해야 합니다.
-* `baseDuration`: 최적화 없이 전체 `<Profiler>` 하위트리에 대해 걸리는 시간을 추정하는 소요된 시간(밀리초)입니다. 트리에 있는 각 컴포넌트의 가장 최근 렌더링 시간을 합산하여 계산됩니다. 이 값은 최악의 렌더링 비용(예: 최초 마운트 또는 memoization이 없는 트리)을 추정합니다. `actualDuration` 과 비교하여 memoization이 작동하는지 확인합니다.
+* `phase`: `"mount"`, `"update"` 혹은 `"nested-update"`. 트리가 최초로 마운트되었는지 또는 Props, State, Hook의 변경으로 인해 리렌더링 되었는지 알 수 있습니다.
+* `actualDuration`: 현재 업데이트에 대해 `<Profiler>`와 자식들을 렌더링하는데 소요된 시간(밀리초)입니다. 이는 하위 트리가 메모이제이션(예: [`memo`](/reference/react/memo)와 [`useMemo`](/reference/react/useMemo))을 얼마나 잘 사용하는지를 나타냅니다. 많은 자식들이 특정 Props가 변경되는 경우에만 다시 렌더링되어야 하므로, 이상적으로는 이 값은 최초 마운트 이후에는 많이 감소해야 합니다.
+* `baseDuration`: 최적화 없이 전체 `<Profiler>` 하위 트리에 대해 걸리는 시간을 추정하는 소요된 시간(밀리초)입니다. 트리에 있는 각 컴포넌트의 가장 최근 렌더링 시간을 합산하여 계산됩니다. 이 값은 최악의 렌더링 비용(예: 최초 마운트 또는 메모이제이션이 없는 트리)을 추정합니다. `actualDuration`과 비교하여 메모이제이션이 작동하는지 확인합니다.
 * `startTime`: React가 현재 업데이트 렌더링을 시작한 시점에 대한 숫자 타임스탬프입니다.
 * `commitTime`: React가 현재 업데이트를 커밋한 시점에 대한 숫자 타임스탬프입니다. 이 값은 커밋된 모든 프로파일러 간에 공유되므로 원하는 경우 그룹화할 수 있습니다.
 
@@ -76,17 +76,17 @@ React 트리를 `<Profiler>` 컴포넌트로 감싸서 렌더링 성능을 측
 </App>
 ```
 
-트리 내의 컴포넌트가 업데이트를 커밋할 때마다 React가 호출하는 `onRender` 콜백(함수)와 UI 컴포넌트를 식별하기 위한 문자열 `id` (문자열) 두 개의 props가 요구됩니다.
+UI 컴포넌트를 식별하기 위한 `id` 문자열과 트리 내의 컴포넌트가 업데이트를 커밋할 때마다 React가 호출하는 `onRender` 콜백 함수 두 개의 Props가 요구됩니다.
 
 <Pitfall>
 
-프로파일링은 추가적인 오버헤드를 더하기 때문에, **프로덕션 빌드에서는 기본적으로 비활성화가 되어있습니다.** 프로덕션 프로파일링을 사용하려면, [프로파일링 기능이 활성화된 특수한 프로덕션 빌드](https://fb.me/react-profiling)를 사용해야 합니다.
+프로파일링은 추가적인 오버헤드를 더하기 때문에, **프로덕션 빌드에서는 기본적으로 비활성화 되어있습니다.** 프로덕션 프로파일링을 사용하려면, [프로파일링 기능이 활성화된 특수한 프로덕션 빌드](https://fb.me/react-profiling)를 사용해야 합니다.
 
 </Pitfall>
 
 <Note>
 
-`<Profiler>`는 프로그래밍 방식으로 측정값들을 모아줍니다. 상호작용할 수 있는 프로파일러를 찾고 있다면, [React Developer Tools](/learn/react-developer-tools)의 프로파일러 탭을 사용해 보세요. 브라우저 확장 프로그램으로써 유사한 기능을 제공합니다.
+`<Profiler>`는 프로그래밍 방식으로 측정값들을 모아줍니다. 상호작용할 수 있는 프로파일러를 찾고 있다면, [React 개발자 도구](/learn/react-developer-tools)의 프로파일러 탭을 사용해 보세요. 브라우저 확장 프로그램으로써 유사한 기능을 제공합니다.
 
 </Note>
 
@@ -94,7 +94,7 @@ React 트리를 `<Profiler>` 컴포넌트로 감싸서 렌더링 성능을 측
 
 ### 애플리케이션의 부분별 측정 {/*measuring-different-parts-of-the-application*/}
 
-`<Profiler>` 컴포넌트를 여러 개 사용하여 애플리케이션을 부분별로 측정할 수 있습니다.
+`<Profiler>` 컴포넌트를 여러개 사용하여 애플리케이션을 부분별로 측정할 수 있습니다.
 
 ```js {5,7}
 <App>
@@ -125,7 +125,7 @@ React 트리를 `<Profiler>` 컴포넌트로 감싸서 렌더링 성능을 측
 </App>
 ```
 
-`<Profiler>`는 가벼운 컴포넌트이지만 사용할 때마다 애플리케이션에 약간의 CPU 및 메모리 오버헤드가 추가되기 때문에 필요할 때만 사용해야 합니다.
+`<Profiler>`는 가벼운 컴포넌트이지만 사용할 때마다 애플리케이션에 약간의 CPU 및 메모리 오버헤드를 추가하기 때문에 필요할 때만 사용해야 합니다.
 
 ---
 
diff --git a/src/content/reference/react/components.md b/src/content/reference/react/components.md
index 380ba16f5..7f361e734 100644
--- a/src/content/reference/react/components.md
+++ b/src/content/reference/react/components.md
@@ -13,7 +13,7 @@ React는 JSX에서 사용할 수 있는 몇 가지 내장 컴포넌트를 제공
 ## 내장 컴포넌트 {/*built-in-components*/}
 
 * [`<Fragment>`](/reference/react/Fragment) 또는 `<>...</>` 로 표기하며, 여러 JSX 노드를 함께 그룹화할 수 있습니다.
-* [`<Profiler>`](/reference/react/Profiler)를 통해 React 트리의 렌더링 성능을 프로그래밍적으로 측정할 수 있습니다.
+* [`<Profiler>`](/reference/react/Profiler)를 통해 React 트리의 렌더링 성능을 프로그래밍 방식으로 측정할 수 있습니다.
 * [`<Suspense>`](/reference/react/Suspense)를 통해 자식 컴포넌트를 로딩하는 동안 Fallback을 표시할 수 있습니다.
 * [`<StrictMode>`](/reference/react/StrictMode)를 통해 초기에 버그를 찾는 데 도움이 되는 추가 개발 전용 검사를 사용할 수 있습니다.
 

From 61c2339ca917f5fbeaa2821d1617c623fac5b1de Mon Sep 17 00:00:00 2001
From: "yunu.kang" <byungseon.kang@gmail.com>
Date: Tue, 14 Jan 2025 14:06:07 +0900
Subject: [PATCH 38/46] docs: update useImperativeHandle.md (#1123)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# `useImperativeHandle.md` 수정

`useImperativeHandle.md`의 번역이 되지 않은 부분을 일부 수정했습니다.

## 필수 확인 사항

- [x] [기여자 행동 강령 규약<sup>Code of
Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md)
- [x] [기여
가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md)
- [x] [공통 스타일 가이드<sup>Universal Style
Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md)
- [x] [번역을 위한 모범 사례<sup>Best Practices for
Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md)
- [x] [번역 용어 정리<sup>Translate
Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md)
- [x] [`textlint` 가이드<sup>Textlint
Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md)
- [x] [맞춤법 검사<sup>Spelling
Check</sup>](https://nara-speller.co.kr/speller/)

## 선택 확인 사항

- [x] 번역 초안 작성<sup>Draft Translation</sup>
- [ ] 리뷰 반영<sup>Resolve Reviews</sup>

---------

Co-authored-by: 루밀LuMir <rpfos@naver.com>
---
 src/content/reference/react/useImperativeHandle.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md
index 0560034b1..d12d77201 100644
--- a/src/content/reference/react/useImperativeHandle.md
+++ b/src/content/reference/react/useImperativeHandle.md
@@ -38,17 +38,15 @@ function MyInput({ ref }) {
 
 #### 매개변수 {/*parameters*/}
 
-* `ref`: [`forwardRef` 렌더링 함수](/reference/react/forwardRef#render-function)에서 두 번째 인자로 받은 ref입니다.
+* `ref`: `MyInput` 컴포넌트의 prop으로 받은 `ref`입니다.
 
-* `ref`: The `ref` you received as a prop to the `MyInput` component. {/*TODO*/}
-
-* `createHandle`: 인자가 없고 노출하려는 ref 핸들을 반환하는 함수입니다. 해당 ref 핸들은 어떠한 유형이든 될 수 있습니다. 일반적으로 노출하려는 메서드가 있는 객체를 반환합니다.
+* `createHandle`: 인수가 없고 노출하려는 ref 핸들을 반환하는 함수입니다. 해당 ref 핸들은 어떠한 유형이든 될 수 있습니다. 일반적으로 노출하려는 메서드가 있는 객체를 반환합니다.
 
 * **(선택적)** `dependencies`: `createHandle` 코드 내에서 참조하는 모든 반응형 값을 나열한 목록입니다. 반응형 값은 props, state 및 컴포넌트 내에서 직접 선언한 모든 변수와 함수를 포함합니다. [React에 대한 린터를 구성한 경우](/learn/editor-setup#linting) 모든 반응형 값이 올바르게 의존성으로 지정되었는지 확인합니다. 의존성 목록은 항상 일정한 수의 항목을 가지고 `[dep1, dep2, dep3]`와 같이 인라인으로 작성되어야 합니다. React는 각 의존성을 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 비교를 사용하여 이전 값과 비교합니다. 리렌더링으로 인해 일부 의존성이 변경되거나 이 인수를 생략한 경우 `createHandle`함수가 다시 실행되고 새로 생성된 핸들이 ref에 할당됩니다.
 
 <Note>
 
-Starting with React 19, [`ref` is available a prop.](/blog/2024/12/05/react-19#ref-as-a-prop) In React 18 and earlier, it was necessary to get the `ref` from [`forwardRef`.](/reference/react/forwardRef)
+React 19 부터 [`ref`를 prop으로 받을 수 있습니다.](/blog/2024/12/05/react-19#ref-as-a-prop) React 18 또는 그 이전 버전에서는 `ref`를 받기위해 [`forwardRef`](/reference/react/forwardRef)를 사용해야 합니다.
 
 </Note>
 

From b3ea12c6a7031e85f67d996dab924131f6303c76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Tue, 14 Jan 2025 15:32:20 +0900
Subject: [PATCH 39/46] docs: update `keeping-components-pure.md`

---
 src/content/learn/keeping-components-pure.md | 80 ++++++++++----------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index a7d9a6f29..e01007118 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -1,17 +1,17 @@
 ---
-title: 컴포넌트 순수하게 유지하기
+title: 컴포넌트를 순수하게 유지하기
 ---
 
 <Intro>
 
-자바스크립트 일부 함수는 *순수*합니다. 순수 함수는 오직 연산만을 수행합니다. 컴포넌트를 엄격하게 순수함수로 작성하면 코드베이스가 점점 커지더라도 예상밖의 동작이나 당황케하는 버그를 피할 수 있습니다. 이러한 이점들을 취하기 위해서는 몇가지 규칙을 따라야합니다.
+일부 자바스크립트 함수는 *순수*합니다. 순수 함수는 오직 연산만을 수행합니다. 컴포넌트를 엄격하게 순수함수로 작성하면 코드베이스가 점점 커지더라도 예상밖의 동작이나 당황케하는 버그를 피할 수 있습니다. 이러한 이점들을 취하기 위해서는 몇가지 규칙을 따라야합니다.
 
 </Intro>
 
 <YouWillLearn>
 
 * 순수성이란 무엇인지 그리고 어떻게 버그를 피하도록 도울 건지 배웁니다.
-* 렌더 단계에서 변화를 유지하면서 컴포넌트를 순수하게 유지할 것인지 배웁니다.
+* 렌더링 단계에서 변화를 유지하면서 컴포넌트를 순수하게 유지할 것인지 배웁니다.
 * 엄격 모드를 어떻게 활용해서 컴포넌트에 실수를 발견할 수 있는지 배웁니다.
 
 </YouWillLearn>
@@ -21,17 +21,17 @@ title: 컴포넌트 순수하게 유지하기
 컴퓨터 과학에서(특히 함수형 프로그래밍의 세계에서는) [순수 함수](https://wikipedia.org/wiki/Pure_function)는 다음과 같은 특징을 지니고 있는 함수입니다.
 
 * **자신의 일에 집중합니다.** 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않습니다.
-* **같은 입력, 같은 출력** 같은 입력이 주어졌다면 순수함수는 같은 결과를 반환해야 합니다.
+* **같은 입력, 같은 출력.** 같은 입력이 주어졌다면 순수함수는 같은 결과를 반환합니다.
 
-아마 순수 함수 중에 이 함수는 수학의 공식처럼 익숙할 것입니다.
+여러분은 이미 순수 함수의 한 예로 수학 공식에 익숙할 수도 있습니다.
 
 이 수학 공식을 생각해보세요. <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>.
 
-만약 <Math><MathI>x</MathI> = 2이라면</Math> 항상 <Math><MathI>y</MathI> = 4입니다.</Math>
+만약 <Math><MathI>x</MathI> = 2</Math>이라면 항상 <Math><MathI>y</MathI> = 4</Math>입니다.
 
-만약 <Math><MathI>x</MathI> = 3이라면</Math> 항상<Math><MathI>y</MathI> = 6입니다.</Math>
+만약 <Math><MathI>x</MathI> = 3</Math>이라면 항상 <Math><MathI>y</MathI> = 6</Math>입니다.
 
-만약 <Math><MathI>x</MathI> = 3이라면</Math>, 그날의 시간이나 주식 시장의 상태에 따라서 <MathI>y</MathI>가 <Math>9</Math>이거나 <Math>–1</Math>이거나 <Math>2.5</Math>가 되지 않습니다.
+만약 <Math><MathI>x</MathI> = 3</Math>이라면, 그날의 시간이나 주식 시장의 상태에 따라서 <MathI>y</MathI>가 <Math>9</Math>이거나 <Math>–1</Math>이거나 <Math>2.5</Math>가 되지 않습니다.
 
 만약 <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> 그리고 <Math><MathI>x</MathI> = 3</Math>이라면, <MathI>y</MathI>는 _항상_ <Math>6</Math>입니다.
 
@@ -45,7 +45,7 @@ function double(number) {
 
 위 예시에서, `double`은 **순수 함수**입니다. `3`을 넘긴다면, `6`을 항상 반환합니다.
 
-React는 이러한 컨셉을 기반으로 설계되었습니다. **React는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정합니다.** 이러한 가정은 작성되는 React 컴포넌트에 같은 입력이 주어진다면 반드시 같은 JSX를 반환한다는 것을 의미합니다.
+React는 이러한 개념을 기반으로 설계되었습니다. **React는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정합니다.** 이러한 가정은 작성되는 React 컴포넌트에 같은 입력이 주어진다면 반드시 같은 JSX를 반환한다는 것을 의미합니다.
 
 <Sandpack>
 
@@ -81,13 +81,13 @@ export default function App() {
 
 수학 공식처럼 말입니다.
 
-컴포넌트를 마치 레시피처럼 생각할 수 있습니다. 만약 레시피를 그대로 따르고 요리하는 동안 새로운 재료를 도입하지 않는 이상 매번 새로운 요리를 만들 수 있습니다. 그 "요리"는 React가 [렌더](/learn/render-and-commit)하는데 컴포넌트가 제공하는 JSX입니다.
+컴포넌트를 마치 레시피라고 생각할 수 있습니다. 만약 레시피를 그대로 따르고 요리하는 동안 새로운 재료를 추가하지 않으면, 매번 동일한 요리를 만들 수 있습니다. 그 "요리"는 React가 [렌더링](/learn/render-and-commit)하는데 컴포넌트가 제공하는 JSX입니다.
 
 <Illustration src="/images/docs/illustrations/i_puritea-recipe.png" alt="A tea recipe for x people: take x cups of water, add x spoons of tea and 0.5x spoons of spices, and 0.5x cups of milk" />
 
 ## 사이드 이펙트: 의도하지(않은) 결과 {/*side-effects-unintended-consequences*/}
 
-React의 렌더링 과정은 항상 순수해야 합니다. 컴포넌트는 렌더링하기 전에 존재했던 객체나 변수들을 *변경*하지 말고 컴포넌트를 순수하지 않도록하는 JSX만 *반환*해야합니다.
+React의 렌더링 과정은 항상 순수해야 합니다. 컴포넌트는 JSX만 반환해야 하며, 렌더링 이전에 존재했던 객체나 변수를 변경해서는 안 됩니다. 그렇게 하면 컴포넌트가 순수하지 않습니다!
 
 이러한 규칙을 위반하는 컴포넌트입니다.
 
@@ -97,7 +97,7 @@ React의 렌더링 과정은 항상 순수해야 합니다. 컴포넌트는 렌
 let guest = 0;
 
 function Cup() {
-  // 나쁜 지점: 이미 존재했던 변수를 변경하고 있다!
+  // 나쁜 지점: 이미 존재했던 변수를 변경하고 있습니다!
   guest = guest + 1;
   return <h2>Tea cup for guest #{guest}</h2>;
 }
@@ -115,11 +115,11 @@ export default function TeaSet() {
 
 </Sandpack>
 
-이 컴포넌트는 컴포넌트 바깥에 선언된 `guest`라는 변수를 읽고 수정하고 있습니다. 이건 **컴포넌트가 여러번 불리면 다른 JSX를 생성한다는 것을 의미합니다!** 그리고 더욱이 _다른_ 컴포넌트 가 `guest`를 읽었다면 언제 렌더링 되었는지에 따라 그 컴포넌트 또한 다른 JSX를 생성할 겁니다! 이건 예측할 수 없습니다.
+이 컴포넌트는 컴포넌트 바깥에 선언된 `guest`라는 변수를 읽고 수정하고 있습니다. 이건 **컴포넌트를 여러번 호출하면 다른 JSX를 생성한다는 것을 의미합니다!** 그리고 더욱이 _다른_ 컴포넌트 가 `guest`를 읽었다면 언제 렌더링 되었는지에 따라 그 컴포넌트 또한 다른 JSX를 생성할 겁니다! 이건 예측할 수 없습니다.
 
-우리의 공식으로 다시 돌아가봅시다 <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>, 이제 <Math><MathI>x</MathI> = 2</Math>라 하더라도 우리는 <Math><MathI>y</MathI> = 4</Math>를 믿을 수 없습니다. 우리의 테스트는 실패하고 사용자는 당황할 것이고 비행기는 추락할지도 모릅니다-이것이 얼마나 혼란스러운 버그로 이어지는지를 볼 수 있습니다!
+우리의 공식으로 다시 돌아가봅시다 <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>, 이제 <Math><MathI>x</MathI> = 2</Math>라 하더라도 우리는 <Math><MathI>y</MathI> = 4</Math>를 믿을 수 없습니다. 우리의 테스트는 실패하고 사용자는 당황할 것이고 비행기는 추락할지도 모릅니다. 이것이 얼마나 혼란스러운 버그로 이어지는지를 볼 수 있습니다!
 
-[`guest` 변수를 대신 프로퍼티로 넘겨](/learn/passing-props-to-a-component) 이 컴포넌트를 고칠 수 있습니다.
+대신, [`guest` 변수를 프로퍼티로 넘겨](/learn/passing-props-to-a-component) 이 컴포넌트를 고칠 수 있습니다.
 
 <Sandpack>
 
@@ -141,7 +141,7 @@ export default function TeaSet() {
 
 </Sandpack>
 
-이제 JSX가 반환되는 것은 오직 `guest` 프로퍼티에 의존하기 때문에 컴포넌트는 순수합니다.
+이제 JSX가 반환하는 것은 오직 `guest` 프로퍼티에만 의존하기 때문에 컴포넌트는 순수합니다.
 
 일반적으로 컴포넌트가 특정 순서로 렌더링할 것으로 기대하면 안됩니다. <Math><MathI>y</MathI> = 5<MathI>x</MathI></Math> 전후에 <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>을 호출한다면 문제가 없습니다. 두 공식은 서로 독립적으로 풀립니다. 마찬가지로 각 컴포넌트는 렌더링 중에 다른 컴포넌트와 같이 서로 의존하지 말고 "스스로 생각"해야 합니다. 렌더링은 학교 숙제와 같습니다. 각 컴포넌트는 자체적으로 JSX를 연산해야 합니다!
 
@@ -149,21 +149,21 @@ export default function TeaSet() {
 
 #### 엄격 모드로 순수하지 않은 연산을 감지 {/*detecting-impure-calculations-with-strict-mode*/}
 
-아직 다 활용하지 않았을 수도 있지만 React에는 렌더링하면서 읽을 수 있는 세 가지 종류의 입력 요소가 있습니다. [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), 그리고 [context](/learn/passing-data-deeply-with-context). 이러한 입력 요소는 항상 읽기전용으로 취급해야 합니다.
+아직 전부 활용하지 않았을 수도 있지만 React에는 렌더링하면서 읽을 수 있는 세 가지 종류의 입력 요소가 있습니다. [Props](/learn/passing-props-to-a-component), [State](/learn/state-a-components-memory), 그리고 [Context](/learn/passing-data-deeply-with-context). 이러한 입력 요소는 항상 읽기전용으로 취급해야 합니다.
 
-사용자의 입력에 따라 무언가를 _변경_ 하려는 경우, 변수를 직접 수정하는 대신 [set state](/learn/state-a-components-memory)를 활용해야 합니다. 컴포넌트가 렌더링되는 동안엔 기존 변수나 개체를 변경하면 안됩니다.
+사용자의 입력에 따라 무언가를 _변경_ 하려는 경우, 변수를 직접 수정하는 대신 [State](/learn/state-a-components-memory)를 설정해야 합니다. 컴포넌트가 렌더링되는 동안엔 기존 변수나 객체를 변경하면 안됩니다.
 
 React는 개발 중에 각 컴포넌트의 함수를 두 번 호출하는 "엄격 모드"를 제공합니다. **컴포넌트 함수를 두 번 호출함으로써, 엄격 모드는 이러한 규칙을 위반하는 컴포넌트를 찾는데 도움을 줍니다.**
 
-원래 예시에서 "Guest #1", "Guest #2", 그리고 "Guest #3" 대신 "Guest #2", "Guest #4", 그리고 "Guest #6"이 어떻게 표시되었는지 확인해보세요. 원래 함수는 순수하지 않았기에 두 번 호출하는 것이 이 부분을 망가트렸습니다. 그러나 고정된 순수 버전은 함수가 매번 두 번 호출되더라도 동작합니다. **순수 함수는 연산만 하므로 두 번 호출해도 아무 것도 변경되지 않습니다.**--`double(2)`을 두번 호출하는게 반환된 것을 변경하지 않고 <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>을 두 번 푸는게 <MathI>y</MathI>의 답을 바꾸지 않는 것 처럼, 항상 같은 입력이면 같은 출력입니다.
+원래 예시에서 "Guest #1", "Guest #2", "Guest #3" 대신 "Guest #2", "Guest #4", "Guest #6"이 어떻게 표시되었는지 확인해보세요. 원래 함수는 순수하지 않았기에 두 번 호출하는 것이 이 부분을 망가트렸습니다. 그러나 수정된 순수 버전은 함수가 매번 두 번 호출되더라도 동작합니다. **순수 함수는 연산만 하므로 두 번 호출해도 아무 것도 변경하지 않습니다.** `double(2)`를 두 번 호출하는게 반환된 것을 변경하지 않고 <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math>을 두 번 푸는게 <MathI>y</MathI>의 답을 바꾸지 않는 것 처럼, 항상 같은 입력이면 같은 출력입니다.
 
 엄격 모드는 프로덕션에 영향을 주지 않기 때문에 사용자의 앱 속도가 느려지지 않습니다. 엄격 모드를 사용하기 위해서, 최상단 컴포넌트를 `<React.StrictMode>`로 감쌀 수 있습니다. 몇몇 프레임워크는 기본적으로 이 문법을 사용합니다.
 
 </DeepDive>
 
-### 지역 변형: 컴포넌트의 작은 비밀 {/*local-mutation-your-components-little-secret*/}
+### 지역 변경: 컴포넌트의 작은 비밀 {/*local-mutation-your-components-little-secret*/}
 
-위의 예시에서 문제는 렌더링하는 동안 컴포넌트가 기존 변수를 변경했다는 것입니다. 이것은 "**변형**"으로 불리워서 조금 무섭게 들립니다. 순수 함수는 함수 스코프 밖의 변수나 호출 전에 생성된 객체를 변경하지 않습니다.
+위 예시에서의 문제는 렌더링하는 동안 컴포넌트가 기존 변수를 변경했다는 것입니다. 이것은 "**변경<sup>Mutation</sup>**"으로 불리워서 조금 무섭게 들립니다. 순수 함수는 함수 스코프 밖의 변수나 호출 전에 생성된 객체를 변경하지 않습니다.
 
 그러나, **렌더링하는 동안 _그냥_ 만든 변수와 객체를 변경하는 것은 전혀 문제가 없습니다.** 이번 예시에서는, `[]` 배열을 만들고, `cups` 변수에 할당하고, 컵 한 묶음을 `push` 할 것입니다.
 
@@ -185,15 +185,15 @@ export default function TeaGathering() {
 
 </Sandpack>
 
-만약 `cups` 변수나 `[]` 배열이 `TeaGathering`의 바깥에서 생성되었다면 큰 문제가 될 겁니다! 항목을 해당 배열에 푸시하여 _기존_ 객체를 변경할 수 있습니다.
+만약 `cups` 변수나 `[]` 배열이 `TeaGathering`의 바깥에서 생성되었다면 큰 문제가 될 겁니다! 항목을 해당 배열에 `push`하여 _기존_ 객체를 변경할 수 있습니다.
 
-하지만, `TeaGathering`안에 _동일한 렌더링중에_ 생성되었기 때문에 괜찮습니다. `TeaGathering`밖에 어떤 코드도 이 현상이 벌어졌다는 것조차 모를 겁니다. 이 현상은 **"지역 변형"** 이라 불립니다 - 이 컴포넌트의 작은 비밀 같은 거죠.
+하지만 이것은 괜찮습니다. 왜냐하면 그것들은 `TeaGathering` 내부에서, 같은 렌더링 동안 생성했기 때문입니다. `TeaGathering` 외부의 어떤 코드도 이 현상이 발생했다는 사실을 알 수 없습니다. 이를 **"지역 변경"** 이라 하며, 이는 컴포넌트의 작은 비밀과도 같습니다.
 
-## 부작용을 _일으킬 수 있는_ 지점 {/*where-you-_can_-cause-side-effects*/}
+## 사이드 이펙트를 _일으킬 수 있는_ 지점 {/*where-you-_can_-cause-side-effects*/}
 
-함수형 프로그래밍은 순수성에 크게 의존하지만, 언젠가는, 어딘가에서, _무언가가_ 바뀌어야 합니다. 그것이 프로그래밍의 요점입니다! 이러한 변화들-화면을 업데이트하고, 애니메이션을 시작하고, 데이터를 변경하는 것을 **사이드 이펙트**라고 합니다. 렌더링중에 발생하는 것이 아니라 _"사이드에서,"_ 발생하는 현상입니다.
+함수형 프로그래밍은 순수성에 크게 의존하지만, 언젠가는, 어딘가에서, _무언가가_ 바뀌어야 합니다. 그것이 프로그래밍의 요점입니다! 화면을 업데이트하고, 애니메이션을 시작하고, 데이터를 변경하는 이러한 변화들을 **사이드 이펙트**라고 합니다. 렌더링중에 발생하는 것이 아니라 _"사이드에서"_ 발생하는 현상입니다.
 
-React에선, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/responding-to-events)에 포함됩니다.** 이벤트 핸들러는 React가 일부 작업을 수행할 때 반응하는 기능입니다-예를 들면 버튼을 클릭할 때처럼 말이죠. 이벤트 핸들러가 컴포넌트 _내부에_ 정의되었다 하더라도 렌더링 _중에는_ 실행되지 않습니다! **그래서 이벤트 핸들러는 순수할 필요가 없습니다.**
+React에서, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/responding-to-events)에 포함됩니다.** 이벤트 핸들러는 React가 일부 작업을 수행할 때 반응하는 기능입니다. 예를 들면 버튼을 클릭할 때처럼 말이죠. 이벤트 핸들러가 컴포넌트 _내부에_ 정의되었다 하더라도 렌더링 _중에는_ 실행되지 않습니다! **그래서 이벤트 핸들러는 순수할 필요가 없습니다.**
 
 다른 옵션을 모두 사용했지만 사이드 이펙트에 적합한 이벤트 핸들러를 찾을 수 없는 경우에도, 컴포넌트에서 [`useEffect`](/reference/react/useEffect) 호출을 사용하여 반환된 JSX에 해당 이벤트 핸들러를 연결할 수 있습니다. 이것은 React에게 사이드 이펙트가 허용될 때 렌더링 후 나중에 실행하도록 지시합니다. **그러나 이 접근 방식이 마지막 수단이 되어야 합니다.**
 
@@ -205,7 +205,7 @@ React에선, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/respon
 
 순수 함수를 작성하려면 약간의 습관과 훈련이 필요합니다. 그러나 이건 또한 놀라운 기회를 열어줍니다.
 
-* 컴포넌트는 다른 환경에서도 실행될 수 있습니다- 예를 들면 서버에서 말이죠! 동일한 입력에 대해 동일한 결과를 반환하기 때문에 하나의 컴포넌트는 많은 사용자 요청을 처리할 수 있습니다.
+* 컴포넌트는 다른 환경에서도 실행될 수 있습니다. 예를 들면 서버에서 말이죠! 동일한 입력에 대해 동일한 결과를 반환하기 때문에 하나의 컴포넌트는 많은 사용자 요청을 처리할 수 있습니다.
 * 입력이 변경되지 않은 컴포넌트 [렌더링을 건너뛰어](/reference/react/memo) 성능을 향상시킬 수 있습니다. 순수 함수는 항상 동일한 결과를 반환하므로 캐시하기에 안전합니다.
 * 깊은 컴포넌트 트리를 렌더링하는 도중에 일부 데이터가 변경되는 경우 React는 오래된 렌더링을 완료하는 데 시간을 낭비하지 않고 렌더링을 다시 시작할 수 있습니다. 순수함은 언제든지 연산을 중단하는 것을 안전하게 합니다.
 
@@ -216,12 +216,12 @@ React에선, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/respon
 <Recap>
 
 * 컴포넌트는 순수해야만 합니다. 이것은 두가지를 의미합니다.
-  * **자신의 일에 집중합니다.** 렌더링전에 존재했던 객체나 변수를 변경하지 않아야 합니다.
-  * **같은 입력, 같은 결과물.** 입력이 같을 경우, 컴포넌트는 항상 같은 JSX를 반환해야 합니다.
+  * **자신의 일에 집중합니다.** 렌더링 전에 존재했던 객체나 변수를 변경하지 않아야 합니다.
+  * **같은 입력, 같은 출력.** 입력이 같을 경우, 컴포넌트는 항상 같은 JSX를 반환해야 합니다.
 * 렌더링은 언제든지 발생할 수 있으므로 컴포넌트는 서로의 렌더링 순서에 의존하지 않아야 합니다.
-* 컴포넌트가 렌더링을 위해 사용되는 입력을 변형해서는 안 됩니다. 여기에는 Props, 상태, 그리고 컨텍스트가 포함됩니다. 화면을 업데이트하려면 기존 객체를 변환하는 대신 [상태를 "설정"](/learn/state-a-components-memory)하십시오.
-* 반환하는 JSX에서 컴포넌트의 로직을 표현하기 위해 노력하십시오. "무언가를 변경"해야 할 경우 일반적으로 이벤트 핸들러에서 변경하고 싶을 것입니다. 마지막 수단으로 `useEffect`를 사용할 수 있습니다.
-* 순수 함수를 작성하는 것은 약간의 연습이 필요하지만, React 패러다임의 힘을 풀어줍니다.
+* 컴포넌트가 렌더링을 위해 사용하는 입력을 변경해서는 안됩니다. 여기에는 Props, State, Context가 포함됩니다. 화면을 업데이트하려면 기존 객체를 변경하는 대신 [State를 "설정"](/learn/state-a-components-memory)하세요.
+* 반환하는 JSX에서 컴포넌트의 로직을 표현하기 위해 노력하세요. "무언가를 변경"해야 할 경우 일반적으로 이벤트 핸들러에서 변경하고 싶을 것입니다. 마지막 수단으로 `useEffect`를 사용할 수 있습니다.
+* 순수 함수를 작성하는 것은 약간의 연습이 필요하지만, React 패러다임의 힘을 발휘합니다.
 
 </Recap>
 
@@ -299,7 +299,7 @@ body > * {
 
 <Solution>
 
-`className`을 연산하고 렌더 출력에 포함해서 이 컴포넌트를 고칠 수 있습니다.
+`className`을 연산하고 렌더링 출력에 포함해서 이 컴포넌트를 고칠 수 있습니다.
 
 <Sandpack>
 
@@ -360,7 +360,7 @@ body > * {
 
 </Sandpack>
 
-이 예에서는 사이드 이펙트(DOM 수정)는 전혀 필요하지 않았습니다. JSX만 반환하면 됩니다.
+이 예시에서는 사이드 이펙트(DOM 수정)가 전혀 필요하지 않았습니다. JSX만 반환하면 됩니다.
 
 </Solution>
 
@@ -473,7 +473,7 @@ h1 { margin: 5px; font-size: 18px; }
 
 <Solution>
 
-문제는 `Profile` 컴포넌트가 기존 변수인 `currentPerson`를 수정하고 `Header` 및 `Avatar` 컴포넌트가 이 변수를 읽는다는 점이다. 이것은 *세 가지 모두*를 순수하지 않게 만들고 예측하기 어렵게 만듭니다.
+문제는 `Profile` 컴포넌트가 기존 변수인 `currentPerson`를 수정하고 `Header` 및 `Avatar` 컴포넌트가 이 변수를 읽는다는 점입니다. 이것은 *세 가지 모두*를 순수하지 않게 만들고 예측하기 어렵게 만듭니다.
 
 버그를 수정하려면 `currentPerson` 변수를 제거하세요. 대신 Props를 통해 `Profile`의 모든 정보를 `Header` 및 `Avatar`로 전달하세요. 두 컴포넌트에 `person` 프로퍼티를 추가해서 끝까지 전달해야 합니다.
 
@@ -569,7 +569,7 @@ h1 { margin: 5px; font-size: 18px; }
 
 </Sandpack>
 
-React는 컴포넌트 함수가 특정 순서로 실행된다는 것을 보장하지 않기 때문에 변수를 설정해서 컴포넌트 함수간에 통신할 수 없습니다. 모든 커뮤니케이션은 프로퍼티를 통해 이루어져야 합니다.
+React는 컴포넌트 함수가 특정 순서로 실행된다는 것을 보장하지 않기 때문에 변수를 설정해서 컴포넌트 함수간에 소통할 수 없습니다. 모든 소통은 프로퍼티를 통해 이루어져야 합니다.
 
 </Solution>
 
@@ -673,9 +673,9 @@ li {
 
 <Solution>
 
-시계가 업데이트될 때마다 "Create story"가 _두 번_ 추가됩니다. 이는 렌더링 중에 변형이 있음을 암시합니다--엄격 모드는 컴포넌트를 두 번 호출하여 이러한 문제를 더 눈에 띄 만들도록 해줍니다.
+시계가 업데이트될 때마다 "Create story"가 _두 번_ 추가됩니다. 이는 렌더링 중에 변경이 있음을 암시합니다. 엄격 모드는 컴포넌트를 두 번 호출하여 이러한 문제를 더 눈에 띄 만들도록 해줍니다.
 
-`StoryTray` 함수는 순수하지 않습니다. 전달된 `stories` 배열(프로퍼티!)에서 `push`를 호출하면 `StroyTray`가 렌더링을 시작하기 _전에_ 객체를 변경합니다. 이로 인해 버그가 발생하고 예측하기가 매우 어렵습니다..
+`StoryTray` 함수는 순수하지 않습니다. 전달된 `stories` 배열(Prop)에서 `push`를 호출하면 `StroyTray`가 렌더링을 시작하기 _전에_ 객체를 변경합니다. 이로 인해 버그가 발생하고 예측하기가 매우 어렵습니다.
 
 가장 간단한 해결 방법은 배열을 전혀 건드리지 않고 "Create Story"를 별도로 렌더링하는 것입니다.
 
@@ -853,9 +853,9 @@ li {
 
 </Sandpack>
 
-이 코드는 변경을 로컬로 유지하고 렌더링 함수를 순수하게 만듭니다. 그러나 여전히 조심해야 합니다. 예를 들어 배열의 기존 항목을 변경하려고 하면 해당 항목도 복사해야 합니다.
+이 코드는 지역 변경으로 유지하고 렌더링 함수를 순수하게 만듭니다. 그러나 여전히 조심해야 합니다. 예를 들어 배열의 기존 항목을 변경하려고 하면 해당 항목도 복사해야 합니다.
 
-배열에서 어떤 연산이 변형을 일으키는지, 어떤 작업이 그렇지 않은지를 기억하는 것이 유용합니다. 예를 들어 `push`, `pop`, `reverse` 그리고 `sort`는 기존 배열을 변경시키지만 `slice`, `filter`, 그리고 `map`은 새로운 배열을 만듭니다.
+배열에서 어떤 연산이 변경을 일으키는지, 어떤 작업이 그렇지 않은지를 기억하는 것이 유용합니다. 예를 들어 `push`, `pop`, `reverse`, `sort`는 기존 배열을 변경하지만 `slice`, `filter`, `map`은 새로운 배열을 만듭니다.
 
 </Solution>
 

From e91faf811afcb68ec626103206cc30268e8ea4bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Tue, 14 Jan 2025 15:38:31 +0900
Subject: [PATCH 40/46] docs: update `react/index.md`

---
 src/content/reference/react/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index e8245b21b..0b28853f6 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -4,7 +4,7 @@ title: React 참고서 개요
 
 <Intro>
 
-이 섹션은 React와 관련된 작업에 대한 상세한 참고서를 제공합니다. React에 대한 소개는 [학습](/learn) 섹션을 참조하세요.
+이 섹션은 React와 관련된 작업에 대한 상세한 참고서를 제공합니다. React에 대한 소개는 [학습하기](/learn) 섹션을 참고하세요.
 
 </Intro>
 

From fd135009b0d97fd0c235617a1c54a0df670a3ef6 Mon Sep 17 00:00:00 2001
From: jeekim <80810728+jnkeniaem@users.noreply.github.com>
Date: Tue, 14 Jan 2025 18:43:47 +0900
Subject: [PATCH 41/46] docs: update useDeferredValue.md (#1124)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://github.com/reactjs/ko.react.dev/issues/1121

<!--
  PR을 보내주셔서 감사합니다! 여러분과 같은 기여자들이 React를 더욱 멋지게 만듭니다!

  기존 이슈와 관련된 PR이라면, 아래에 이슈 번호를 추가해주세요.
-->

# useDeferredValue 페이지의 매개변수 및 주의 사항 섹션 번역

<!--
  어떤 종류의 PR인지 상세 내용을 작성해주세요.
-->
### 전

<img width="884" alt="Screenshot 2025-01-14 at 5 55 12 PM"
src="https://github.com/user-attachments/assets/27556185-2d72-412b-8d61-c51df7d1cbaf"
/>

### 후

<img width="878" alt="Screenshot 2025-01-14 at 5 54 42 PM"
src="https://github.com/user-attachments/assets/c9be1944-a553-461c-a8a8-685019a63089"
/>

[useDeferredValue
페이지](https://ko.react.dev/reference/react/useDeferredValue)의 `매개변수` 및
`주의 사항` 섹션에서 새롭게 추가된 내용을 번역했습니다.



## 필수 확인 사항

- [x] [기여자 행동 강령 규약<sup>Code of
Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md)
- [x] [기여
가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md)
- [x] [공통 스타일 가이드<sup>Universal Style
Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md)
- [x] [번역을 위한 모범 사례<sup>Best Practices for
Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md)
- [x] [번역 용어 정리<sup>Translate
Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md)
- [x] [`textlint` 가이드<sup>Textlint
Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md)
- [x] [맞춤법 검사<sup>Spelling
Check</sup>](https://nara-speller.co.kr/speller/)

## 선택 확인 사항

- [x] 번역 초안 작성<sup>Draft Translation</sup>
- [ ] 리뷰 반영<sup>Resolve Reviews</sup>
---
 src/content/reference/react/useDeferredValue.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md
index 2de21b873..9f4ac61c1 100644
--- a/src/content/reference/react/useDeferredValue.md
+++ b/src/content/reference/react/useDeferredValue.md
@@ -37,15 +37,16 @@ function SearchPage() {
 #### 매개변수 {/*parameters*/}
 
 * `value`: 지연시키려는 값입니다. 모든 타입을 가질 수 있습니다.
-* **optional** `initialValue`: A value to use during the initial render of a component. If this option is omitted, `useDeferredValue` will not defer during the initial render, because there's no previous version of `value` that it can render instead.
+* **선택사항** `initialValue`: 컴포넌트 초기 렌더링 시 사용할 값입니다. 이 옵션을 생략하면 초기 렌더링 동안 `useDeferredValue`는 값을 지연시키지 않습니다. 이는 대신 렌더링할 `value`의 이전 버전이 없기 때문입니다.
 
 #### 반환값 {/*returns*/}
 
 - `currentValue`: 초기 렌더링 중 반환된 '지연된 값'은 사용자가 제공한 값과 같습니다. 업데이트가 발생하면 React는 먼저 이전 값으로 리렌더링을 시도(반환값이 이전 값과 일치하도록)하고, 그 다음 백그라운드에서 다시 새 값으로 리렌더링을 시도(반환값이 업데이트된 새 값과 일치하도록)합니다.
 
+
 #### 주의 사항 {/*caveats*/}
 
-- When an update is inside a Transition, `useDeferredValue` always returns the new `value` and does not spawn a deferred render, since the update is already deferred.
+- Transition 내에서 업데이트할 때 `useDeferredValue`는 항상 새로운 `value`를 반환하며 지연된 렌더링을 생성하지 않습니다. 이미 업데이트가 지연되었기 때문입니다.
 
 - `useDeferredValue`에 전달하는 값은 문자열 및 숫자와 같은 원시값이거나, 컴포넌트의 외부에서 생성된 객체여야 합니다. 렌더링 중에 새 객체를 생성하고 즉시 `useDeferredValue`에 전달하면 렌더링할 때마다 값이 달라져 불필요한 백그라운드 리렌더링이 발생할 수 있습니다.
 

From 6c82101d256b978e14d9f35723a9b747c4cb2149 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Wed, 15 Jan 2025 22:53:37 +0900
Subject: [PATCH 42/46] docs: update `StrictMode.md`

---
 src/content/reference/react/StrictMode.md | 60 +++++++++--------------
 1 file changed, 24 insertions(+), 36 deletions(-)

diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
index 4e721a172..718548768 100644
--- a/src/content/reference/react/StrictMode.md
+++ b/src/content/reference/react/StrictMode.md
@@ -5,7 +5,7 @@ title: <StrictMode>
 
 <Intro>
 
-`<StrictMode>`는 개발 중에 컴포넌트에서 일반적인 버그를 빠르게 찾을 수 있도록 합니다.
+`<StrictMode>`를 통해 개발 중에 컴포넌트에서 일반적인 버그를 빠르게 찾을 수 있도록 합니다.
 
 
 ```js
@@ -38,23 +38,19 @@ root.render(
 );
 ```
 
-[아래에서 더 많은 예시를 확인할 수 있습니다.](#usage)
+[아래 예시를 참고하세요.](#usage)
 
 Strict Mode는 다음과 같은 개발 전용 동작을 활성화합니다.
 
-- 순수하지 않은 렌더링으로 인해 발생하는 버그를 찾기 위해 컴포넌트가 [추가로 다시 렌더링됩니다.](#fixing-bugs-found-by-double-rendering-in-development)
-- Effect 클린업이 누락되어 발생하는 버그를 찾기 위해 컴포넌트가 [추가로 Effect를 다시 실행합니다.](#fixing-bugs-found-by-re-running-effects-in-development)
-- [더 이상 사용되지 않는 API의 사용 여부를 확인](#fixing-deprecation-warnings-enabled-by-strict-mode)하기 위해 컴포넌트를 검사합니다.
-
-
-- Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering.
-- Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup.
+- 컴포넌트가 순수하지 않은 렌더링으로 인한 버그를 찾기 위해 [추가로 다시 렌더링합니다.](#fixing-bugs-found-by-double-rendering-in-development)
+- 컴포넌트가 Effect 클린업이 누락되어 발생한 버그를 찾기 위해 [Effect를 다시 실행합니다.](#fixing-bugs-found-by-re-running-effects-in-development)
 - Your components will [re-run refs callbacks an extra time](#fixing-bugs-found-by-re-running-ref-callbacks-in-development) to find bugs caused by missing ref cleanup.
-- Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode) {/*TODO*/}
+- 컴포넌트가 [더 이상 사용되지 않는 API를 사용하는지 확인합니다.](#fixing-deprecation-warnings-enabled-by-strict-mode)
+
 
 #### Props {/*props*/}
 
-`StrictMode`는 props를 허용하지 않습니다.
+`StrictMode`는 Props를 받지 않습니다.
 
 #### 주의 사항 {/*caveats*/}
 
@@ -62,7 +58,7 @@ Strict Mode는 다음과 같은 개발 전용 동작을 활성화합니다.
 
 ---
 
-## 사용 방법 {/*usage*/}
+## 사용법 {/*usage*/}
 
 ### 전체 앱에 대해 Strict Mode 활성화 {/*enabling-strict-mode-for-entire-app*/}
 
@@ -85,7 +81,7 @@ root.render(
 
 전체 앱을 (특히 새로 생성된 앱의 경우) Strict Mode로 래핑하는 것을 권장합니다. `createRoot`를 호출하는 프레임워크를 사용하는 경우, Strict Mode를 활성화하는 방법에 대한 문서를 확인하세요.
 
-Strict Mode 검사는 **개발 환경에서만 실행되지만**, 이미 코드에 존재하지만 프로덕션에서 제대로 재현하기 어려울 수 있는 버그를 찾는 데 도움이 됩니다. Strict Mode를 사용하면 사용자가 보고하기 전에 버그를 수정할 수 있습니다.
+Strict Mode 검사는 **개발 환경에서만 실행되지만**, 이미 코드에 존재하는 버그를 찾아내는 데 도움을 줍니다. 이러한 버그는 실제 운영 환경에서 재현하기 까다로울 수 있습니다. Strict Mode를 사용하면 사용자가 보고하기 전에 버그를 수정할 수 있습니다.
 
 <Note>
 
@@ -93,14 +89,11 @@ Strict Mode에서는 개발 시 다음과 같은 검사를 가능하게 합니
 
 - 컴포넌트가 순수하지 않은 렌더링으로 인한 버그를 찾기 위해 [추가로 다시 렌더링합니다.](#fixing-bugs-found-by-double-rendering-in-development)
 - 컴포넌트가 Effect 클린업이 누락되어 발생한 버그를 찾기 위해 [Effect를 다시 실행합니다.](#fixing-bugs-found-by-re-running-effects-in-development)
+- Your components will [re-run ref callbacks an extra time](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing ref cleanup.
 - 컴포넌트가 [더 이상 사용되지 않는 API를 사용하는지 확인합니다.](#fixing-deprecation-warnings-enabled-by-strict-mode)
 
-- Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering.
-- Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup.
-- Your components will [re-run ref callbacks an extra time](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing ref cleanup.
-- Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode) {/*TODO*/}
 
-**이러한 모든 검사는 개발 전용이며 프로덕션 빌드에는 영향을 미치지 않습니다.**
+**이러한 모든 검사는 개발 환경 전용이며 프로덕션 빌드에는 영향을 미치지 않습니다.**
 
 </Note>
 
@@ -135,15 +128,15 @@ function App() {
 
 ### 개발 중 이중 렌더링으로 발견한 버그 수정 {/*fixing-bugs-found-by-double-rendering-in-development*/}
 
-[React는 작성하는 모든 컴포넌트가 순수 함수라고 가정합니다.](/learn/keeping-components-pure) 이것은 React 컴포넌트는 항상 동일한 입력(props, state, context)에 대해 동일한 JSX를 반환해야 한다는 것을 의미합니다.
+[React는 작성하는 모든 컴포넌트가 순수 함수라고 가정합니다.](/learn/keeping-components-pure) 이것은 React 컴포넌트는 항상 동일한 입력(Props, State, Context)에 대해 동일한 JSX를 반환해야 한다는 것을 의미합니다.
 
 이 규칙을 위반하는 컴포넌트는 예기치 않게 동작하며 버그를 일으킵니다. Strict Mode는 실수로 작성된 순수하지 않은 코드를 찾아내기 위해 몇 가지 함수(순수 함수여야 하는 것만)를 **개발 환경에서 두 번 호출**합니다. 이에는 다음이 포함됩니다.
 
-- 컴포넌트 함수 본문 (이벤트 핸들러 내부 코드를 포함하지 않도록 최상위 로직에서만)
-- [`useState`](/reference/react/useState), [`set` 함수](/reference/react/useState#setstate), [`useMemo`](/reference/react/useMemo), 또는 [`useReducer`](/reference/react/useReducer)에 전달한 함수
-- [`constructor`](/reference/react/Component#constructor), [`render`](/reference/react/Component#render), [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate)와 같은 일부 클래스 컴포넌트 메소드 ([전체 목록 보기](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects))
+- 컴포넌트 함수 본문. (단, 최상위 로직만 해당하며, 이벤트 핸들러 내부의 코드는 포함하지 않음.)
+- [`useState`](/reference/react/useState), [`set` 함수](/reference/react/useState#setstate), [`useMemo`](/reference/react/useMemo), 또는 [`useReducer`](/reference/react/useReducer)에 전달한 함수.
+- [`constructor`](/reference/react/Component#constructor), [`render`](/reference/react/Component#render), [`shouldComponentUpdate`](/reference/react/Component#shouldcomponentupdate)와 같은 일부 클래스 컴포넌트 메소드. ([전체 목록 보기](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects))
 
-함수가 순수한 경우 두 번 실행하여도 동작이 변경되지 않습니다. 순수 함수는 항상 같은 결과를 생성하기 때문입니다. 그러나 함수가 순수하지 않다면 (예: 받은 데이터를 변경하는 함수) 두 번 실행하면 보통 알아챌 수 있습니다. (이것이 순수하지 않은 이유입니다!) 이는 버그를 조기에 발견하고 수정하는 데 도움이 됩니다.
+함수가 순수한 경우 두 번 실행하여도 동작이 변경되지 않습니다. 순수 함수는 항상 같은 결과를 생성하기 때문입니다. 그러나 함수가 순수하지 않다면 (예: 받은 데이터를 변경하는 함수) 두 번 실행하면 보통 알아챌 수 있습니다. (이것이 바로 함수가 순수하지 않다는 것을 의미합니다!) 이는 버그를 조기에 발견하고 수정하는 데 도움이 됩니다.
 
 **다음은 Strict Mode의 이중 렌더링이 어떻게 버그를 조기에 발견하는 데 도움이 되는지 보여주는 예시입니다.**
 
@@ -325,7 +318,7 @@ export default function StoryTray({ stories }) {
   items.push({ id: 'create', label: '이야기 만들기' });
 ```
 
-이렇게 하면 [`StoryTray` 함수를 순수하게 만들 수 있습니다.](/learn/keeping-components-pure) 함수가 호출될 때마다 배열의 사본만 수정하고 외부 객체나 변수에 영향을 미치지 않습니다. 이렇게 하면 버그가 해결되지만 컴포넌트의 동작에 문제가 있다는 것이 명확해지기 전에 컴포넌트를 더 자주 다시 렌더링해야 했습니다.
+이렇게 하면 [`StoryTray` 함수를 순수하게 만들 수 있습니다.](/learn/keeping-components-pure) 함수가 호출될 때마다 배열의 사본만 수정하고, 외부 객체나 변수에는 영향을 미치지 않습니다. 이렇게 하면 버그를 해결할 수 있지만, 컴포넌트를 여러번 다시 렌더링하도록 만들어야 비로소 컴포넌트의 동작에 문제가 있다는 것이 명확해졌습니다.
 
 **원래 예시에서는 버그가 명확하지 않았습니다. 이제 원래 (버그가 있는) 코드를 `<StrictMode>`로 래핑해 보겠습니다.**
 
@@ -410,7 +403,7 @@ li {
 
 </Sandpack>
 
-**Strict Mode에서는 *항상* 렌더링 함수를 두 번 호출하므로 실수를 바로 확인할 수 있습니다**("이야기 만들기"가 두 번 나타남). 따라서 프로세스 초기에 이러한 실수를 발견할 수 있습니다. 컴포넌트가 Strict Mode에서 렌더링되도록 수정하면 이전의 호버 기능과 같이 향후 발생할 수 있는 많은 프로덕션 버그도 *수정*할 수 있습니다.
+**Strict Mode에서는 *항상* 렌더링 함수를 두 번 호출하므로 실수를 바로 확인할 수 있습니다.** ("이야기 만들기"가 두 번 나타남.) 따라서 프로세스 초기에 이러한 실수를 발견할 수 있습니다. 컴포넌트가 Strict Mode에서 렌더링되도록 수정하면 이전의 호버 기능과 같이 향후 발생할 수 있는 많은 프로덕션 버그도 *수정*할 수 있습니다.
 
 <Sandpack>
 
@@ -502,13 +495,13 @@ li {
 
 </Sandpack>
 
-Strict Mode가 없으면 리렌더링을 더 추가하기 전까지는 버그를 놓치기 쉬웠습니다. Strict Mode를 사용하면 동일한 버그가 즉시 나타납니다. Strict Mode를 사용하면 버그를 팀과 사용자에게 푸시하기 전에 발견하는 데 도움이 됩니다.
+Strict Mode가 없으면 리렌더링을 더 추가하기 전까지는 버그를 놓치기 쉬웠습니다. Strict Mode를 사용하면 동일한 버그가 즉시 나타납니다. Strict Mode는 버그를 팀이나 사용자에게 푸시하기 전에 발견할 수 있도록 도와줍니다.
 
 [컴포넌트를 순수하게 유지하는 방법에 대해 자세히 알아보세요.](/learn/keeping-components-pure)
 
 <Note>
 
-[React DevTools](/learn/react-developer-tools)가 설치되어 있다면, 두 번째 렌더링 호출 중 `console.log` 호출이 약간 흐리게 표시됩니다. React 개발자 도구는 이를 완전히 억제하는 설정(기본값은 꺼짐)도 제공합니다.
+[React 개발자 도구](/learn/react-developer-tools)가 설치되어 있다면, 두 번째 렌더링 호출 중 `console.log` 호출이 약간 흐리게 표시됩니다. React 개발자 도구는 이를 완전히 억제하는 설정(기본값은 꺼짐)도 제공합니다.
 
 </Note>
 
@@ -516,13 +509,13 @@ Strict Mode가 없으면 리렌더링을 더 추가하기 전까지는 버그를
 
 ### 개발 환경에서 Effect를 다시 실행하여 발견된 버그 수정 {/*fixing-bugs-found-by-re-running-effects-in-development*/}
 
-Strict Mode는 [Effects](/learn/synchronizing-with-effects)의 버그를 찾는 데도 도움이 될 수 있습니다.
+Strict Mode는 [Effect](/learn/synchronizing-with-effects)의 버그를 찾는 데도 도움이 될 수 있습니다.
 
 모든 Effect에는 몇 가지 셋업 코드가 있고 어쩌면 클린업 코드가 있을 수 있습니다. 일반적으로 React는 컴포넌트가 *마운트*(화면에 추가)될 때 셋업을 호출하고 컴포넌트가 *마운트 해제*(화면에서 제거)될 때 클린업을 호출합니다. 그런 다음 React는 마지막 렌더링 이후로부터 의존성이 변경된 경우 클린업과 셋업을 다시 호출합니다.
 
 Strict Mode가 켜져 있으면 React는 **모든 Effect에 대해 개발 환경에서 한 번 더 셋업+클린업 사이클을 실행합니다.** 의외로 느껴질 수도 있지만 수동으로 파악하기 어려운 미묘한 버그를 드러내는 데 도움이 됩니다.
 
-**다음은 Strict Mode에서 Effects를 다시 실행하는 것이 버그를 조기에 발견하는 데 어떻게 도움이 되는지 보여주는 예시입니다.**
+**다음은 Strict Mode에서 Effect를 다시 실행하는 것이 버그를 조기에 발견하는 데 어떻게 도움이 되는지 보여주는 예시입니다.**
 
 컴포넌트를 채팅에 연결하는 이 예시를 살펴봅시다.
 
@@ -558,7 +551,7 @@ export default function ChatRoom() {
 let connections = 0;
 
 export function createConnection(serverUrl, roomId) {
-  // 현실 구현은 실제로 서버에 연결될 것입니다.
+  // 현실 구현은 실제로 서버에 연결할 것입니다.
   return {
     connect() {
       console.log('✅ Connecting to "' + roomId + '" room at ' + serverUrl + '...');
@@ -1252,11 +1245,6 @@ Without Strict Mode, it was easy to miss the bug until you clicked around to app
 
 React는 `<StrictMode>` 트리 내부의 컴포넌트가 더 이상 사용되지 않는 다음 API 중 하나를 사용하는 경우 경고를 표시합니다.
 
-* [`findDOMNode`](/reference/react-dom/findDOMNode). [대안 보기](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
-* [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount)와 같은 `UNSAFE_` 클래스 생명주기 메서드. [대안 보기](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles)
-* 레거시 context ([`childContextTypes`](/reference/react/Component#static-childcontexttypes), [`contextTypes`](/reference/react/Component#static-contexttypes), 및 [`getChildContext`](/reference/react/Component#getchildcontext)). [대안 보기](/reference/react/createContext)
-* 레거시 문자열 refs ([`this.refs`](/reference/react/Component#refs)). [대안 보기](https://ko.legacy.reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage)
-
-* `UNSAFE_` class lifecycle methods like [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount). [See alternatives.](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles) {/*TODO*/}
+* [`UNSAFE_componentWillMount`](/reference/react/Component#unsafe_componentwillmount)와 같은 `UNSAFE_` 클래스 생명주기 메서드. [대안 확인하기](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles).
 
 이러한 API는 주로 이전 [클래스 컴포넌트](/reference/react/Component)에서 사용되므로 최신 앱에서는 거의 나타나지 않습니다.

From ca6492e3cf4ff45f6a574753cc096611083e1553 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Wed, 15 Jan 2025 23:49:01 +0900
Subject: [PATCH 43/46] feat: add links to legacy `react@18` korean translation
 documentation

---
 src/components/Layout/HomeContent.js      |  8 ++++++++
 src/components/Layout/TopNav/TopNav.tsx   | 24 +++++++++++++++++++++++
 src/content/reference/react/components.md |  2 +-
 src/content/versions.md                   |  2 +-
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
index 7c7aa4c3f..f4462b207 100644
--- a/src/components/Layout/HomeContent.js
+++ b/src/components/Layout/HomeContent.js
@@ -164,6 +164,14 @@ export function HomeContent() {
               label="API Reference">
               API 참고서
             </ButtonLink>
+            <ButtonLink
+              href={'https://ko-react-exy5xcwjj-fbopensource.vercel.app/'}
+              type="secondary"
+              size="lg"
+              className="w-full sm:w-auto justify-center"
+              label="API Reference">
+              React v18 한글
+            </ButtonLink>
           </div>
         </div>
 
diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx
index 296155b93..4fb1935d9 100644
--- a/src/components/Layout/TopNav/TopNav.tsx
+++ b/src/components/Layout/TopNav/TopNav.tsx
@@ -35,6 +35,22 @@ declare global {
   }
 }
 
+const react18Icon = (
+  <svg
+    stroke="currentColor"
+    fill="none"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    height="200px"
+    width="200px"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 8h1v8"></path>
+    <path d="M15 12h-1a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1zh-1a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1"></path>
+  </svg>
+);
+
 const darkIcon = (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -346,6 +362,14 @@ export default function TopNav({
                     <IconSearch className="w-5 h-5 align-middle" />
                   </button>
                 </div>
+                <div className="flex">
+                  <Link
+                    href="https://ko-react-exy5xcwjj-fbopensource.vercel.app/"
+                    aria-label="React version 18 Korean translation"
+                    className="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link">
+                    {react18Icon}
+                  </Link>
+                </div>
                 <div className="flex dark:hidden">
                   <button
                     type="button"
diff --git a/src/content/reference/react/components.md b/src/content/reference/react/components.md
index 7f361e734..95089a5f8 100644
--- a/src/content/reference/react/components.md
+++ b/src/content/reference/react/components.md
@@ -14,8 +14,8 @@ React는 JSX에서 사용할 수 있는 몇 가지 내장 컴포넌트를 제공
 
 * [`<Fragment>`](/reference/react/Fragment) 또는 `<>...</>` 로 표기하며, 여러 JSX 노드를 함께 그룹화할 수 있습니다.
 * [`<Profiler>`](/reference/react/Profiler)를 통해 React 트리의 렌더링 성능을 프로그래밍 방식으로 측정할 수 있습니다.
-* [`<Suspense>`](/reference/react/Suspense)를 통해 자식 컴포넌트를 로딩하는 동안 Fallback을 표시할 수 있습니다.
 * [`<StrictMode>`](/reference/react/StrictMode)를 통해 초기에 버그를 찾는 데 도움이 되는 추가 개발 전용 검사를 사용할 수 있습니다.
+* [`<Suspense>`](/reference/react/Suspense)를 통해 자식 컴포넌트를 로딩하는 동안 Fallback을 표시할 수 있습니다.
 
 ---
 
diff --git a/src/content/versions.md b/src/content/versions.md
index 33d2ad180..ea7761eb4 100644
--- a/src/content/versions.md
+++ b/src/content/versions.md
@@ -18,7 +18,7 @@ title: React 버전
 
 ## 이전 버전 {/*previous-versions*/}
 
-- [18.react.dev](https://18.react.dev) {/*docs-18*/}
+- [18.react.dev](https://18.react.dev) {/*docs-18*/} ([React v18 한글](https://ko-react-exy5xcwjj-fbopensource.vercel.app/))
 - [17.react.dev](https://17.react.dev) {/*docs-17*/}
 - [16.react.dev](https://16.react.dev) {/*docs-16*/}
 - [15.react.dev](https://15.react.dev) {/*docs-15*/}

From b92aef21917a921d8ffacb20ad7632cbb82ad2ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Thu, 16 Jan 2025 01:26:56 +0900
Subject: [PATCH 44/46] docs: update `Suspense.md`

---
 src/content/reference/react/Suspense.md | 65 ++++++++++++-------------
 1 file changed, 30 insertions(+), 35 deletions(-)

diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index af40476f9..d2f8ba0e5 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -4,7 +4,7 @@ title: <Suspense>
 
 <Intro>
 
-`<Suspense>` 는 자식 요소가 로드되기 전까지 화면에 대체 UI를 보여줍니다.
+`<Suspense>`는 자식 요소를 로드하기 전까지 화면에 대체 UI<sup>Fallback</sup>를 보여줍니다.
 
 
 ```js
@@ -25,20 +25,20 @@ title: <Suspense>
 
 #### Props {/*props*/}
 * `children`: 궁극적으로 렌더링하려는 실제 UI입니다. `children`의 렌더링이 지연되면, Suspense는 `fallback`을 대신 렌더링합니다.
-* `fallback`: 실제 UI가 로드되기 전까지 대신 렌더링 되는 대체 UI입니다. 올바른 React node 형식은 무엇이든 대체 UI로 활용할 수 있지만, 실제로는 보통 로딩 스피너나 스켈레톤처럼 간단한 placeholder를 활용합니다. Suspense는 `children`의 렌더링이 지연되면 자동으로 `fallback`으로 전환하고, 데이터가 준비되면 `children`으로 다시 전환합니다. 만약 `fallback`의 렌더링이 지연되면, 가장 가까운 부모 Suspense가 활성화됩니다.
+* `fallback`: 실제 UI가 로딩되기 전까지 대신 렌더링되는 대체 UI입니다. 올바른 React 노드 형식은 무엇이든 대체 UI로 활용할 수 있지만, 실제로는 보통 로딩 스피너나 스켈레톤처럼 간단한 Placeholder를 활용합니다. Suspense는 `children`의 렌더링이 지연되면 자동으로 `fallback`으로 전환하고, 데이터가 준비되면 `children`으로 다시 전환합니다. 만약 `fallback`의 렌더링이 지연되면, 가장 가까운 부모 Suspense가 활성화됩니다.
 
 #### 주의 사항 {/*caveats*/}
 
-- React는 컴포넌트가 처음으로 마운트 되기 전에 지연된 렌더링을 하는 동안의 어떤 state도 유지하지 않습니다. 컴포넌트가 로드되면 React는 일시 중지된 트리를 처음부터 다시 렌더링합니다.
-- Suspense가 트리의 콘텐츠를 보여주고 있을 때 또다시 지연되면 [`startTransition`](/reference/react/startTransition)나 [`useDeferredValue`](/reference/react/useDeferredValue)로 인한 업데이트가 아닌 한, `fallback`이 다시 보입니다.
+- React는 컴포넌트가 처음으로 마운트 되기 전에 지연된 렌더링을 하는 동안의 어떤 State도 유지하지 않습니다. 컴포넌트가 로딩되면 React는 일시 중지된 트리를 처음부터 다시 렌더링합니다.
+- Suspense가 트리의 콘텐츠를 보여주고 있을 때 또 다시 지연되면 [`startTransition`](/reference/react/startTransition)나 [`useDeferredValue`](/reference/react/useDeferredValue)로 인한 업데이트가 아닌 한, `fallback`이 다시 보입니다.
 - React가 다시 일시 중지되어 보이는 콘텐츠를 숨겨야 하는 경우, 콘텐츠 트리에서 [Layout Effect](/reference/react/useLayoutEffect)들을 정리합니다. 콘텐츠가 다시 보일 준비가 되면 React는 Layout Effect들을 다시 실행합니다. 이로써 DOM 레이아웃을 측정하는 Effect가 콘텐츠가 숨겨져 있는 동안 동작하지 않도록 보장합니다.
-- React는 Suspense와 통합된 *Streaming Server Rendering*과 *Selective Hydration* 같은 내부 최적화를 포함하고 있습니다. [아키텍처 개요](https://github.com/reactwg/react-18/discussions/37)를 읽고 [기술 강연](https://www.youtube.com/watch?v=pj5N-Khihgc)을 시청하여 더 자세히 알아보세요.
+- React는 Suspense와 통합된 *스트리밍 서버 렌더링*과 *선택적 Hydration* 같은 내부 최적화를 포함하고 있습니다. [아키텍처 개요](https://github.com/reactwg/react-18/discussions/37)를 읽고 [기술 강연](https://www.youtube.com/watch?v=pj5N-Khihgc)을 시청하여 더 자세히 알아보세요.
 
 ---
 
 ## 사용법 {/*usage*/}
 
-### 콘텐츠가 로드되는 동안 대체 UI 보여주기 {/*displaying-a-fallback-while-content-is-loading*/}
+### 콘텐츠를 로딩하는 동안 대체 UI<sup>Fallback</sup> 보여주기 {/*displaying-a-fallback-while-content-is-loading*/}
 
 애플리케이션의 모든 곳을 Suspense 경계로 감쌀 수 있습니다.
 
@@ -48,9 +48,9 @@ title: <Suspense>
 </Suspense>
 ```
 
-React는 <CodeStep step={2}>children</CodeStep>에 필요한 모든 코드와 데이터가 로드될 때까지 <CodeStep step={1}>loading fallback</CodeStep>을 보여줍니다.
+React는 <CodeStep step={2}>children</CodeStep>에 필요한 모든 코드와 데이터를 로딩할 때까지 <CodeStep step={1}>loading fallback</CodeStep>을 보여줍니다.
 
-아래 예시에서는 앨범 목록을 가져오는 동안 `Albums` 컴포넌트가 <em>지연(Suspend)</em>됩니다. 렌더링할 준비가 될 때까지 가장 가까운 Suspense는 Fallback, 즉 `Loading` 컴포넌트를 표시합니다. 데이터가 모두 로드되면 React는 `Loading` Fallback을 숨기고 로드된 데이터로 `Albums` 컴포넌트를 렌더링합니다.
+아래 예시에서는 앨범 목록을 가져오는 동안 `Albums` 컴포넌트가 <em>지연(Suspend)</em>됩니다. 렌더링할 준비가 될 때까지 가장 가까운 Suspense는 Fallback, 즉 `Loading` 컴포넌트를 표시합니다. 데이터를 모두 로딩하면 React는 `Loading` Fallback을 숨기고 로딩된 데이터로 `Albums` 컴포넌트를 렌더링합니다.
 
 <Sandpack>
 
@@ -205,17 +205,17 @@ async function getAlbums() {
 
 <Note>
 
-**Suspense가 가능한 데이터만이 Suspense 컴포넌트를 활성화합니다.** 아래와 같은 것들이 해당됩니다.
+**Suspense가 가능한 데이터만이 Suspense 컴포넌트를 활성화합니다.** 아래와 같은 것들이 해당합니다.
 
-- [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/)와 [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) 같이 Suspense가 가능한 프레임워크를 사용한 데이터 가져오기
-- [`lazy`](/reference/react/lazy)를 활용한 지연 로딩 컴포넌트
-- [`use`](/reference/react/use)를 사용해서 캐시된 Promise 값 읽기
+- [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/)와 [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense) 같이 Suspense가 가능한 프레임워크를 사용한 데이터 가져오기.
+- [`lazy`](/reference/react/lazy)를 활용한 지연 로딩 컴포넌트.
+- [`use`](/reference/react/use)를 사용해서 캐시된 Promise 값 읽기.
 
 Suspense는 Effect 또는 이벤트 핸들러 내부에서 가져오는 데이터를 감지하지 **않습니다**.
 
-위의 `Albums` 컴포넌트에서 데이터를 로드하는 정확한 방법은 프레임워크마다 다릅니다. Suspense가 가능한 프레임워크를 사용하는 경우, 프레임워크의 데이터 불러오기 관련 문서에서 자세한 내용을 확인할 수 있습니다.
+위의 `Albums` 컴포넌트에서 데이터를 로딩하는 정확한 방법은 프레임워크마다 다릅니다. Suspense가 가능한 프레임워크를 사용하는 경우, 프레임워크의 데이터 불러오기 관련 문서에서 자세한 내용을 확인할 수 있습니다.
 
-독단적인 프레임워크를 사용하지 않는 Suspense가 가능한 데이터 불러오기 기능은 아직 지원되지 않습니다. Suspense 지원 데이터 소스를 구현하기 위한 요구 사항은 불안정하고 문서화되지 않았습니다. 데이터 소스를 Suspense와 통합하기 위한 공식 API는 향후 React 버전에서 출시될 예정입니다.
+독단적인 프레임워크를 사용하지 않는 Suspense가 가능한 데이터 가져오기 기능은 아직 지원되지 않습니다. Suspense 지원 데이터 소스를 구현하기 위한 요구 사항은 불안정하고 문서화되지 않았습니다. 데이터 소스를 Suspense와 통합하기 위한 공식 API는 향후 React 버전에서 출시될 예정입니다.
 
 </Note>
 
@@ -443,7 +443,7 @@ async function getAlbums() {
 
 </Sandpack>
 
-데이터를 로드하는 컴포넌트가 Suspense의 직접적인 자식일 필요는 없습니다. 예를 들어, `Biography`와 `Albums`를 새로운 `Details` 컴포넌트로 이동할 수 있습니다. 이렇게 해도 동작은 변경되지 않습니다. `Biography`와 `Albums`는 가장 가까운 상위 Suspense를 공유하므로 두 컴포넌트의 노출 여부는 함께 조정됩니다.
+데이터를 로딩하는 컴포넌트가 Suspense의 직접적인 자식일 필요는 없습니다. 예를 들어, `Biography`와 `Albums`를 새로운 `Details` 컴포넌트로 이동할 수 있습니다. 이렇게 해도 동작은 변경되지 않습니다. `Biography`와 `Albums`는 가장 가까운 상위 Suspense를 공유하므로 두 컴포넌트의 노출 여부는 함께 조정됩니다.
 
 ```js {2,8-11}
 <Suspense fallback={<Loading />}>
@@ -464,7 +464,7 @@ function Details({ artistId }) {
 
 ---
 
-### 중첩된 콘텐츠가 로드될 때 보여주기 {/*revealing-nested-content-as-it-loads*/}
+### 중첩된 콘텐츠가 로딩될 때 보여주기 {/*revealing-nested-content-as-it-loads*/}
 
 컴포넌트가 일시 중단되면 가장 가까운 상위 Suspense 컴포넌트가 Fallback을 보여줍니다. 이를 통해 여러 Suspense 컴포넌트를 중첩하여 로딩 순서를 만들 수 있습니다. 각 Suspense의 Fallback은 다음 레벨의 콘텐츠를 사용할 수 있게 되면 채워집니다. 예를 들어 앨범 목록에 자체 Fallback을 지정할 수 있습니다.
 
@@ -479,20 +479,15 @@ function Details({ artistId }) {
 </Suspense>
 ```
 
-이 변경으로 `Biography`를 보여줄 때 `Albums`가 로드될 때까지 "기다릴" 필요가 없습니다.
+이 변경으로 `Biography`를 보여줄 때 `Albums`가 로딩될 때까지 "기다릴" 필요가 없습니다.
 
 순서는 다음과 같습니다.
 
-1. `Biography`가 아직 로드되지 않은 경우, 전체 콘텐츠 영역 대신 `BigSpinner`가 표시됩니다.
+1. `Biography`가 아직 로딩되지 않은 경우, 전체 콘텐츠 영역 대신 `BigSpinner`가 표시됩니다.
 1. `Biography`의 로딩이 완료되면 `BigSpinner`가 콘텐츠로 대체됩니다.
-1. `Albums`가 아직 로드되지 않으면 `Albums`와 그 상위 `Panel` 대신 `AlbumsGlimmer`가 표시됩니다.
+1. `Albums`가 아직 로딩되지 않은 경우, `Albums`와 그 상위 `Panel` 대신 `AlbumsGlimmer`가 표시됩니다.
 1. 마지막으로 `Albums`가 로딩을 완료하면 `AlbumsGlimmer`를 대체합니다.
 
-1. If `Biography` hasn't loaded yet, `BigSpinner` is shown in place of the entire content area.
-2. Once `Biography` finishes loading, `BigSpinner` is replaced by the content.
-3. If `Albums` hasn't loaded yet, `AlbumsGlimmer` is shown in place of `Albums` and its parent `Panel`.
-4. Finally, once `Albums` finishes loading, it replaces `AlbumsGlimmer`. {/*TODO*/}
-
 <Sandpack>
 
 ```js src/App.js hidden
@@ -727,13 +722,13 @@ async function getAlbums() {
 
 </Sandpack>
 
-Suspense를 사용하면 UI의 어떤 부분이 항상 동시에 그려져야 하는지, 어떤 부분이 로딩 순서에서 점진적으로 더 많은 콘텐츠를 보여줘야 하는지 조정할 수 있습니다. 앱의 나머지 동작에 영향을 주지 않고 트리의 어느 위치에서나 Suspense를 추가, 이동 또는 삭제할 수 있습니다.
+Suspense 경계를 사용하면 UI의 어떤 부분이 항상 동시에 그려져야 하는지, 어떤 부분이 로딩 순서에서 점진적으로 더 많은 콘텐츠를 보여줘야 하는지 조정할 수 있습니다. 앱의 나머지 동작에 영향을 주지 않고 트리의 어느 위치에서나 Suspense를 추가, 이동, 삭제할 수 있습니다.
 
 모든 컴포넌트 주위에 Suspense를 두지 마세요. Suspense는 사용자가 경험하기를 원하는 로딩 순서보다 더 세분화되어서는 안 됩니다. 디자이너와 함께 작업하는 경우 로딩 상태를 어디에 배치해야 하는지 디자이너에게 물어보세요. 디자이너가 이미 디자인 와이어 프레임에 포함했을 가능성이 높습니다.
 
 ---
 
-### 새 콘텐츠가 로드되는 동안 이전 콘텐츠 보여주기 {/*showing-stale-content-while-fresh-content-is-loading*/}
+### 새 콘텐츠가 로딩되는 동안 이전 콘텐츠 보여주기 {/*showing-stale-content-while-fresh-content-is-loading*/}
 
 이 예시에서는 검색 결과를 가져오는 동안 `SearchResults` 컴포넌트가 지연됩니다. `"a"`를 입력하고 결과를 기다린 다음 `"ab"`로 바꿔보세요. `"a"`에 대한 결과는 로딩 Fallback으로 바뀝니다.
 
@@ -882,7 +877,7 @@ input { margin: 10px; }
 
 </Sandpack>
 
-일반적인 대체 UI 패턴은 목록들에 대한 업데이트를 <em>연기(defer)</em>하고 새 결과가 준비될 때까지 이전 결과를 계속 보여주는 것입니다. [`useDeferredValue`](/reference/react/useDeferredValue) Hook을 사용하면 쿼리의 지연된 버전을 아래로 전달할 수 있습니다.
+일반적인 대체 UI 패턴은 목록들에 대한 업데이트를 <em>지연<sup>Defer</sup></em>하고 새 결과가 준비될 때까지 이전 결과를 계속 보여주는 것입니다. [`useDeferredValue`](/reference/react/useDeferredValue) Hook을 사용하면 쿼리의 지연된 버전을 아래로 전달할 수 있습니다.
 
 ```js {3,11}
 export default function App() {
@@ -902,7 +897,7 @@ export default function App() {
 }
 ```
 
-`query`는 즉시 업데이트되므로 입력에 새 값이 표시됩니다. 그러나 `deferredQuery`는 데이터가 로드될 때까지 이전 값을 유지하므로 `SearchResults`는 잠시 동안 이전 결과를 보여줍니다.
+`query`는 즉시 업데이트되므로 입력에 새 값이 표시됩니다. 그러나 `deferredQuery`는 데이터가 로딩될 때까지 이전 값을 유지하므로 `SearchResults`는 잠시 동안 이전 결과를 보여줍니다.
 
 사용자에게 더 명확하게 알리기 위해 이전 결과 목록이 표시될 때 시각적 표시를 추가할 수 있습니다.
 
@@ -914,7 +909,7 @@ export default function App() {
 </div>
 ```
 
-아래 예시에서 `"a"`를 입력하고 결과가 로드될 때까지 기다린 다음 입력을 `"ab"`로 편집해보세요. 이제 새 결과가 로드될 때까지 Suspense Fallback 대신 희미한 이전 결과 목록이 표시되는 것을 확인할 수 있습니다.
+아래 예시에서 `"a"`를 입력하고 결과가 로딩될 때까지 기다린 다음 입력을 `"ab"`로 편집해보세요. 이제 새 결과가 로드될 때까지 Suspense Fallback 대신 희미한 이전 결과 목록이 표시되는 것을 확인할 수 있습니다.
 
 <Sandpack>
 
@@ -1067,7 +1062,7 @@ input { margin: 10px; }
 
 <Note>
 
-지연된 값(Deferred Value)과 [Transitions](#preventing-already-revealed-content-from-hiding)를 사용하면 Suspense Fallback을 표시하지 않을 수 있습니다. Transitions는 전체 업데이트를 긴급하지 않은 것으로 처리하므로 일반적으로 프레임워크와 Router 라이브러리에서 Navigation을 위해 사용합니다. 반면에 지연된 값(Deferred Value)은 UI의 일부를 긴급하지 않은 것으로 처리하고 나머지 UI보다 "지연"시키려는 목적의 애플리케이션 코드에서 유용합니다.
+지연된 값<sup>Deferred Value</sup>과 [Transition](#preventing-already-revealed-content-from-hiding)을 사용하면 Suspense Fallback을 표시하지 않을 수 있습니다. Transition은 전체 업데이트를 긴급하지 않은 것으로 처리하므로 일반적으로 프레임워크와 Router 라이브러리에서 Navigation을 위해 사용합니다. 반면에 지연된 값<sup>Deferred Value</sup>은 UI의 일부를 긴급하지 않은 것으로 처리하고 나머지 UI보다 "지연"시키려는 목적의 애플리케이션 코드에서 유용합니다.
 
 </Note>
 
@@ -1385,7 +1380,7 @@ function Router() {
   // ...
 ```
 
-이는 State 전환이 급하지 않으며, 이미 공개된 콘텐츠를 숨기는 대신 이전 페이지를 계속 표시하는 것이 좋다는 것을 React에게 알려줍니다. 이제 버튼을 클릭하면 `Biography`가 로드될 때까지 "대기"합니다.
+이는 State 전환이 급하지 않으며, 이미 공개된 콘텐츠를 숨기는 대신 이전 페이지를 계속 표시하는 것이 좋다는 것을 React에게 알려줍니다. 이제 버튼을 클릭하면 `Biography`가 로딩될 때까지 "대기"합니다.
 
 <Sandpack>
 
@@ -1681,7 +1676,7 @@ main {
 
 </Sandpack>
 
-Transition은 *모든* 콘텐츠가 로드될 때까지 기다리지 않습니다. 이미 보여진 콘텐츠가 숨겨지지 않도록 충분히 오래 기다립니다. 예를 들어 웹사이트 `Layout`은 이미 보이므로 로딩 스피너 뒤에 숨기는 것은 좋지 않을 것입니다. 그러나 `Albums` 주위에 중첩된 `Suspense`는 새로운 것이므로 Transition이 기다리지 않습니다.
+Transition은 *모든* 콘텐츠가 로딩될 때까지 기다리지 않습니다. 이미 보여진 콘텐츠가 숨겨지지 않도록 충분히 오래 기다립니다. 예를 들어 웹사이트 `Layout`은 이미 보이므로 로딩 스피너 뒤에 숨기는 것은 좋지 않을 것입니다. 그러나 `Albums` 주위에 중첩된 `Suspense`는 새로운 것이므로 Transition이 기다리지 않습니다.
 
 <Note>
 
@@ -1693,7 +1688,7 @@ Suspense를 지원하는 Router는 기본적으로 Navigation 업데이트를 Tr
 
 ### Transition이 발생하고 있음을 보여주기 {/*indicating-that-a-transition-is-happening*/}
 
-위의 예시에서는 버튼을 클릭해도 Navigation이 진행 중이라는 시각적 표시가 없습니다. 표시기를 추가하려면 [`startTransition`](/reference/react/startTransition)을 boolean 값인 `isPending` 값을 제공하는 [`useTransition`](/reference/react/useTransition)으로 바꾸면 됩니다. 아래 예시에서는 Transition이 진행되는 동안 웹사이트 헤더 스타일을 변경하는 데 사용됩니다.
+위의 예시에서는 버튼을 클릭해도 Navigation이 진행 중이라는 시각적 표시가 없습니다. 표시기를 추가하려면 [`startTransition`](/reference/react/startTransition)을 불리언<sup>Boolean</sup> 값인 `isPending` 값을 제공하는 [`useTransition`](/reference/react/useTransition)으로 바꾸면 됩니다. 아래 예시에서는 Transition이 진행되는 동안 웹사이트 헤더 스타일을 변경하는 데 사용됩니다.
 
 <Sandpack>
 
@@ -2039,7 +2034,7 @@ function Chat() {
 
 표시되는 UI를 Fallback으로 대체하면 사용자 환경이 불안정해집니다. 이는 업데이트로 인해 컴포넌트가 지연되고 가장 가까운 Suspense가 이미 사용자에게 콘텐츠를 보여주고 있을 때 발생할 수 있습니다.
 
-이런 일이 발생하지 않도록 하려면, [`startTransition`](#preventing-already-revealed-content-from-hiding)을 사용하여 업데이트를 긴급하지 않은 것으로 처리하세요. Transition이 진행되는 동안 React는 원치 않는 Fallback이 나타나지 않도록 충분한 데이터가 로드될 때까지 기다립니다.
+이런 일이 발생하지 않도록 하려면, [`startTransition`](#preventing-already-revealed-content-from-hiding)을 사용하여 업데이트를 긴급하지 않은 것으로 처리하세요. Transition이 진행되는 동안 React는 원치 않는 Fallback이 나타나지 않도록 충분한 데이터가 로딩될 때까지 기다립니다.
 
 ```js {2-3,5}
 function handleNextPageClick() {
@@ -2050,7 +2045,7 @@ function handleNextPageClick() {
 }
 ```
 
-이렇게 하면 기존 콘텐츠가 숨겨지지 않습니다. 그러나 새로 렌더링 된 `Suspense`는 여전히 즉시 Fallback을 보여줘서 UI를 차단하지 않고 사용자가 콘텐츠를 이용할 수 있게 합니다.
+이렇게 하면 기존 콘텐츠가 숨겨지지 않습니다. 그러나 새로 렌더링된 `Suspense`는 여전히 즉시 Fallback을 보여줘서 UI를 차단하지 않고 사용자가 콘텐츠를 이용할 수 있게 합니다.
 
 **React는 긴급하지 않은 업데이트 중에만 원치 않는 Fallback을 방지합니다**. 긴급한 업데이트의 결과인 경우 렌더링을 지연시키지 않습니다. [`startTransition`](/reference/react/startTransition) 또는 [`useDeferredValue`](/reference/react/useDeferredValue)와 같은 API를 사용해야 합니다.
 

From 24c63653ef915b62a30ef5050764eeddce3c7502 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Thu, 16 Jan 2025 01:46:39 +0900
Subject: [PATCH 45/46] docs: update `hooks.md`

---
 src/content/reference/react/hooks.md | 34 ++++++++++++++--------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md
index aa6b231b3..9c25847be 100644
--- a/src/content/reference/react/hooks.md
+++ b/src/content/reference/react/hooks.md
@@ -1,5 +1,5 @@
 ---
-title: "내장된 React Hook"
+title: "내장 React Hook"
 ---
 
 <Intro>
@@ -12,12 +12,12 @@ title: "내장된 React Hook"
 
 ## State Hooks {/*state-hooks*/}
 
-*State*를 통해 컴포넌트는 [사용자 입력과 같은 정보를 "기억"할 수 있습니다.](/learn/state-a-components-memory) 예를 들어, 폼 컴포넌트는 state를 사용하여 입력값을 저장할 수 있고, 이미지 갤러리 컴포넌트는 state를 사용하여 선택한 이미지 인덱스를 저장할 수 있습니다.
+*State*를 통해 컴포넌트는 [사용자 입력과 같은 정보를 "기억"할 수 있습니다.](/learn/state-a-components-memory) 예를 들어, 폼 컴포넌트는 State를 사용하여 입력값을 저장할 수 있고, 이미지 갤러리 컴포넌트는 State를 사용하여 선택한 이미지 인덱스를 저장할 수 있습니다.
 
-컴포넌트에 state를 추가하려면, 다음 Hook 중 하나를 사용하세요.
+컴포넌트에 State를 추가하려면, 다음 Hook 중 하나를 사용하세요.
 
-* [`useState`](/reference/react/useState)는 직접 업데이트할 수 있는 state 변수를 선언합니다.
-* [`useReducer`](/reference/react/useReducer)는 [reducer 함수](/learn/extracting-state-logic-into-a-reducer) 내부의 업데이트 로직을 사용하여 state 변수를 선언합니다.
+* [`useState`](/reference/react/useState)는 직접 업데이트할 수 있는 State 변수를 선언합니다.
+* [`useReducer`](/reference/react/useReducer)는 [Reducer 함수](/learn/extracting-state-logic-into-a-reducer) 내부의 업데이트 로직을 사용하여 State 변수를 선언합니다.
 
 ```js
 function ImageGallery() {
@@ -29,9 +29,9 @@ function ImageGallery() {
 
 ## Context Hooks {/*context-hooks*/}
 
-*Context*를 사용하면 컴포넌트가 [멀리 있는 부모 컴포넌트로부터 props로 전달하지 않으면서 정보를 받을 수 있습니다.](/learn/passing-props-to-a-component) 예를 들어, 애플리케이션의 최상위 컴포넌트는 현재 UI 테마를 아래의 모든 컴포넌트에 깊이와 상관없이 전달할 수 있습니다.
+*Context*는 컴포넌트가 [Props를 전달하지 않고도 멀리 있는 부모 컴포넌트로부터 정보를 받을 수 있게 해줍니다.](/learn/passing-props-to-a-component) 예를 들어, 애플리케이션의 최상위 컴포넌트는 현재 UI 테마를 아래의 모든 컴포넌트에 깊이와 상관없이 전달할 수 있습니다.
 
-* [`useContext`](/reference/react/useContext)는 context를 읽고 구독합니다.
+* [`useContext`](/reference/react/useContext)는 Context를 읽고 구독합니다.
 
 ```js
 function Button() {
@@ -43,10 +43,10 @@ function Button() {
 
 ## Ref Hooks {/*ref-hooks*/}
 
-*Ref*를 사용하면 컴포넌트가 DOM 노드나 timeout ID와 같이 [렌더링에 사용되지 않는 일부 정보를 보유할 수 있습니다.](/learn/referencing-values-with-refs) state와 달리, ref를 업데이트해도 컴포넌트가 다시 렌더링 되지 않습니다. Ref는 React 패러다임의 "탈출구"입니다. 내장된 브라우저 API와 같이, React가 아닌 시스템으로 작업해야 할 때 유용합니다.
+*Ref*를 사용하면 컴포넌트가 DOM 노드나 Timeout ID와 같이 [렌더링에 사용되지 않는 일부 정보를 보유할 수 있습니다.](/learn/referencing-values-with-refs) State와 달리, Ref는 업데이트를 해도 컴포넌트가 다시 렌더링 되지 않습니다. Ref는 React 패러다임의 "탈출구"입니다. 내장된 브라우저 API와 같이, React가 아닌 시스템으로 작업해야 할 때 유용합니다.
 
-* [`useRef`](/reference/react/useRef)는 ref를 선언합니다. 여기에는 어떤 값이라도 담을 수 있지만, 대부분 DOM 노드를 담는 데 사용됩니다.
-* [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용하면 컴포넌트에 노출되는 ref를 커스텀할 수 있습니다. 이는 드물게 사용됩니다.
+* [`useRef`](/reference/react/useRef)는 Ref를 선언합니다. 여기에는 어떤 값이라도 담을 수 있지만, 대부분 DOM 노드를 담는 데 사용됩니다.
+* [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용하면 컴포넌트에 노출되는 Ref를 커스텀할 수 있습니다. 이는 드물게 사용됩니다.
 
 ```js
 function Form() {
@@ -58,7 +58,7 @@ function Form() {
 
 ## Effect Hooks {/*effect-hooks*/}
 
-*Effects*를 통해 컴포넌트를 [외부 시스템에 연결하고 동기화할 수 있습니다.](/learn/synchronizing-with-effects) 여기에는 네트워크, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리를 사용하여 작성된 위젯, 기타 React가 아닌 코드를 다루는 것이 포함됩니다.
+*Effect*를 통해 컴포넌트를 [외부 시스템에 연결하고 동기화할 수 있습니다.](/learn/synchronizing-with-effects) 여기에는 네트워크, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리를 사용하여 작성된 위젯, 기타 React가 아닌 코드를 다루는 것이 포함됩니다.
 
 * [`useEffect`](/reference/react/useEffect)는 컴포넌트를 외부 시스템에 연결합니다.
 
@@ -74,7 +74,7 @@ function ChatRoom({ roomId }) {
 
 Effect는 React 패러다임의 "탈출구"입니다. 애플리케이션의 데이터 흐름을 조정하기 위해 Effect를 쓰지 마세요. 외부 시스템과 상호작용하지 않는다면, [Effect가 필요하지 않을 수도 있습니다.](/learn/you-might-not-need-an-effect)
 
-`useEffect`에는 타이밍 차이가 있지만 거의 사용되지 않는 두 가지 변형이 있습니다.
+타이밍에서 차이가 있는 `useEffect`의 두 가지 드물게 사용되는 변형이 있습니다.
 
 * [`useLayoutEffect`](/reference/react/useLayoutEffect)는 브라우저가 화면을 다시 그리기 전에 실행됩니다. 여기에서 레이아웃을 계산할 수 있습니다.
 * [`useInsertionEffect`](/reference/react/useInsertionEffect)는 React가 DOM을 변경하기 전에 실행됩니다. 라이브러리는 여기에 동적 CSS를 삽입할 수 있습니다.
@@ -97,12 +97,12 @@ function TodoList({ todos, tab, theme }) {
 }
 ```
 
-화면을 실제로 업데이트해야 하므로 재렌더링을 건너뛸 수 없는 경우도 있습니다. 이 경우, 동기식이어야 하는 blocking 업데이트(예: input에 입력)와 사용자 인터페이스를 차단할 필요가 없는 non-blocking 업데이트(예: 차트 업데이트)를 분리하여 성능을 향상시킬 수 있습니다.
+화면을 실제로 업데이트해야 하므로 재렌더링을 건너뛸 수 없는 경우도 있습니다. 이 경우, 동기식이어야 하는 Blocking 업데이트(예: Input에 입력)와 사용자 인터페이스를 차단할 필요가 없는 Non-Blocking 업데이트(예: 차트 업데이트)를 분리하여 성능을 향상시킬 수 있습니다.
 
 렌더링 우선순위를 지정하려면, 다음 Hook 중 하나를 사용하세요.
 
-- [`useTransition`](/reference/react/useTransition)을 사용하면 state 전환을 non-blocking으로 표시하고, 다른 업데이트가 이를 중단하도록 허용할 수 있습니다.
-- [`useDeferredValue`](/reference/react/useDeferredValue)를 사용하면 UI의 중요하지 않은 부분에 대한 업데이트를 연기하고, 다른 부분이 먼저 업데이트되도록 할 수 있습니다.
+- [`useTransition`](/reference/react/useTransition)을 사용하면 State 전환을 Non-Blocking으로 표시하고, 다른 업데이트가 이를 중단하도록 허용할 수 있습니다.
+- [`useDeferredValue`](/reference/react/useDeferredValue)를 사용하면 UI의 중요하지 않은 부분에 대한 업데이트를 지연하고, 다른 부분이 먼저 업데이트되도록 할 수 있습니다.
 
 ---
 
@@ -110,10 +110,10 @@ function TodoList({ todos, tab, theme }) {
 
 다음 Hook은 대부분 라이브러리 작성자에게 유용하며 애플리케이션 코드에서는 일반적으로 사용되지 않습니다.
 
-- [`useDebugValue`](/reference/react/useDebugValue)를 사용하면 커스텀 Hook에 대해 React DevTools에 표시해 주는 레이블을 커스텀할 수 있습니다.
+- [`useDebugValue`](/reference/react/useDebugValue)를 사용하면 커스텀 Hook에 대해 React 개발자 도구에 표시하는 레이블을 커스텀할 수 있습니다.
 - [`useId`](/reference/react/useId)를 사용하면 컴포넌트가 고유 ID를 자신과 연결할 수 있습니다. 일반적으로 접근성 API와 함께 사용됩니다.
 - [`useSyncExternalStore`](/reference/react/useSyncExternalStore)를 사용하면 컴포넌트가 외부 저장소를 구독할 수 있습니다.
-* [`useActionState`](/reference/react/useActionState) 를 사용하면 액션을 통해 상태를 관리할 수 있습니다.
+* [`useActionState`](/reference/react/useActionState)를 사용하면 액션을 통해 State를 관리할 수 있습니다.
 
 ---
 

From 2d35bdafe10f3546fba2e2703aed833bbc5a1bc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Thu, 16 Jan 2025 01:53:52 +0900
Subject: [PATCH 46/46] revert: workflows

---
 .github/workflows/analyze.yml       |  1 -
 .github/workflows/site_lint.yml     |  2 --
 .github/workflows/textlint_lint.yml | 10 ----------
 .github/workflows/textlint_test.yml |  9 ---------
 4 files changed, 22 deletions(-)

diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml
index f5d2041eb..555efe26b 100644
--- a/.github/workflows/analyze.yml
+++ b/.github/workflows/analyze.yml
@@ -2,7 +2,6 @@ name: Analyze Bundle
 
 on:
   pull_request:
-  pull_request_target:
   push:
     branches:
       - main # change this if your default branch is named differently
diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml
index 139451d32..2b01231eb 100644
--- a/.github/workflows/site_lint.yml
+++ b/.github/workflows/site_lint.yml
@@ -6,8 +6,6 @@ on:
       - main # change this if your default branch is named differently
   pull_request:
     types: [opened, synchronize, reopened]
-  pull_request_target:
-    types: [opened, synchronize, reopened]
 
 jobs:
   lint:
diff --git a/.github/workflows/textlint_lint.yml b/.github/workflows/textlint_lint.yml
index 74a45b0e8..8c15e1214 100644
--- a/.github/workflows/textlint_lint.yml
+++ b/.github/workflows/textlint_lint.yml
@@ -19,16 +19,6 @@ on:
       - 'textlint/**/*.js'
       - '.github/workflows/textlint_lint.yml'
 
-  pull_request_target:
-    types:
-      - opened
-      - synchronize
-      - reopened
-    paths:
-      - 'src/**/*.md'
-      - 'textlint/**/*.js'
-      - '.github/workflows/textlint_lint.yml'
-
 jobs:
   Lint:
     runs-on: ubuntu-latest
diff --git a/.github/workflows/textlint_test.yml b/.github/workflows/textlint_test.yml
index 30cb94d5c..10af72be0 100644
--- a/.github/workflows/textlint_test.yml
+++ b/.github/workflows/textlint_test.yml
@@ -17,15 +17,6 @@ on:
       - 'textlint/**/*.js'
       - '.github/workflows/textlint_test.yml'
 
-  pull_request_target:
-    types:
-      - opened
-      - synchronize
-      - reopened
-    paths:
-      - 'textlint/**/*.js'
-      - '.github/workflows/textlint_test.yml'
-
 jobs:
   Test:
     runs-on: ubuntu-latest