diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md
index daedca980..05763485e 100644
--- a/src/content/learn/choosing-the-state-structure.md
+++ b/src/content/learn/choosing-the-state-structure.md
@@ -1065,7 +1065,7 @@ export const initialTravelPlan = {
childIds: []
},
39: {
- id: 40,
+ id: 39,
title: 'Hawaii (the USA)',
childIds: []
},
@@ -1717,7 +1717,7 @@ export const initialTravelPlan = {
34: {
id: 34,
title: 'Oceania',
- childIds: [35, 36, 37, 38, 39, 40,, 41],
+ childIds: [35, 36, 37, 38, 39, 40, 41],
},
35: {
id: 35,
diff --git a/src/content/learn/editor-setup.md b/src/content/learn/editor-setup.md
index 022a05325..71b287166 100644
--- a/src/content/learn/editor-setup.md
+++ b/src/content/learn/editor-setup.md
@@ -23,7 +23,7 @@ title: 에디터 설정하기
* [WebStorm](https://www.jetbrains.com/ko-kr/webstorm/)은 자바스크립트JavaScript에 특화되어 설계된 통합 개발 환경입니다.
* [Sublime Text](https://www.sublimetext.com/)는 JSX와 타입스크립트TypeScript를 지원하며 [문법 강조](https://stackoverflow.com/a/70960574/458193) 및 자동 완성 기능이 내장되어 있습니다.
-* [Vim](https://www.vim.org/)은 모든 종류의 텍스트를 매우 효율적으로 생성하고 변경할 수 있도록 설계된 텍스트 편집기입니다. 대부분의 UNIX 시스템과 Apple OS X에 "vi"로 포함되어 있습니다.
+* [Vim](https://www.vim.org/)은 모든 종류의 텍스트를 매우 효율적으로 생성하고 변경할 수 있도록 설계된 텍스트 편집기입니다. 대부분의 UNIX 시스템과 macOS에 "vi"로 포함되어 있습니다.
## 에디터 기능 추천 {/*recommended-text-editor-features*/}
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index 5f4201ff6..7bc118d6a 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -440,7 +440,7 @@ export default function Form() {
-여기 `MyInput` 내부의 `realInputRef`는 실제 input DOM 노드를 가지고 있습니다. 하지만 [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용하여 React가 ref를 참조하는 부모 컴포넌트에 직접 구성한 객체를 전달하도록 지시합니다. 따라서 `Form` 컴포넌트 안쪽의 `inputRef.current`는 `foucs` 메서드만 가지고 있습니다. 이 경우 ref는 DOM 노드가 아니라 [`useImperativeHandle`](/reference/react/useImperativeHandle) 호출에서 직접 구성한 객체가 됩니다.
+여기 `MyInput` 내부의 `realInputRef`는 실제 input DOM 노드를 가지고 있습니다. 하지만 [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용하여 React가 ref를 참조하는 부모 컴포넌트에 직접 구성한 객체를 전달하도록 지시합니다. 따라서 `Form` 컴포넌트 안쪽의 `inputRef.current`는 `focus` 메서드만 가지고 있습니다. 이 경우 ref는 DOM 노드가 아니라 [`useImperativeHandle`](/reference/react/useImperativeHandle) 호출에서 직접 구성한 객체가 됩니다.
diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md
index be0b2c575..5c5f9051a 100644
--- a/src/content/learn/react-compiler.md
+++ b/src/content/learn/react-compiler.md
@@ -310,7 +310,7 @@ React 컴파일러 워킹 그룹에서도 회원으로 지원하여 피드백을
React 컴파일러는 다음과 같이 가정합니다.
1. 올바르고 의미 있는 자바스크립트 코드로 작성되었습니다.
-2. nullable/optional 값과 속성에 접근하기 전에 그 값이 정의되어 있는지 테스트합니다. 예를 들어, TypeScript를 사용하는 경우 [`strictNullChecks`](https://www.typescriptlang.org/ko/tsconfig/#strictNullChecks)을 활성화하여 수행합니다. 즉, `if (object.nullableProperty) { object.nullableProperty.foo }`와 같이 처리하거나, 옵셔널 체이닝Optional Chaning을 사용하여 `object.nullableProperty?.foo`와 같이 처리합니다.
+2. nullable/optional 값과 속성에 접근하기 전에 그 값이 정의되어 있는지 테스트합니다. 예를 들어, TypeScript를 사용하는 경우 [`strictNullChecks`](https://www.typescriptlang.org/ko/tsconfig/#strictNullChecks)을 활성화하여 수행합니다. 즉, `if (object.nullableProperty) { object.nullableProperty.foo }`와 같이 처리하거나, 옵셔널 체이닝Optional Chaining을 사용하여 `object.nullableProperty?.foo`와 같이 처리합니다.
3. [React의 규칙](/reference/rules)을 따릅니다.
React 컴파일러는 React의 많은 규칙을 정적으로 검증할 수 있으며, 에러가 감지되면 안전하게 컴파일을 건너뜁니다. 에러를 확인하려면 [`eslint-plugin-react-compiler`](https://www.npmjs.com/package/eslint-plugin-react-compiler)의 설치를 권장합니다.
diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md
index e29afdacb..3369ef91b 100644
--- a/src/content/learn/referencing-values-with-refs.md
+++ b/src/content/learn/referencing-values-with-refs.md
@@ -174,12 +174,12 @@ export default function Stopwatch() {
Ref가 State보다 덜 "엄격한" 것으로 생각될 수 있습니다. 예를 들어, 항상 State 설정 함수를 사용하지 않고 변경할 수 있습니다. 하지만 대부분은 State를 사용하고 싶을 것입니다. Ref는 자주 필요하지 않은 "탈출구"입니다. State와 Ref를 비교한 것은 다음과 같습니다.
-| Ref | State |
-|--------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
-| `useRef(initialValue)` 는 `{ current: initialValue }`를 반환합니다. | `useState(initialValue)`는 State 변수의 현재 값과 Setter 함수 `[value, setValue]`를 반환합니다. |
-| State를 바꿔도 리렌더링 하지 않습니다. | State를 바꾸면 리렌더링 합니다. |
+| Ref | State |
+|--------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
+| `useRef(initialValue)` 는 `{ current: initialValue }`를 반환합니다. | `useState(initialValue)`는 State 변수의 현재 값과 Setter 함수 `[value, setValue]`를 반환합니다. |
+| `current` 값을 바꿔도 리렌더링 하지 않습니다. | State를 바꾸면 리렌더링 합니다. |
| Mutable: 렌더링 프로세스 외부에서 `current` 값을 수정 및 업데이트할 수 있습니다. | Immutable: State를 수정하기 위해서는 State 설정 함수를 반드시 사용하여 리렌더링 대기열에 넣어야 합니다. |
-| 렌더링 중에는 `current` 값을 읽거나 쓰면 안 됩니다. | 언제든지 State를 읽을 수 있습니다. 그러나 각 렌더링마다 변경되지 않는 자체적인 State의 [Snapshot](/learn/state-as-a-snapshot)이 있습니다. |
+| 렌더링 중에는 `current` 값을 읽거나 쓰면 안 됩니다. | 언제든지 State를 읽을 수 있습니다. 그러나 각 렌더링마다 변경되지 않는 자체적인 State의 [Snapshot](/learn/state-as-a-snapshot)이 있습니다. |
다음은 State와 함께 구현한 카운터 버튼입니다.
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index 1e5e3af48..ed8f0b79e 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -285,7 +285,7 @@ button { margin-left: 10px; }
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/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md
index 3d74ae5e8..424806622 100644
--- a/src/content/learn/sharing-state-between-components.md
+++ b/src/content/learn/sharing-state-between-components.md
@@ -178,7 +178,7 @@ h3, p { margin: 5px 0px; }
상태 끌어올리기는 종종 state로 저장하고 있는 것의 특성을 바꿉니다.
-이 케이스에서는, 한 번에 하나의 패널만 활성화되어야 합니다. 이를 위해 공통 부모 컴포넌트인 `Accordian`은 *어떤* 패널이 활성화된 패널인지 추적하고 있어야 합니다. state 변수에 `boolean` 값을 사용하는 대신, 활성화되어있는 `Panel`의 인덱스 숫자를 사용할 수 있습니다.
+이 케이스에서는, 한 번에 하나의 패널만 활성화되어야 합니다. 이를 위해 공통 부모 컴포넌트인 `Accordion`은 *어떤* 패널이 활성화된 패널인지 추적하고 있어야 합니다. state 변수에 `boolean` 값을 사용하는 대신, 활성화되어있는 `Panel`의 인덱스 숫자를 사용할 수 있습니다.
```js
const [activeIndex, setActiveIndex] = useState(0);
diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md
index 02c270c46..d12b263a8 100644
--- a/src/content/learn/updating-objects-in-state.md
+++ b/src/content/learn/updating-objects-in-state.md
@@ -967,7 +967,7 @@ input { margin-left: 5px; margin-bottom: 5px; }
-`handlePlusClick`의 문제는 `player` 객체를 변경했다는 점입니다. 결과적으로 React는 리렌더링을 할 필요성을 몰랐으며, 스코어를 업데이트하지 않았습니다. 이것이 fist name을 변경했을 때 state가 업데이트되었으며, 리렌더링을 야기하여 스코어 _또한_ 업데이트된 이유입니다.
+`handlePlusClick`의 문제는 `player` 객체를 변경했다는 점입니다. 결과적으로 React는 리렌더링을 할 필요성을 몰랐으며, 스코어를 업데이트하지 않았습니다. 이것이 first name을 변경했을 때 state가 업데이트되었으며, 리렌더링을 야기하여 스코어 _또한_ 업데이트된 이유입니다.
`handleLastNameChange`의 문제는 그것이 이미 존재하는 `...player` 필드를 새 객체로 복사하지 않았다는 점입니다. 이것이 last name을 수정한 후에 스코어가 없어진 이유입니다.
diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md
index dea07280f..d5f9c337e 100644
--- a/src/content/learn/writing-markup-with-jsx.md
+++ b/src/content/learn/writing-markup-with-jsx.md
@@ -200,7 +200,7 @@ JSX에서는 태그를 명시적으로 닫아야 합니다. `![]()
`처럼 자체
```
-### 3. 거의 대부분 캐멀 케이스로! {/*3-camelcase-salls-most-of-the-things*/}
+### 3. 거의 대부분 캐멀 케이스로! {/*3-camelcase-almost-all-the-things*/}
JSX는 JavaScript로 바뀌고 JSX에서 작성된 어트리뷰트는 JavaScript 객체의 키가 됩니다. 컴포넌트에서는 종종 어트리뷰트를 변수로 읽고 싶은 경우가 있습니다. 그러나 JavaScript는 변수명에 제한이 있습니다. 예를 들면, 변수명에 대시를 포함하거나 `class`처럼 예약어를 사용할 수 없습니다.