From 9534dc7accffdb02054f284c93e187f177dcbb9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= <rpfos@naver.com>
Date: Wed, 27 May 2026 19:41:33 +0900
Subject: [PATCH 1/2] docs: fix typos

---
 .../learn/lifecycle-of-reactive-effects.md    |  2 +-
 .../learn/removing-effect-dependencies.md     | 48 +++++++++----------
 src/content/reference/react/useEffect.md      |  2 +-
 src/content/reference/react/useRef.md         | 10 ++--
 .../reference/react/useSyncExternalStore.md   | 46 +++++++++---------
 5 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md
index a54ce29b2..0a1d9ff78 100644
--- a/src/content/learn/lifecycle-of-reactive-effects.md
+++ b/src/content/learn/lifecycle-of-reactive-effects.md
@@ -753,7 +753,7 @@ function ChatRoom() {
 useEffect(() => {
   // ...
   // 🔴 이런 식으로 린트를 억누르지 마세요.
-  // eslint-ignore-next-line react-hooks/exhaustive-deps
+  // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);
 ```
 
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index 2a8ce4a0c..b2c4cb5a9 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -18,7 +18,7 @@ Effect를 작성하면 린터는 Effect의 의존성 목록에 Effect가 읽는
 
 </YouWillLearn>
 
-## 의존성은 코드와 일치해야 합니다. {/*dependencies-should-match-the-code*/}
+## 의존성은 코드와 일치해야 합니다 {/*dependencies-should-match-the-code*/}
 
 Effect를 작성할 때는 먼저 Effect가 수행하기를 원하는 작업을 [시작하고 중지](/learn/lifecycle-of-reactive-effects#the-lifecycle-of-an-effect)하는 방법을 지정합니다.
 
@@ -96,7 +96,7 @@ button { margin-left: 10px; }
 
 </Sandpack>
 
-린터에 표시된 내용에 따라 채우세요:
+린터에 표시된 내용에 따라 채우세요.
 
 ```js {6}
 function ChatRoom({ roomId }) {
@@ -205,7 +205,7 @@ function ChatRoom({ roomId }) {
 
 그리고 린터가 맞을 것입니다! `roomId`는 시간이 지남에 따라 변경될 수 있으므로 코드에 버그가 발생할 수 있습니다.
 
-**의존성을 제거하려면 해당 컴포넌트가 의존성이 될 *필요가 없다는 것*을 린터에 "증명"하세요.** 예를 들어 `roomId`를 컴포넌트 밖으로 이동시켜서 반응형값이 아니고 재렌더링 시에도 변경되지 않음을 증명할 수 있습니다.
+**의존성을 제거하려면 해당 컴포넌트가 의존성이 될 *필요가 없다는 것*을 린터에 "증명"하세요.** 예를 들어 `roomId`를 컴포넌트 밖으로 이동시켜서 반응형 값이 아니고 재렌더링 시에도 변경되지 않음을 증명할 수 있습니다.
 
 ```js {2,9}
 const serverUrl = 'https://localhost:1234';
@@ -265,7 +265,7 @@ button { margin-left: 10px; }
 
 이것이 [빈(`[]`) 의존성 목록](/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means)을 지정할 수 있는 이유입니다. Effect는 더 이상 반응형 값에 의존하지 않으므로 컴포넌트의 props나 State가 변경될 때 Effect를 다시 실행할 필요가 없습니다.
 
-### 의존성을 변경하려면 코드를 변경하세요. {/*to-change-the-dependencies-change-the-code*/}
+### 의존성을 변경하려면 코드를 변경하세요 {/*to-change-the-dependencies-change-the-code*/}
 
 작업 흐름에서 패턴을 발견했을 수도 있습니다.
 
@@ -284,7 +284,7 @@ button { margin-left: 10px; }
 ```js {3-4}
 useEffect(() => {
   // ...
-  // 🔴 이렇게 린터를 억제하지 마세요:
+  // 🔴 이렇게 린터를 억제하지 마세요.
   // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);
 ```
@@ -328,7 +328,7 @@ export default function Timer() {
       </h1>
       <hr />
       <p>
-        Every second, increment by:
+        Every second, increment by.
         <button disabled={increment === 0} onClick={() => {
           setIncrement(i => i - 1);
         }}>–</button>
@@ -350,7 +350,7 @@ button { margin: 10px; }
 
 "마운트할 때만" Effect를 실행하고 싶다고 가정해 봅시다. [빈(`[]`) 의존성](/learn/lifecycle-of-reactive-effects#what-an-effect-with-empty-dependencies-means)이 그렇게 한다는 것을 읽었으므로 린터를 무시하고 `[]` 의존성을 강제로 지정하기로 결정했습니다.
 
-이 카운터는 두 개의 버튼으로 설정할 수 있는 양만큼 매초마다 증가해야 합니다. 하지만 이 Effect가 아무 것도 의존하지 않는다고 React에 "거짓말"을 했기 때문에, React는 초기 렌더링에서 계속 `onTick` 함수를 사용합니다. [이 렌더링에서](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `count`는 `0`이었고 `increment`는 `1`이었습니다. 그래서 이 렌더링의 `onTick`은 항상 매초마다 `setCount(0 + 1)`를 호출하고 항상 `1`이 표시됩니다. 이와 같은 버그는 여러 컴포넌트에 분산되어 있을 때 수정하기가 더 어렵습니다.
+이 카운터는 두 개의 버튼으로 설정할 수 있는 양만큼 매초마다 증가해야 합니다. 하지만 이 Effect가 어떤 것에도 의존하지 않는다고 React에 "거짓말"을 했기 때문에, React는 초기 렌더링에서 계속 `onTick` 함수를 사용합니다. [이 렌더링에서](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) `count`는 `0`이었고 `increment`는 `1`이었습니다. 그래서 이 렌더링의 `onTick`은 항상 매초마다 `setCount(0 + 1)`를 호출하고 항상 `1`이 표시됩니다. 이와 같은 버그는 여러 컴포넌트에 분산되어 있을 때 수정하기가 더 어렵습니다.
 
 린터를 무시하는 것보다 더 좋은 해결책은 항상 있습니다! 이 코드를 수정하려면 의존성 목록에 `onTick`을 추가해야 합니다. (interval을 한 번만 설정하려면 [`onTick`을 Effect 이벤트로 만드세요.](/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events))
 
@@ -360,7 +360,7 @@ button { margin: 10px; }
 
 ## 불필요한 의존성 제거하기 {/*removing-unnecessary-dependencies*/}
 
-코드를 반영하기 위해 Effect의 의존성을 조정할 때마다 의존성 목록을 살펴보십시오. 이러한 의존성 중 하나라도 변경되면 Effect가 다시 실행되는 것이 합리적일까요? 가끔 대답은 "아니오"입니다.
+코드를 반영하기 위해 Effect의 의존성을 조정할 때마다 의존성 목록을 살펴보세요. 이러한 의존성 중 하나라도 변경되면 Effect가 다시 실행되는 것이 합리적일까요? 가끔 대답은 "아니오"입니다.
 
 * 다른 조건에서 Effect의 *다른 부분*을 다시 실행하고 싶을 수도 있습니다.
 * 일부 의존성의 변경에 "반응"하지 않고 "최신 값"만 읽고 싶을 수도 있습니다.
@@ -370,7 +370,7 @@ button { margin: 10px; }
 
 ### 이 코드를 이벤트 핸들러로 옮겨야 하나요? {/*should-this-code-move-to-an-event-handler*/}
 
-가장 먼저 고려해야 할 것은 이 코드가 Effect 되어야 하는지 여부입니다.
+가장 먼저 고려해야 할 것은 이 코드가 Effect여야 하는지 여부입니다.
 
 폼을 상상해 봅시다. 제출할 때 `submitted` State 변수를 `true`로 설정합니다. POST 요청을 보내고 알림을 표시해야 합니다. 이 로직은 `submitted`가 `true`가 될 때 "반응"하는 Effect 안에 넣었습니다.
 
@@ -394,7 +394,7 @@ function Form() {
 }
 ```
 
-나중에 현재 테마에 따라 알림 메시지의 스타일을 지정하고 싶으므로 현재 테마를 읽습니다. `theme`는 컴포넌트 본문에서 선언되었기때문에 이는 반응형 값이므로 의존성으로 추가합니다.
+나중에 현재 테마에 따라 알림 메시지의 스타일을 지정하고 싶으므로 현재 테마를 읽습니다. `theme`는 컴포넌트 본문에서 선언되었기 때문에 이는 반응형 값이므로 의존성으로 추가합니다.
 
 ```js {3,9,11}
 function Form() {
@@ -437,7 +437,7 @@ function Form() {
 
 이제 코드가 이벤트 핸들러에 있고, 이는 반응형 코드가 아니므로 사용자가 폼을 제출할 때만 실행됩니다. [이벤트 핸들러와 Effect 중에서 선택하는 방법](/learn/separating-events-from-effects#reactive-values-and-reactive-logic)과 [불필요한 Effect를 삭제하는 방법](/learn/you-might-not-need-an-effect)에 대해 자세히 알아보세요.
 
-### Effect 가 관련 없는 여러 가지 작업을 수행하나요? {/*is-your-effect-doing-several-unrelated-things*/}
+### Effect가 관련 없는 여러 가지 작업을 수행하나요? {/*is-your-effect-doing-several-unrelated-things*/}
 
 다음으로 스스로에게 물어봐야 할 질문은 Effect가 서로 관련이 없는 여러 가지 작업을 수행하고 있는지 여부입니다.
 
@@ -552,7 +552,7 @@ function ShippingForm({ country }) {
 
 이제 첫 번째 Effect는 `country`가 변경될 때만 다시 실행되고, 두 번째 Effect는 `city`가 변경될 때 다시 실행됩니다. 목적에 따라 분리했으니, 서로 다른 두 가지가 두 개의 개별 Effect에 의해 동기화됩니다. 두 개의 개별 Effect에는 두 개의 개별 의존성 목록이 있으므로 의도치 않게 서로를 트리거하지 않습니다.
 
-최종 코드는 원본보다 길지만 Effect를 분할하는 것이 여전히 정확합니다. [각 Effect는 독립적인 동기화 프로세스를 나타내야 합니다.](/learn/lifecycle-of-reactive-effects#each-effect-represents-a-separate-synchronization-process) 이 예시에서는 한 Effect를 삭제해도 다른 Effect의 로직이 깨지지 않습니다. 즉, *서로 다른 것을 동기화*하므로 분할하는 것이 좋습니다. [중복이 걱정된다면 반복되는 로직을 커스텀 훅으로 추출](/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks)하여 이 코드를 개선할 수 있습니다.
+최종 코드는 원본보다 길지만 Effect를 분할하는 것이 여전히 정확합니다. [각 Effect는 독립적인 동기화 프로세스를 나타내야 합니다.](/learn/lifecycle-of-reactive-effects#each-effect-represents-a-separate-synchronization-process) 이 예시에서는 한 Effect를 삭제해도 다른 Effect의 로직이 깨지지 않습니다. 즉, *서로 다른 것을 동기화*하므로 분할하는 것이 좋습니다. [중복이 걱정된다면 반복되는 로직을 커스텀 Hook으로 추출](/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks)하여 이 코드를 개선할 수 있습니다.
 
 ### 다음 State를 계산하기 위해 어떤 State를 읽고 있나요? {/*are-you-reading-some-state-to-calculate-the-next-state*/}
 
@@ -590,7 +590,7 @@ function ChatRoom({ roomId }) {
 
 메시지를 수신할 때마다 `setMessages()`는 컴포넌트가 수신된 메시지를 포함하는 새 `messages` 배열로 재렌더링하도록 합니다. 하지만 이 Effect는 이제 `messages`에 따라 달라지므로 Effect도 다시 동기화됩니다. 따라서 새 메시지가 올 때마다 채팅이 다시 연결됩니다. 사용자가 원하지 않을 것입니다!
 
-이 문제를 해결하려면 Effect 내에서 `messages`를 읽지 마세요. 대신 [업데이터 함수](/reference/react/useState#updating-state-based-on-the-previous-state)를 `setMessages`에 전달하세요:
+이 문제를 해결하려면 Effect 내에서 `messages`를 읽지 마세요. 대신 [업데이터 함수](/reference/react/useState#updating-state-based-on-the-previous-state)를 `setMessages`에 전달하세요.
 
 ```js {7,10}
 function ChatRoom({ roomId }) {
@@ -652,7 +652,7 @@ function ChatRoom({ roomId }) {
 
 문제는 (사용자가 `isMuted` 토글을 누르는 등) `isMuted`가 변경될 때마다 Effect가 다시 동기화되고 채팅에 다시 연결된다는 점입니다. 이는 바람직한 사용자 경험이 아닙니다! (이 예시에서는 린터를 비활성화해도 작동하지 않습니다. 그렇게 하면 `isMuted`가 이전 값으로 '고착'됩니다.)
 
-이 문제를 해결하려면 Effect에서 반응해서는 안 되는 로직을 추출해야 합니다. 이 Effect가 `isMuted`의 변경에 "반응"하지 않기를 원합니다. [이 비반응 로직을 Effect 이벤트로 옮기면 됩니다](/learn/separating-events-from-effects#declaring-an-effect-event):
+이 문제를 해결하려면 Effect에서 반응해서는 안 되는 로직을 추출해야 합니다. 이 Effect가 `isMuted`의 변경에 "반응"하지 않기를 원합니다. [이 비반응 로직을 Effect 이벤트로 옮기면 됩니다](/learn/separating-events-from-effects#declaring-an-effect-event).
 
 ```js {1,7-12,18,21}
 import { useState, useEffect, useEffectEvent } from 'react';
@@ -711,7 +711,7 @@ function ChatRoom({ roomId, onReceiveMessage }) {
 />
 ```
 
-`onReceiveMessage`는 의존성이므로 부모가 재렌더링할 때마다 Effect가 다시 동기화됩니다. 그러면 채팅에 다시 연결됩니다. 이 문제를 해결하려면 호출을 Effect 이벤트로 감싸세요:
+`onReceiveMessage`는 의존성이므로 부모가 재렌더링할 때마다 Effect가 다시 동기화됩니다. 그러면 채팅에 다시 연결됩니다. 이 문제를 해결하려면 호출을 Effect 이벤트로 감싸세요.
 
 ```js {4-6,12,15}
 function ChatRoom({ roomId, onReceiveMessage }) {
@@ -785,7 +785,7 @@ function ChatRoom({ roomId }) {
   // ...
 ```
 
-의존성으로 선언하는 것이 중요합니다! 이렇게 하면 예를 들어 `roomId`가 변경되면 Effect가 새 `options`으로 채팅에 다시 연결됩니다. 하지만 위 코드에도 문제가 있습니다. 이를 확인하려면 아래 샌드박스의 인풋에 타이핑하고 콘솔에서 어떤 일이 발생하는지 살펴보세요:
+의존성으로 선언하는 것이 중요합니다! 이렇게 하면 예를 들어 `roomId`가 변경되면 Effect가 새 `options`으로 채팅에 다시 연결됩니다. 하지만 위 코드에도 문제가 있습니다. 이를 확인하려면 아래 샌드박스의 인풋에 타이핑하고 콘솔에서 어떤 일이 발생하는지 살펴보세요.
 
 <Sandpack>
 
@@ -1095,7 +1095,7 @@ function ChatRoom({ options }) {
 />
 ```
 
-이렇게 하면 부모 컴포넌트가 재렌더링할 때마다 Effect가 다시 연결됩니다. 이 문제를 해결하려면 Effect 외부의 객체에서 정보를 읽고 객체 및 함수 의존성을 피하십시오:
+이렇게 하면 부모 컴포넌트가 재렌더링할 때마다 Effect가 다시 연결됩니다. 이 문제를 해결하려면 Effect 외부의 객체에서 정보를 읽고 객체 및 함수 의존성을 피하세요.
 
 ```js {4,7-8,12}
 function ChatRoom({ options }) {
@@ -1115,7 +1115,7 @@ function ChatRoom({ options }) {
 
 로직은 약간 반복적입니다 (Effect 외부의 객체에서 일부 값을 읽은 다음 Effect 내부에 동일한 값을 가진 객체를 만듭니다). 하지만 Effect가 실제로 어떤 정보에 의존하는지 매우 명확하게 알 수 있습니다. 부모 컴포넌트에 의해 의도치 않게 객체가 다시 생성된 경우 채팅이 다시 연결되지 않습니다. 하지만 `options.roomId` 또는 `options.serverUrl`이 실제로 다른 경우 채팅이 다시 연결됩니다.
 
-#### 함수에서 원시값 계산 {/*calculate-primitive-values-from-functions*/}
+#### 함수에서 원시 값 계산 {/*calculate-primitive-values-from-functions*/}
 
 함수에 대해서도 동일한 접근 방식을 사용할 수 있습니다. 예를 들어 부모 컴포넌트가 함수를 전달한다고 가정해 보겠습니다.
 
@@ -1206,7 +1206,7 @@ export default function Timer() {
 
 <Solution>
 
-Effect 내부에서 `count` State를 `count + 1`로 업데이트하고 싶습니다. 그러나 이렇게 하면 Effect가 틱할 때마다 변경되는 `count`에 의존하게되므로 매 틱마다 인터벌이 다시 만들어집니다.
+Effect 내부에서 `count` State를 `count + 1`로 업데이트하고 싶습니다. 그러나 이렇게 하면 Effect가 틱할 때마다 변경되는 `count`에 의존하게 되므로 매 틱마다 인터벌이 다시 만들어집니다.
 
 이 문제를 해결하려면 [업데이터 함수](/reference/react/useState#updating-state-based-on-the-previous-state)를 사용하여 `setCount(count + 1)` 대신 `setCount(c => c + 1)`를 작성합니다.
 
@@ -1242,7 +1242,7 @@ Effect 내부에서 `count`를 읽는 대신 `c => c + 1` 명령어("이 숫자
 
 #### 애니메이션을 다시 촉발하는 현상 고치기 {/*fix-a-retriggering-animation*/}
 
-이 예시에서는 "Show"를 누르면 환영 메시지가 페이드인 합니다. 애니메이션은 1초 정도 걸립니다."Remove"를 누르면 환영 메시지가 즉시 사라집니다. 페이드인 애니메이션의 로직은 `animation.js` 파일에서 일반 자바스크립트 애니메이션 루프로 구현됩니다. 이 로직을 변경할 필요는 없습니다. 서드파티 라이브러리로 처리하면 됩니다. Effect는 DOM 노드에 대한 `FadeInAnimation` 인스턴스를 생성한 다음 `start(duration)` 또는 `stop()`을 호출하여 애니메이션을 제어합니다. `duration`은 슬라이더로 제어합니다. 슬라이더를 조정하여 애니메이션이 어떻게 변하는지 확인하세요.
+이 예시에서는 "Show"를 누르면 환영 메시지가 페이드인합니다. 애니메이션은 1초 정도 걸립니다. "Remove"를 누르면 환영 메시지가 즉시 사라집니다. 페이드인 애니메이션의 로직은 `animation.js` 파일에서 일반 자바스크립트 애니메이션 루프로 구현됩니다. 이 로직을 변경할 필요는 없습니다. 서드 파티 라이브러리로 처리하면 됩니다. Effect는 DOM 노드에 대한 `FadeInAnimation` 인스턴스를 생성한 다음 `start(duration)` 또는 `stop()`을 호출하여 애니메이션을 제어합니다. `duration`은 슬라이더로 제어합니다. 슬라이더를 조정하여 애니메이션이 어떻게 변하는지 확인하세요.
 
 이 코드는 이미 작동하지만 변경하고 싶은 부분이 있습니다. 현재 `duration` State 변수를 제어하는 슬라이더를 움직이면 애니메이션이 다시 촉발됩니다. Effect가 `duration` 변수에 "반응"하지 않도록 동작을 변경하세요. "Show"를 누르면 Effect는 슬라이더의 현재 `duration`을 사용해야 합니다. 그러나 슬라이더를 움직이는 것만으로 애니메이션이 다시 촉발되어서는 안 됩니다.
 
@@ -1476,7 +1476,7 @@ html, body { min-height: 300px; }
 
 이 예시에서는 'Toggle theme'을 누를 때마다 채팅이 다시 연결됩니다. 왜 이런 일이 발생하나요? 서버 URL을 편집하거나 다른 채팅방을 선택할 때만 채팅이 다시 연결되도록 실수를 수정하세요.
 
-`chat.js`를 외부 서드파티 라이브러리로 취급하여 API를 확인하기 위해 참조할 수는 있지만 편집해서는 안 됩니다.
+`chat.js`를 외부 서드 파티 라이브러리로 취급하여 API를 확인하기 위해 참조할 수는 있지만 편집해서는 안 됩니다.
 
 <Hint>
 
@@ -1576,7 +1576,7 @@ label, button { display: block; margin-bottom: 5px; }
 
 Effect가 `options` 객체에 의존하기 때문에 다시 실행되고 있습니다. 객체는 의도치 않게 다시 생성될 수 있으므로 가능하면 Effect의 의존성 요소로 지정하지 않도록 해야 합니다.
 
-가장 덜 공격적인 수정 방법은 Effect 외부에서 `roomId`와 `serverUrl`을 읽은 다음 Effect가 이러한 기본 값에 의존하도록 만드는 것입니다(의도치 않게 변경할 수 없음). Effect 내부에서, 객체를 생성하고 이를 `createConnection`에 전달합니다.
+가장 덜 공격적인 수정 방법은 Effect 외부에서 `roomId`와 `serverUrl`을 읽은 다음 Effect가 이러한 원시 값에 의존하도록 만드는 것입니다(의도치 않게 변경할 수 없음). Effect 내부에서, 객체를 생성하고 이를 `createConnection`에 전달합니다.
 
 <Sandpack>
 
@@ -1994,7 +1994,7 @@ label, button { display: block; margin-bottom: 5px; }
 
 <Solution>
 
-이 문제를 해결하는 올바른 방법은 여러 가지가 있는데, 그 중 한 가지 해결책을 소개합니다.
+이 문제를 해결하는 올바른 방법은 여러 가지가 있는데, 그중 한 가지 해결책을 소개합니다.
 
 원래 예시에서는 테마를 변경하면 다른 `onMessage` 및 `createConnection` 함수가 생성되어 전달되었습니다. Effect가 이러한 함수에 의존했기 때문에 테마를 전환할 때마다 채팅이 다시 연결되었습니다.
 
@@ -2012,7 +2012,7 @@ export default function ChatRoom({ roomId, createConnection, onMessage }) {
 
 `onMessage` props와 달리 `onReceiveMessage` Effect 이벤트는 반응하지 않습니다. 그렇기 때문에 Effect의 의존성이 될 필요가 없습니다. 따라서 `onMessage`를 변경해도 채팅이 다시 연결되지 않습니다.
 
-반응형이어야 하기 때문에 `createConnection`으로는 동일한 작업을 수행할 수 없습니다. 사용자가 암호화 연결과 비암호화 연결 사이를 전환하거나 사용자가 현재 방을 전환하면 Effect가 다시 촉발되기를 원합니다. 하지만 `createConnection`은 함수이기 때문에 이 함수가 읽는 정보가 실제로 변경되었는지 여부를 확인할 수 없습니다. 이 문제를 해결하려면 `App` 컴포넌트에서 `createConnection`을 전달하는 대신 원시값인 `roomId` 및 `isEncrypted`를 전달하세요:
+반응형이어야 하기 때문에 `createConnection`으로는 동일한 작업을 수행할 수 없습니다. 사용자가 암호화 연결과 비암호화 연결 사이를 전환하거나 사용자가 현재 방을 전환하면 Effect가 다시 촉발되기를 원합니다. 하지만 `createConnection`은 함수이기 때문에 이 함수가 읽는 정보가 실제로 변경되었는지 여부를 확인할 수 없습니다. 이 문제를 해결하려면 `App` 컴포넌트에서 `createConnection`을 전달하는 대신 원시 값인 `roomId` 및 `isEncrypted`를 전달하세요.
 
 ```js {2-3}
       <ChatRoom
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 62bb06aa0..a6146c62f 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -1134,7 +1134,7 @@ function ChatRoom() {
 useEffect(() => {
   // ...
   // 🔴 Avoid suppressing the linter like this:
-  // eslint-ignore-next-line react-hooks/exhaustive-deps
+  // eslint-disable-next-line react-hooks/exhaustive-deps
 }, []);
 ```
 
diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md
index c44c2bff7..29018df7f 100644
--- a/src/content/reference/react/useRef.md
+++ b/src/content/reference/react/useRef.md
@@ -512,9 +512,9 @@ function Video() {
 
 <DeepDive>
 
-#### `useRef`를 초기화할 때 null 검사를 피하는 방법 {/*how-to-avoid-null-checks-when-initializing-use-ref-later*/}
+#### `useRef`를 초기화할 때 `null` 검사를 피하는 방법 {/*how-to-avoid-null-checks-when-initializing-use-ref-later*/}
 
-타입 검사기를 사용하면서 항상 `null`을 검사하고 싶지 않다면 다음과 같은 패턴을 대신 사용해 볼 수 있습니다:
+타입 검사기를 사용하면서 항상 `null`을 검사하고 싶지 않다면 다음과 같은 패턴을 대신 사용해 볼 수 있습니다.
 
 ```js
 function Video() {
@@ -542,7 +542,7 @@ function Video() {
 
 ### 커스텀 컴포넌트에 대한 ref를 얻을 수 없습니다 {/*i-cant-get-a-ref-to-a-custom-component*/}
 
-컴포넌트에 `ref`를 전달하고자 다음과 같이 하면:
+컴포넌트에 `ref`를 전달하고자 다음과 같이 하면
 
 ```js
 const inputRef = useRef(null);
@@ -550,7 +550,7 @@ const inputRef = useRef(null);
 return <MyInput ref={inputRef} />;
 ```
 
-다음과 같은 오류가 발생할 것입니다:
+다음과 같은 오류가 발생할 것입니다.
 
 <ConsoleBlock level="error">
 
@@ -560,7 +560,7 @@ TypeError: Cannot read properties of null
 
 기본적으로 컴포넌트는 내부의 DOM 노드에 대한 ref를 외부로 노출하지 않습니다.
 
-이 문제를 해결하려면 ref를 가져오고자 하는 컴포넌트를 찾으세요:
+이 문제를 해결하려면 ref를 가져오고자 하는 컴포넌트를 찾으세요.
 
 ```js
 export default function MyInput({ value, onChange }) {
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index 05dd7e921..96e87a42d 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -40,11 +40,11 @@ store에 있는 데이터의 스냅샷을 반환합니다. 두 개의 함수를
 
 #### 매개변수 {/*parameters*/}
 
-* `subscribe`: 하나의 `callback` 인수를 받아 store에 구독하는 함수입니다. store가 변경될 때, 제공된 `callback`이 호출되어 React가 `getSnapshot`을 다시 호출하고 (필요한 경우) 컴포넌트를 다시 렌더링하도록 해야 합니다. `subscribe` 함수는 구독을 정리하는 함수를 반환해야 합니다.
+* `subscribe`: 하나의 `callback` 인수를 받아 store를 구독하는 함수입니다. store가 변경될 때, 제공된 `callback`이 호출되어 React가 `getSnapshot`을 다시 호출하고 (필요한 경우) 컴포넌트를 다시 렌더링하도록 해야 합니다. `subscribe` 함수는 구독을 정리하는 함수를 반환해야 합니다.
 
 * `getSnapshot`: 컴포넌트에 필요한 store 데이터의 스냅샷을 반환하는 함수입니다. store가 변경되지 않은 상태에서 `getSnapshot`을 반복적으로 호출하면 동일한 값을 반환해야 합니다. 저장소가 변경되어 반환된 값이 다르면 ([`Object.is`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is)와 비교하여) React는 컴포넌트를 리렌더링합니다.
 
-* `getServerSnapshot`**(선택사항)**: store에 있는 데이터의 초기 스냅샷을 반환하는 함수입니다. 서버 렌더링 도중과 클라이언트에서 서버 렌더링 된 콘텐츠의 하이드레이션 중에만 사용됩니다. 서버 스냅샷은 클라이언트와 서버 간에 동일해야 하며 일반적으로 직렬화되어 서버에서 클라이언트로 전달됩니다. 이 함수가 제공되지 않으면 서버에서 컴포넌트를 렌더링할 때 오류가 발생합니다.
+* `getServerSnapshot`**(선택사항)**: store에 있는 데이터의 초기 스냅샷을 반환하는 함수입니다. 서버 렌더링 도중과 클라이언트에서 서버 렌더링된 콘텐츠의 하이드레이션 중에만 사용됩니다. 서버 스냅샷은 클라이언트와 서버 간에 동일해야 하며 일반적으로 직렬화되어 서버에서 클라이언트로 전달됩니다. 이 함수가 제공되지 않으면 서버에서 컴포넌트를 렌더링할 때 오류가 발생합니다.
 
 #### 반환값 {/*returns*/}
 
@@ -52,13 +52,13 @@ store에 있는 데이터의 스냅샷을 반환합니다. 두 개의 함수를
 
 #### 주의 사항 {/*caveats*/}
 
-* `getSnapshot`이 반환하는 store 스냅샷은 불변이어야 합니다. 기본 스토어에 변경 가능한 데이터가 있는 경우 데이터가 변경된 경우 변경 불가능한 새 스냅샷을 반환합니다. 그렇지 않으면 캐시 된 마지막 스냅샷을 반환합니다.
+* `getSnapshot`이 반환하는 store 스냅샷은 불변이어야 합니다. 기본 스토어에 변경 가능한 데이터가 있는 경우 데이터가 변경되었을 때 변경 불가능한 새 스냅샷을 반환합니다. 그렇지 않으면 캐시된 마지막 스냅샷을 반환합니다.
 
-* 리렌더링하는 동안 다른 `subscribe` 함수가 전달되면 React는 새로 전달된 `subscribe` 함수를 사용하여 저장소를 다시 구독합니다. 컴포넌트 외부에서 `subscribe` 를 선언하면 이를 방지할 수 있습니다.
+* 리렌더링하는 동안 다른 `subscribe` 함수가 전달되면 React는 새로 전달된 `subscribe` 함수를 사용하여 저장소를 다시 구독합니다. 컴포넌트 외부에서 `subscribe`를 선언하면 이를 방지할 수 있습니다.
 
 * [non-blocking transition 업데이트](/reference/react/useTransition) 중에 스토어가 변경되면, React는 해당 업데이트를 blocking으로 수행하도록 되돌아갑니다. 구체적으로, 모든 Transition 업데이트에 대해 React는 DOM에 변경 사항을 적용하기 직전에 `getSnapshot`을 한 번 더 호출합니다. 처음 호출했을 때와 다른 값을 반환하면, React는 처음부터 다시 업데이트를 시작하고, 이번에는 blocking 업데이트를 적용하여 화면의 모든 컴포넌트가 같은 스토어 버전을 반영하도록 합니다.
 
-* `useSyncExternalStore`가 반환한 스토어 값을 기반으로 렌더링을 _일시 중단_ 하는 것은 권장하지 않습니다. 그 이유는 외부 스토어에 대한 변형을 [non-blocking transition 업데이트](/reference/react/useTransition)로 표시할 수 없기 때문에, 가장 가까운 [`Suspense` fallback](/reference/react/Suspense)을 트리거해서, 화면에서 로딩 스피너로 대체하여, 일반적으로 UX가 좋지 않기 때문입니다.
+* `useSyncExternalStore`가 반환한 스토어 값을 기반으로 렌더링을 <em>일시 중단</em>하는 것은 권장하지 않습니다. 그 이유는 외부 스토어에 대한 변경을 [non-blocking transition 업데이트](/reference/react/useTransition)로 표시할 수 없기 때문에, 가장 가까운 [`Suspense` fallback](/reference/react/Suspense)을 트리거해서 화면의 내용을 로딩 스피너로 대체할 수 있고, 일반적으로 UX가 좋지 않기 때문입니다.
 
   예를 들어, 다음은 권장되지 않습니다.
 
@@ -69,7 +69,7 @@ store에 있는 데이터의 스냅샷을 반환합니다. 두 개의 함수를
     const selectedProductId = useSyncExternalStore(...);
 
     // ❌ `selectedProductId`에 종속된 Promise로 `use`를 호출하는 것
-    const data = use(fetchItem(selectedProductId))
+    const data = use(fetchItem(selectedProductId));
 
     // ❌ `selectedProductId`를 기반으로 지연 컴포넌트를 조건부로 렌더링하는 것
     return selectedProductId != null ? <LazyProductDetailPage /> : <FeaturedProducts />;
@@ -84,7 +84,7 @@ store에 있는 데이터의 스냅샷을 반환합니다. 두 개의 함수를
 
 대부분의 React 컴포넌트는 [props](/learn/passing-props-to-a-component), [state](/reference/react/useState), 그리고 [context](/reference/react/useContext)에서만 데이터를 읽습니다. 하지만 때로는 컴포넌트가 시간이 지남에 따라 변경되는 React 외부의 일부 저장소에서 일부 데이터를 읽어야 하는 경우가 있습니다. 다음이 포함됩니다.
 
-* React 외부에 state를 보관하는 서드파티 상태 관리 라이브러리.
+* React 외부에 state를 보관하는 서드 파티 상태 관리 라이브러리.
 * 변경 가능한 값을 노출하는 브라우저 API와 그 변경 사항을 구독하는 이벤트.
 
 외부 데이터 저장소에서 값을 읽으려면 컴포넌트의 최상위 레벨에서 `useSyncExternalStore`를 호출하세요.
@@ -101,12 +101,12 @@ function TodosApp() {
 
 store에 있는 데이터의 <CodeStep step={3}>snapshot</CodeStep>을 반환합니다. 두 개의 함수를 인수로 전달해야 합니다.
 
-1. <CodeStep step={1}>`subscribe`</CodeStep> 함수는 store에 구독하고 구독을 취소하는 함수를 반환해야 합니다.
+1. <CodeStep step={1}>`subscribe`</CodeStep> 함수는 store를 구독하고 구독을 취소하는 함수를 반환해야 합니다.
 2. <CodeStep step={2}>`getSnapshot`</CodeStep> 함수는 store에서 데이터의 스냅샷을 읽어야 합니다.
 
-React는 이 함수를 사용해 컴포넌트를 store에 구독한 상태로 유지하고 변경 사항이 있을 때 리렌더링합니다.
+React는 이 함수들을 사용해 컴포넌트가 store를 구독한 상태를 유지하게 하고 변경 사항이 있을 때 리렌더링합니다.
 
-예를 들어 아래 샌드박스에서 `todosStore`는 React 외부에 데이터를 저장하는 외부 store로 구현되어 있습니다. `TodosApp`컴포넌트는 `useSyncExternalStore` Hook으로 해당 외부 store에 연결합니다.
+예를 들어 아래 샌드박스에서 `todosStore`는 React 외부에 데이터를 저장하는 외부 store로 구현되어 있습니다. `TodosApp` 컴포넌트는 `useSyncExternalStore` Hook으로 해당 외부 store에 연결합니다.
 
 <Sandpack>
 
@@ -131,7 +131,7 @@ export default function TodosApp() {
 ```
 
 ```js src/todoStore.js
-// 이것은 third-party store의 예시입니다
+// 이것은 서드 파티 store의 예시입니다
 // 해당 store를 사용하는 경우 React와 통합할 필요가 있을 수 있습니다.
 
 // 앱이 React로 완전히 빌드된 경우,
@@ -143,7 +143,7 @@ let listeners = [];
 
 export const todosStore = {
   addTodo() {
-    todos = [...todos, { id: nextId++, text: 'Todo #' + nextId }]
+    todos = [...todos, { id: nextId++, text: 'Todo #' + nextId }];
     emitChange();
   },
   subscribe(listener) {
@@ -176,7 +176,7 @@ function emitChange() {
 
 ### 브라우저 API 구독 {/*subscribing-to-a-browser-api*/}
 
-`useSyncExternalStore`를 추가하는 또 다른 이유는 시간이 지남에 따라 변경되는 브라우저에 노출되는 일부 값을 구독하려는 경우입니다. 예를 들어 컴포넌트에 네트워크 연결이 활성화되어 있는지 여부를 표시하고 싶다고 가정해 보겠습니다. 브라우저는 [`navigator.onLine`.](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine)이라는 속성을 통해 이 정보를 노출합니다.
+`useSyncExternalStore`를 추가하는 또 다른 이유는 시간이 지남에 따라 변경되는 브라우저에 노출되는 일부 값을 구독하려는 경우입니다. 예를 들어 컴포넌트에 네트워크 연결이 활성화되어 있는지 여부를 표시하고 싶다고 가정해 보겠습니다. 브라우저는 [`navigator.onLine`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine)이라는 속성을 통해 이 정보를 노출합니다.
 
 이 값은 시간이 지남에 따라 React가 알지 못하는 사이에 변경될 수 있으므로 `useSyncExternalStore`로 값을 읽어야 합니다.
 
@@ -197,7 +197,7 @@ function getSnapshot() {
 }
 ```
 
-다음으로 `subscribe` 함수를 구현해야 합니다. 예를 들어 `navigator.onLine`이 변경되면 브라우저는 `window` 객체에서 [`online`](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event) 및 [`offline`](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event) 이벤트를 실행합니다. `callback` 인수를 해당 이벤트에 구독한 다음 구독을 정리하는 함수를 반환해야 합니다.
+다음으로 `subscribe` 함수를 구현해야 합니다. 예를 들어 `navigator.onLine`이 변경되면 브라우저는 `window` 객체에서 [`online`](https://developer.mozilla.org/en-US/docs/Web/API/Window/online_event) 및 [`offline`](https://developer.mozilla.org/en-US/docs/Web/API/Window/offline_event) 이벤트를 실행합니다. `callback` 인수를 해당 이벤트에 등록한 다음 구독을 정리하는 함수를 반환해야 합니다.
 
 ```js
 function subscribe(callback) {
@@ -240,11 +240,11 @@ function subscribe(callback) {
 
 ---
 
-### custom Hook으로 로직 추출하기 {/*extracting-the-logic-to-a-custom-hook*/}
+### 커스텀 Hook으로 로직 추출하기 {/*extracting-the-logic-to-a-custom-hook*/}
 
-일반적으로 컴포넌트에서 직접 `useSyncExternalStore`를 작성하지는 않습니다. 대신 일반적으로 custom Hook에서 호출합니다. 이렇게 하면 서로 다른 컴포넌트에서 동일한 외부 저장소를 사용할 수 있습니다.
+일반적으로 컴포넌트에서 직접 `useSyncExternalStore`를 작성하지는 않습니다. 대신 커스텀 Hook에서 호출합니다. 이렇게 하면 서로 다른 컴포넌트에서 동일한 외부 저장소를 사용할 수 있습니다.
 
-예를 들어 이 custom `useOnlineStatus` Hook은 네트워크가 온라인 상태인지 여부를 추적합니다.
+예를 들어 이 커스텀 `useOnlineStatus` Hook은 네트워크가 온라인 상태인지 여부를 추적합니다.
 
 ```js {3,6}
 import { useSyncExternalStore } from 'react';
@@ -358,13 +358,13 @@ function subscribe(callback) {
 `getServerSnapshot` 함수는 `getSnapshot`과 유사하지만 두 가지 상황에서만 실행됩니다.
 
 - HTML을 생성할 때 서버에서 실행됩니다.
-- [hydration](/reference/react-dom/client/hydrateRoot) 중 즉 React가 서버 HTML을 가져와서 인터랙티브하게 만들 때 클라이언트에서 실행됩니다.
+- [hydration](/reference/react-dom/client/hydrateRoot) 중, 즉 React가 서버 HTML을 가져와서 인터랙티브하게 만들 때 클라이언트에서 실행됩니다.
 
 이를 통해 앱이 상호작용하기 전에 사용될 초기 스냅샷 값을 제공할 수 있습니다. 서버 렌더링에 의미 있는 초기값이 없다면 [컴포넌트가 클라이언트에서만 렌더링되도록 강제 설정](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)할 수 있습니다.
 
 <Note>
 
-`getServerSnapshot`이 초기 클라이언트 렌더링에서 서버에서 반환한 것과 동일한 정확한 데이터를 반환하는지 확인하세요. 예를 들어 `getServerSnapshot`이 서버에서 미리 채워진 store 콘텐츠를 반환한 경우 이 콘텐츠를 클라이언트로 전송해야 합니다. 이를 수행하는 일반적인 방법 중 하나는 서버 렌더링 중에 `window.MY_STORE_DATA`와 같은 글로벌을 설정하는 `<script>` 태그를 생성한 다음 클라이언트에서 `getServerSnapshot`에서 해당 글로벌을 읽어오는 것입니다. 외부 스토어에서 이를 수행하는 방법에 대한 지침을 제공해야 합니다.
+`getServerSnapshot`이 초기 클라이언트 렌더링에서 서버에서 반환한 것과 정확히 동일한 데이터를 반환하는지 확인하세요. 예를 들어 `getServerSnapshot`이 서버에서 미리 채워진 store 콘텐츠를 반환한 경우 이 콘텐츠를 클라이언트로 전송해야 합니다. 이를 수행하는 일반적인 방법 중 하나는 서버 렌더링 중에 `window.MY_STORE_DATA`와 같은 글로벌을 설정하는 `<script>` 태그를 생성한 다음 클라이언트의 `getServerSnapshot`에서 해당 글로벌을 읽어오는 것입니다. 외부 스토어는 이를 수행하는 방법에 대한 지침을 제공해야 합니다.
 
 </Note>
 
@@ -387,7 +387,7 @@ function getSnapshot() {
 
 React는 `getSnapshot` 반환 값이 지난번과 다르면 컴포넌트를 리렌더링합니다. 그렇기 때문에 항상 다른 값을 반환하면 무한 루프에 들어가서 이 오류가 발생합니다.
 
-실제로 변경된 사항이 있는 경우에만 `getSnapshot` 객체가 다른 객체를 반환해야 합니다. store에 변경 불가능한 데이터가 포함된 경우 해당 데이터를 직접 반환할 수 있습니다.
+실제로 변경된 사항이 있는 경우에만 `getSnapshot` 함수가 다른 객체를 반환해야 합니다. store에 변경 불가능한 데이터가 포함된 경우 해당 데이터를 직접 반환할 수 있습니다.
 
 ```js {2-3}
 function getSnapshot() {
@@ -396,13 +396,13 @@ function getSnapshot() {
 }
 ```
 
-store 데이터가 변경 가능한 경우 `getSnapshot` 함수는 해당 데이터의 변경 불가능한 스냅샷을 반환해야 합니다. 즉 새 객체를 생성해야 하지만 매번 호출할 때마다 이 작업을 수행해서는 안 됩니다. 대신 마지막으로 계산된 스냅샷을 저장하고 저장소의 데이터가 변경되지 않은 경우 지난번과 동일한 스냅샷을 반환해야 합니다. 변경 가능한 데이터가 변경되었는지 확인하는 방법은 변경 가능한 저장소가 구현된 방식에 따라 다릅니다.
+store 데이터가 변경 가능한 경우 `getSnapshot` 함수는 해당 데이터의 변경 불가능한 스냅샷을 반환해야 합니다. 즉, 새 객체를 생성해야 하지만 매번 호출할 때마다 이 작업을 수행해서는 안 됩니다. 대신 마지막으로 계산된 스냅샷을 저장하고 저장소의 데이터가 변경되지 않은 경우 지난번과 동일한 스냅샷을 반환해야 합니다. 변경 가능한 데이터가 변경되었는지 확인하는 방법은 변경 가능한 저장소가 구현된 방식에 따라 다릅니다.
 
 ---
 
 ### 리렌더링할 때마다 `subscribe` 함수가 호출됩니다. {/*my-subscribe-function-gets-called-after-every-re-render*/}
 
-subscribe 함수는 컴포넌트 내부에 정의되므로 리렌더링할 때마다 달라집니다.
+`subscribe` 함수는 컴포넌트 내부에 정의되므로 리렌더링할 때마다 달라집니다.
 
 ```js {2-5}
 function ChatIndicator() {
@@ -431,7 +431,7 @@ function ChatIndicator() {
 }
 ```
 
-또는 일부 인수가 변경될 때만 다시 구독하도록 `subscribe`을 [`useCallback`](/reference/react/useCallback)으로 래핑합니다.
+또는 일부 인수가 변경될 때만 다시 구독하도록 `subscribe`를 [`useCallback`](/reference/react/useCallback)으로 래핑합니다.
 
 ```js {2-5}
 function ChatIndicator({ userId }) {

From b62ee5dd1f24880f9f4feb3e55563a99a537673b Mon Sep 17 00:00:00 2001
From: lumir <rpfos@naver.com>
Date: Wed, 27 May 2026 19:44:17 +0900
Subject: [PATCH 2/2] Fix typo in removing-effect-dependencies.md

---
 src/content/learn/removing-effect-dependencies.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index b2c4cb5a9..7583f7c43 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -328,7 +328,7 @@ export default function Timer() {
       </h1>
       <hr />
       <p>
-        Every second, increment by.
+        Every second, increment by:
         <button disabled={increment === 0} onClick={() => {
           setIncrement(i => i - 1);
         }}>–</button>