From 1da8621a75e78f07bce75a08e9abdf7f050c6528 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 25 Aug 2025 21:30:51 +0900 Subject: [PATCH 01/14] docs: correct mismatched key and id, remove duplicate comma in place.js --- src/content/learn/choosing-the-state-structure.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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, From de6f7eda89a5d8cfc7206d7e645c5a084a2ccb16 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 25 Aug 2025 21:35:22 +0900 Subject: [PATCH 02/14] docs: rename Apple OS X to macOS in documentation for accuracy --- src/content/learn/editor-setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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*/} From ad8422969f591de502bb2fb7e58075af23b72496 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 25 Aug 2025 21:42:43 +0900 Subject: [PATCH 03/14] docs: remove unused onAddTask prop from AddTask component --- src/content/learn/managing-state.md | 2 +- src/content/learn/scaling-up-with-reducer-and-context.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index c7021da4a..fdbd02d39 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -890,7 +890,7 @@ const initialTasks = [ import { useState, useContext } from 'react'; import { useTasksDispatch } from './TasksContext.js'; -export default function AddTask({ onAddTask }) { +export default function AddTask() { const [text, setText] = useState(''); const dispatch = useTasksDispatch(); return ( diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index 38c6f877f..c92ca1d8c 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -696,7 +696,7 @@ export default function TaskList() { `tasks` 리스트를 업데이트하기 위해서 컴포넌트에서 context의 `dispatch` 함수를 읽고 호출할 수 있습니다. ```js {3,9-13} -export default function AddTask({ onAddTask }) { +export default function AddTask() { const [text, setText] = useState(''); const dispatch = useContext(TasksDispatchContext); // ... @@ -785,7 +785,7 @@ export const TasksDispatchContext = createContext(null); import { useState, useContext } from 'react'; import { TasksDispatchContext } from './TasksContext.js'; -export default function AddTask({ onAddTask }) { +export default function AddTask() { const [text, setText] = useState(''); const dispatch = useContext(TasksDispatchContext); return ( From 7169c4574ff00e27faa0cd99736d9f978dbb89c9 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 25 Aug 2025 21:44:56 +0900 Subject: [PATCH 04/14] docs: correct 'foucs' typo to 'focus' in useImperativeHandle documentation --- src/content/learn/manipulating-the-dom-with-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) 호출에서 직접 구성한 객체가 됩니다. From 013fb6605a2668fb3c6dee493eb3be1c9099eafe Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 25 Aug 2025 21:51:38 +0900 Subject: [PATCH 05/14] docs: correct spelling of 'Optional Chaining' and update TOC entry --- src/content/learn/react-compiler.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index be0b2c575..995d2e43b 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -23,7 +23,7 @@ React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 RC React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 오픈소스화한 새로운 컴파일러입니다. React 컴파일러는 빌드 타임 전용 도구로 React 앱을 자동으로 최적화합니다. 순수 자바스크립트로 동작하며, [React의 규칙](/reference/rules)을 이해하므로 코드를 다시 작성할 필요가 없습니다. -`eslint-plugin-react-hooks`에는 코드 에디터에서 컴파일러의 분석 결과를 즉시 보여주는 [ESLint 규칙](#installing-eslint-plugin-react-compiler)도 포함되어 있습니다. **지금 당장 모든 분들들께 이 린터 사용을 강력히 권장합니다.** 린터는 컴파일러의 설치가 필요 없으므로 컴파일러를 사용할 준비가 되지 않았더라도 사용할 수 있습니다. +`eslint-plugin-react-hooks`에는 코드 에디터에서 컴파일러의 분석 결과를 즉시 보여주는 [ESLint 규칙](#installing-eslint-plugin-react-hooks)도 포함되어 있습니다. **지금 당장 모든 분들들께 이 린터 사용을 강력히 권장합니다.** 린터는 컴파일러의 설치가 필요 없으므로 컴파일러를 사용할 준비가 되지 않았더라도 사용할 수 있습니다. 컴파일러는 현재 `rc` 버전으로 출시되었으며, React 17 이상의 앱과 라이브러리에서 사용해 볼 수 있습니다. `rc` 버전을 설치하려면 다음 명령어를 실행하세요. @@ -121,7 +121,7 @@ function TableContainer({ items }) { 현재 문서 외에도 [React 컴파일러 워킹 그룹](https://github.com/reactwg/react-compiler)을 확인하여 컴파일러에 대한 추가 정보와 논의를 참조하는 것을 권장합니다. -### `eslint-plugin-react-hooks` 설치 {/*installing-eslint-plugin-react-compiler*/} +### `eslint-plugin-react-hooks` 설치 {/*installing-eslint-plugin-react-hooks*/} React 컴파일러는 ESLint 플러그인도 제공합니다. `eslint-plugin-react-hooks@^6.0.0-rc.1`을 설치해서 시도해보세요. @@ -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)의 설치를 권장합니다. From 283ced90a6e2f561e234b96146882049e64860b5 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 25 Aug 2025 22:00:25 +0900 Subject: [PATCH 06/14] docs: update ref vs state description to clarify ref does not trigger re-render --- src/content/learn/referencing-values-with-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index e29afdacb..96f695b68 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -177,7 +177,7 @@ Ref가 State보다 덜 "엄격한" 것으로 생각될 수 있습니다. 예를 | Ref | State | |--------------------------------------------------------------------|----------------------------------------------------------------------------------------------------| | `useRef(initialValue)` 는 `{ current: initialValue }`를 반환합니다. | `useState(initialValue)`는 State 변수의 현재 값과 Setter 함수 `[value, setValue]`를 반환합니다. | -| State를 바꿔도 리렌더링 하지 않습니다. | State를 바꾸면 리렌더링 합니다. | +| Ref를 바꿔도 리렌더링 하지 않습니다. | State를 바꾸면 리렌더링 합니다. | | Mutable: 렌더링 프로세스 외부에서 `current` 값을 수정 및 업데이트할 수 있습니다. | Immutable: State를 수정하기 위해서는 State 설정 함수를 반드시 사용하여 리렌더링 대기열에 넣어야 합니다. | | 렌더링 중에는 `current` 값을 읽거나 쓰면 안 됩니다. | 언제든지 State를 읽을 수 있습니다. 그러나 각 렌더링마다 변경되지 않는 자체적인 State의 [Snapshot](/learn/state-as-a-snapshot)이 있습니다. | From 95b0242a50fa79378b6c91a196421adb5188f80d Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 25 Aug 2025 22:03:18 +0900 Subject: [PATCH 07/14] docs: correct eslint directive from 'eslint-ignore-next-line' to 'eslint-disable-next-line' --- 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 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 }, []); ``` From ac9f99b7d9ced90b6e38953c12b6d38fd9734195 Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 25 Aug 2025 22:07:40 +0900 Subject: [PATCH 08/14] docs: correct spelling of 'Accordian' to 'Accordion' in documentation --- src/content/learn/sharing-state-between-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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); From 9f05700ee5327908b6246614f304af55eccf09ea Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 25 Aug 2025 22:15:16 +0900 Subject: [PATCH 09/14] docs: correct typo 'fist name' to 'first name' in explanation --- src/content/learn/updating-objects-in-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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을 수정한 후에 스코어가 없어진 이유입니다. From 3b459fe40c6ea4e121d17694336a5adbfdc002aa Mon Sep 17 00:00:00 2001 From: wo-o29 Date: Mon, 25 Aug 2025 22:18:33 +0900 Subject: [PATCH 10/14] docs: update camelCase section heading slug and text for clarity --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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`처럼 예약어를 사용할 수 없습니다. From 465d0e9507440e36a6718e8ddc765b3a1fdaba1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Wed, 3 Sep 2025 16:02:22 +0900 Subject: [PATCH 11/14] Update AddTask to accept onAddTask prop --- src/content/learn/managing-state.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index fdbd02d39..c7021da4a 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -890,7 +890,7 @@ const initialTasks = [ import { useState, useContext } from 'react'; import { useTasksDispatch } from './TasksContext.js'; -export default function AddTask() { +export default function AddTask({ onAddTask }) { const [text, setText] = useState(''); const dispatch = useTasksDispatch(); return ( From 086d1acb884305ca2c4f7c0105a884434068eca5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Wed, 3 Sep 2025 16:03:15 +0900 Subject: [PATCH 12/14] Update ESLint plugin reference in react-compiler.md --- src/content/learn/react-compiler.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 995d2e43b..5c5f9051a 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -23,7 +23,7 @@ React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 RC React 컴파일러는 커뮤니티로부터 초기 피드백을 받기 위해 오픈소스화한 새로운 컴파일러입니다. React 컴파일러는 빌드 타임 전용 도구로 React 앱을 자동으로 최적화합니다. 순수 자바스크립트로 동작하며, [React의 규칙](/reference/rules)을 이해하므로 코드를 다시 작성할 필요가 없습니다. -`eslint-plugin-react-hooks`에는 코드 에디터에서 컴파일러의 분석 결과를 즉시 보여주는 [ESLint 규칙](#installing-eslint-plugin-react-hooks)도 포함되어 있습니다. **지금 당장 모든 분들들께 이 린터 사용을 강력히 권장합니다.** 린터는 컴파일러의 설치가 필요 없으므로 컴파일러를 사용할 준비가 되지 않았더라도 사용할 수 있습니다. +`eslint-plugin-react-hooks`에는 코드 에디터에서 컴파일러의 분석 결과를 즉시 보여주는 [ESLint 규칙](#installing-eslint-plugin-react-compiler)도 포함되어 있습니다. **지금 당장 모든 분들들께 이 린터 사용을 강력히 권장합니다.** 린터는 컴파일러의 설치가 필요 없으므로 컴파일러를 사용할 준비가 되지 않았더라도 사용할 수 있습니다. 컴파일러는 현재 `rc` 버전으로 출시되었으며, React 17 이상의 앱과 라이브러리에서 사용해 볼 수 있습니다. `rc` 버전을 설치하려면 다음 명령어를 실행하세요. @@ -121,7 +121,7 @@ function TableContainer({ items }) { 현재 문서 외에도 [React 컴파일러 워킹 그룹](https://github.com/reactwg/react-compiler)을 확인하여 컴파일러에 대한 추가 정보와 논의를 참조하는 것을 권장합니다. -### `eslint-plugin-react-hooks` 설치 {/*installing-eslint-plugin-react-hooks*/} +### `eslint-plugin-react-hooks` 설치 {/*installing-eslint-plugin-react-compiler*/} React 컴파일러는 ESLint 플러그인도 제공합니다. `eslint-plugin-react-hooks@^6.0.0-rc.1`을 설치해서 시도해보세요. From 673fc14c8038f624b644a5a7e9f72a8104826730 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Wed, 3 Sep 2025 16:07:11 +0900 Subject: [PATCH 13/14] Update differences between refs and state in documentation --- src/content/learn/referencing-values-with-refs.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 96f695b68..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]`를 반환합니다. | -| Ref를 바꿔도 리렌더링 하지 않습니다. | 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와 함께 구현한 카운터 버튼입니다. From 2443e563b736e5aa486cc2f005724d4c8491ddbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Wed, 3 Sep 2025 16:07:57 +0900 Subject: [PATCH 14/14] Modify AddTask to use onAddTask prop Updated AddTask component to accept onAddTask prop. --- src/content/learn/scaling-up-with-reducer-and-context.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index c92ca1d8c..38c6f877f 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -696,7 +696,7 @@ export default function TaskList() { `tasks` 리스트를 업데이트하기 위해서 컴포넌트에서 context의 `dispatch` 함수를 읽고 호출할 수 있습니다. ```js {3,9-13} -export default function AddTask() { +export default function AddTask({ onAddTask }) { const [text, setText] = useState(''); const dispatch = useContext(TasksDispatchContext); // ... @@ -785,7 +785,7 @@ export const TasksDispatchContext = createContext(null); import { useState, useContext } from 'react'; import { TasksDispatchContext } from './TasksContext.js'; -export default function AddTask() { +export default function AddTask({ onAddTask }) { const [text, setText] = useState(''); const dispatch = useContext(TasksDispatchContext); return (