{sequential ? (
@@ -369,7 +369,7 @@ function IllustrationBlock({
)}
-
+
);
}
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index e83ec21f1..583df23e6 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -46,6 +46,11 @@ 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/)
+### React Alicante 2025 {/*react-alicante-2025*/}
+October 2-4, 2025. Alicante, Spain.
+
+[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+
### React Conf 2025 {/*react-conf-2025*/}
October 7-8, 2025. Henderson, Nevada, USA and free livestream
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index 81fc5c210..b4da5cdff 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
* [Mumbai](https://reactmumbai.dev)
* [Pune](https://www.meetup.com/ReactJS-and-Friends/)
+* [Rajasthan](https://reactrajasthan.com)
## Indonesia {/*indonesia*/}
* [Indonesia](https://www.meetup.com/reactindonesia/)
diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index e01007118..c5c0d13c5 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -175,7 +175,7 @@ function Cup({ guest }) {
}
export default function TeaGathering() {
- let cups = [];
+ const cups = [];
for (let i = 1; i <= 12; i++) {
cups.push();
}
@@ -243,7 +243,7 @@ React에서, **사이드 이펙트는 보통 [이벤트 핸들러](/learn/respon
```js src/Clock.js active
export default function Clock({ time }) {
- let hours = time.getHours();
+ const hours = time.getHours();
if (hours >= 0 && hours <= 6) {
document.getElementById('time').className = 'night';
} else {
@@ -305,7 +305,7 @@ body > * {
```js src/Clock.js active
export default function Clock({ time }) {
- let hours = time.getHours();
+ const hours = time.getHours();
let className;
if (hours >= 0 && hours <= 6) {
className = 'night';
@@ -604,14 +604,14 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
-let initialStories = [
+const initialStories = [
{id: 0, label: "Ankit's Story" },
{id: 1, label: "Taylor's Story" },
];
export default function App() {
- let [stories, setStories] = useState([...initialStories])
- let time = useTime();
+ const [stories, setStories] = useState([...initialStories])
+ const time = useTime();
// HACK: Prevent the memory from growing forever while you read docs.
// We're breaking our own rules here.
@@ -700,14 +700,14 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
-let initialStories = [
+const initialStories = [
{id: 0, label: "Ankit's Story" },
{id: 1, label: "Taylor's Story" },
];
export default function App() {
- let [stories, setStories] = useState([...initialStories])
- let time = useTime();
+ const [stories, setStories] = useState([...initialStories])
+ const time = useTime();
// HACK: Prevent the memory from growing forever while you read docs.
// We're breaking our own rules here.
@@ -768,7 +768,7 @@ li {
```js src/StoryTray.js active
export default function StoryTray({ stories }) {
// Copy the array!
- let storiesToDisplay = stories.slice();
+ const storiesToDisplay = stories.slice();
// Does not affect the original array:
storiesToDisplay.push({
@@ -792,14 +792,14 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
-let initialStories = [
+const initialStories = [
{id: 0, label: "Ankit's Story" },
{id: 1, label: "Taylor's Story" },
];
export default function App() {
- let [stories, setStories] = useState([...initialStories])
- let time = useTime();
+ const [stories, setStories] = useState([...initialStories])
+ const time = useTime();
// HACK: Prevent the memory from growing forever while you read docs.
// We're breaking our own rules here.
diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 2886ed0fb..c7021da4a 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -741,9 +741,9 @@ export default function Section({ children }) {
const level = useContext(LevelContext);
return (
-
+
{children}
-
+
);
}
@@ -836,13 +836,11 @@ export function TasksProvider({ children }) {
);
return (
-
-
+
+
{children}
-
-
+
+
);
}
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index b23d99752..e5b4b5d0d 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -671,13 +671,13 @@ label {
-체크 박스를 선택할 때 카운터 state가 초기화됩니다. `div`의 첫 번째 자식으로 `Counter`를 렌더링하는 것에서 `section`의 첫 번째 자식으로 바꾸지만요. 자식 `div`가 DOM에서 제거될 때 그것의 전체 하위 트리(`Counter`와 그 state를 포함해서)는 제거됩니다.
+`Counter`의 State는 체크 박스를 선택할 때 초기화됩니다. 비록 `Counter`를 렌더링하지만, `div`의 첫 번째 자식이 `section`에서 `div`로 바뀝니다. 자식 `section`이 DOM에서 제거되었을 때, 그 아래 전체 트리(`Counter`와 그 State를 포함하여)도 함께 제거됩니다.
-`section` 이 `div` 로 바뀌면, `section` 은 삭제되고 새로운 `div` 가 추가됩니다
+`section`이 `div`로 바뀌면, `section`은 삭제되고 새로운 `div`가 추가됩니다.
@@ -687,17 +687,17 @@ label {
-다시 되돌리면, `div` 는 삭제되고 새로운 `section` 이 추가됩니다.
+다시 되돌리면, `div`는 삭제되고 새로운 `section`이 추가됩니다.
-경험상(rule of thumb) **리렌더링할 때 state를 유지하고 싶다면, 트리 구조가 "같아야" 합니다.** 만약 구조가 다르다면 React가 트리에서 컴포넌트를 지울 때 state로 지우기 때문에 state가 유지되지 않습니다.
+경험상Rule of Thumb **리렌더링할 때 State를 유지하고 싶다면, 트리 구조가 "같아야" 합니다.** 만약 구조가 다르다면 React가 트리에서 컴포넌트를 지울 때 State로 지우기 때문에 State가 유지되지 않습니다.
-이것이 컴포넌트 함수를 중첩해서 정의하면 안 되는 이유입니다.
+이것이 컴포넌트 함수를 중첩해서 정의하면 안되는 이유입니다.
여기, `MyComponent` 안에서 `MyTextField` 컴포넌트 함수를 정의하고 있습니다.
@@ -734,13 +734,13 @@ export default function MyComponent() {
-버튼을 누를 때마다 입력 state가 사라집니다! 이것은 `MyComponent`를 렌더링할 때마다 *다른* `MyTextField` 함수가 만들어지기 때문입니다. 따라서 같은 함수에서 *다른* 컴포넌트를 렌더링할 때마다 React는 그 아래의 모든 state를 초기화합니다. 이런 문제를 피하려면 **항상 컴포넌트를 중첩해서 정의하지 않고 최상위 범위에서 정의해야 합니다.**
+버튼을 누를 때마다 입력 State가 사라집니다! 이것은 `MyComponent`를 렌더링할 때마다 *다른* `MyTextField` 함수가 만들어지기 때문입니다. 따라서 같은 함수에서 *다른* 컴포넌트를 렌더링할 때마다 React는 그 아래의 모든 state를 초기화합니다. 이런 문제를 피하려면 **항상 컴포넌트를 중첩해서 정의하지 않고 최상위 범위에서 정의해야 합니다.**
## 같은 위치에서 state를 초기화하기 {/*resetting-state-at-the-same-position*/}
-기본적으로 React는 컴포넌트가 같은 위치를 유지하면 state를 유지합니다. 보통 이것이 당신이 원하는 행동이기 때문에 기본 동작으로서 타당합니다. 그러나 가끔 컴포넌트 state를 초기화하고 싶을 때가 있습니다. 두 선수가 턴마다 자신의 점수를 추적하는 앱을 한번 봅시다.
+기본적으로 React는 컴포넌트가 같은 위치를 유지하면 state를 유지합니다. 보통 이것이 당신이 원하는 행동이기 때문에 기본 동작으로서 타당합니다. 그러나 가끔 컴포넌트 State를 초기화하고 싶을 때가 있습니다. 두 선수가 턴마다 자신의 점수를 추적하는 앱을 한번 봅시다.
diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md
index 52b5f0aec..f443ac58f 100644
--- a/src/content/learn/referencing-values-with-refs.md
+++ b/src/content/learn/referencing-values-with-refs.md
@@ -462,7 +462,7 @@ export default function Toggle() {
#### debouncing 수정 {/*fix-debouncing*/}
-예시에서 모든 버튼 클릭 핸들러는 ["debounced"](https://redd.one/blog/debounce-vs-throttle)입니다. 어떤 의미인지 보려면 버튼 중 하나를 누르세요. 1초 후에 메시지가 어떻게 표시되는지 확인해볼게요. 메시지 대기 중에 버튼을 누르면 타이머가 리셋됩니다. 따라서 같은 버튼을 여러 번 빠르게 클릭하면 *다음* 클릭이 멈출 때까지 메시지가 나타나지 않습니다. debouncing을 사용하면 사용자가 "작업이 중지될" 때까지 일부 작업을 지연시킬 수 있습니다.
+예시에서 모든 버튼 클릭 핸들러는 ["debounced"](https://redd.one/blog/debounce-vs-throttle)됩니다. 어떤 의미인지 보려면 버튼 중 하나를 누르세요. 1초 후에 메시지가 어떻게 표시되는지 확인해볼게요. 메시지 대기 중에 버튼을 누르면 타이머가 리셋됩니다. 따라서 같은 버튼을 여러 번 빠르게 클릭하면 *다음* 클릭이 멈출 때까지 메시지가 나타나지 않습니다. Debouncing을 사용하면 사용자가 "작업이 중지될" 때까지 일부 작업을 지연시킬 수 있습니다.
예시는 작동하지만, 의도한 대로 작동하지 않습니다. 버튼은 독립적이지 않습니다. 문제를 보려면 버튼 중 하나를 클릭한 다음 즉시 다른 버튼을 클릭합니다. 지연된 후에 양쪽 버튼의 메시지를 볼 수 있을 것이라고 예상할 것입니다. 그러나 마지막 버튼의 메시지만 표시됩니다. 첫 번째 버튼의 메시지가 사라집니다.
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 749dc9fe4..c0b5d162a 100644
--- a/src/content/learn/scaling-up-with-reducer-and-context.md
+++ b/src/content/learn/scaling-up-with-reducer-and-context.md
@@ -461,11 +461,11 @@ export default function TaskApp() {
const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
// ...
return (
-
-
+
+
...
-
-
+
+
);
}
```
@@ -509,8 +509,8 @@ export default function TaskApp() {
}
return (
-
-
+
+
Day off in Kyoto
-
-
+
+
);
}
@@ -676,13 +676,13 @@ ul, li { margin: 0; padding: 0; }
이제 `tasks` 리스트나 이벤트 핸들러를 트리 아래로 전달할 필요가 없습니다.
```js {4-5}
-
-
+
+
Day off in Kyoto
-
-
+
+
```
대신 필요한 컴포넌트에서는 `TaskContext`에서 `tasks` 리스트를 읽을 수 있습니다.
@@ -730,13 +730,13 @@ export default function TaskApp() {
);
return (
-
-
+
+
Day off in Kyoto
-
-
+
+
);
}
@@ -921,11 +921,11 @@ export function TasksProvider({ children }) {
const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);
return (
-
-
+
+
{children}
-
-
+
+
);
}
```
@@ -963,11 +963,11 @@ export function TasksProvider({ children }) {
);
return (
-
-
+
+
{children}
-
-
+
+
);
}
@@ -1174,11 +1174,11 @@ export function TasksProvider({ children }) {
);
return (
-
-
+
+
{children}
-
-
+
+
);
}
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 877f1f64c..7822f3623 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -260,9 +260,9 @@ export default function MyApp() {
const [theme, setTheme] = useState('light');
return (
-
+
-
+
)
}
@@ -310,9 +310,9 @@ export default function MyApp() {
const object = useMemo(() => ({ kind: "complex" }), []);
return (
-
+
-
+
)
}
diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md
index 8315a8be4..1182b9424 100644
--- a/src/content/reference/react-dom/createPortal.md
+++ b/src/content/reference/react-dom/createPortal.md
@@ -239,7 +239,7 @@ export default function ModalContent({ onClose }) {
Portal을 사용할 때 앱의 접근성accessibility, a11y이 준수되는지 확인하는 것이 중요합니다. 예를 들어 사용자가 Portal 안팎으로 자연스럽게 초점을 이동할 수 있도록 키보드 포커스를 관리해야 할 수 있습니다.
-모달을 만들 때는 [WAI-ARIA 모달 제작 관행](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)을 따르세요. 커뮤니티 패키지를 사용하는 경우 해당 패키지가 접근 가능한지, 이 가이드라인을 따르고 있는지 확인하세요.
+모달을 만들 때는 [WAI-ARIA 모달 제작 관행](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal)을 따르세요. 커뮤니티 패키지를 사용하는 경우 해당 패키지가 접근 가능한지, 이 가이드라인을 따르고 있는지 확인하세요.
diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md
index 972b6aa3c..fab89621c 100644
--- a/src/content/reference/react-dom/static/prerender.md
+++ b/src/content/reference/react-dom/static/prerender.md
@@ -68,7 +68,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
#### Caveats {/*caveats*/}
-`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.
+`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself.
diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
index cd01d670e..2d93b1635 100644
--- a/src/content/reference/react-dom/static/prerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -69,7 +69,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
#### Caveats {/*caveats*/}
-`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself.
+`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself.
@@ -320,4 +320,3 @@ Any Suspense boundaries with incomplete children will be included in the prelude
The `prerenderToNodeStream` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads.
To stream content as it loads, use a streaming server render API like [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream).
-
diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index aa77ca776..7ac6e0162 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -1814,9 +1814,9 @@ function Form() {
export default function MyApp() {
return (
-
+
-
+
)
}
```
@@ -1900,9 +1900,9 @@ function Form() {
export default function MyApp() {
return (
-
+
-
+
)
}
```
diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md
index 980478fd8..12625577b 100644
--- a/src/content/reference/react/cloneElement.md
+++ b/src/content/reference/react/cloneElement.md
@@ -414,9 +414,9 @@ export default function List({ items, renderItem }) {
{items.map((item, index) => {
const isHighlighted = index === selectedIndex;
return (
-
+
{renderItem(item)}
-
+
);
})}
```
@@ -472,12 +472,12 @@ export default function List({ items, renderItem }) {
{items.map((item, index) => {
const isHighlighted = index === selectedIndex;
return (
-
{renderItem(item)}
-
+
);
})}
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md
index 67e71dbe9..5d6327bac 100644
--- a/src/content/reference/react/createContext.md
+++ b/src/content/reference/react/createContext.md
@@ -39,14 +39,15 @@ const ThemeContext = createContext('light');
`createContext` returns a context object.
-**컨텍스트 객체 자체는 어떠한 정보도 가지고 있지 않습니다.** 다른 컴포넌트가 읽거나 제공하는 어떤 컨텍스트를 나타냅니다. 일반적으로 상위 컴포넌트에서 컨텍스트 값을 지정하기 위해 [`SomeContext.Provider`](#provider)를 사용하고, 아래 컴포넌트에서 읽기 위해 [`useContext(SomeContext)`](/reference/react/useContext)를 호출합니다. 컨텍스트 객체에는 몇 가지 속성이 있습니다.
+**컨텍스트 객체 자체는 어떠한 정보도 가지고 있지 않습니다.** 다른 컴포넌트가 읽거나 제공하는 어떤 컨텍스트를 나타냅니다. 일반적으로 상위 컴포넌트에서 컨텍스트 값을 지정하기 위해 [`SomeContext`](#provider)를 사용하고, 아래 컴포넌트에서 읽기 위해 [`useContext(SomeContext)`](/reference/react/useContext)를 호출합니다. 컨텍스트 객체에는 몇 가지 속성이 있습니다.
-* `SomeContext.Provider`는 컴포넌트에 컨텍스트 값을 제공합니다.
+* `SomeContext` lets you provide the context value to components.
* `SomeContext.Consumer`는 컨텍스트 값을 읽는 대안이며 드물게 사용됩니다.
+* `SomeContext.Provider` is a legacy way to provide the context value before React 19.
---
-### `SomeContext.Provider` {/*provider*/}
+### `SomeContext` Provider {/*provider*/}
컴포넌트를 컨텍스트 제공자로 감싸서 이 컨텍스트의 값을 모든 내부 컴포넌트에 지정합니다.
@@ -55,13 +56,21 @@ function App() {
const [theme, setTheme] = useState('light');
// ...
return (
-
+
-
+
);
}
```
+
+
+Starting in React 19, you can render `` as a provider.
+
+In older versions of React, use ``.
+
+
+
#### Props {/*provider-props*/}
* `value`: 이 제공자 내부의 컨텍스트를 읽는 모든 컴포넌트에 전달하려는 값입니다. 컨텍스트 값은 어떠한 유형이든 될 수 있습니다. 제공자 내부에서 [`useContext(SomeContext)`](/reference/react/useContext)를 호출하는 컴포넌트는 그 위의 가장 가까운 해당 컨텍스트 제공자의 `value`를 받게 됩니다.
@@ -143,11 +152,11 @@ function App() {
// ...
return (
-
-
+
+
-
-
+
+
);
}
```
@@ -189,11 +198,11 @@ import { ThemeContext, AuthContext } from './Contexts.js';
function App() {
// ...
return (
-
-
+
+
-
-
+
+
);
}
```
diff --git a/src/content/reference/react/legacy.md b/src/content/reference/react/legacy.md
index cee6fd079..d8a506ab8 100644
--- a/src/content/reference/react/legacy.md
+++ b/src/content/reference/react/legacy.md
@@ -30,7 +30,6 @@ title: "Legacy React API"
* [`createFactory`](https://18.react.dev/reference/react/createFactory): 대신 JSX를 사용하세요.
* 클래스 컴포넌트: [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): 대신 [`static contextType`](#static-contexttype)를 사용하세요.
* 클래스 컴포넌트: [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): 대신 [`static contextType`](#static-contexttype)를 사용하세요.
-* 클래스 컴포넌트: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): 대신 [`Context.Provider`](/reference/react/createContext#provider)를 사용하세요.
+* 클래스 컴포넌트: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): 대신 [`Context`](/reference/react/createContext#provider)를 사용하세요.
* 클래스 컴포넌트: [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): 대신 [TypeScript](https://www.typescriptlang.org/)같은 타입 시스템을 사용하세요.
* 클래스 컴포넌트: [`this.refs`](https://18.react.dev//reference/react/Component#refs): 대신 [`createRef`](/reference/react/createRef)를 사용하세요.
-
diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md
index d79d672ff..af3769702 100644
--- a/src/content/reference/react/memo.md
+++ b/src/content/reference/react/memo.md
@@ -225,12 +225,12 @@ export default function MyApp() {
}
return (
-
+
-
+
);
}
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 6dd3ee9b1..902ee1032 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -74,9 +74,9 @@ Context를 `Button`에 전달하려면 `Button` 또는 상위 컴포넌트 중
```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]]
function MyPage() {
return (
-
+
-
+
);
}
@@ -116,9 +116,9 @@ const ThemeContext = createContext(null);
export default function MyApp() {
return (
-
+
-
+
)
}
diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
index 3febeed3a..6aa346920 100644
--- a/src/content/reference/react/useContext.md
+++ b/src/content/reference/react/useContext.md
@@ -38,11 +38,11 @@ function MyComponent() {
#### 반환값 {/*returns*/}
-`useContext`는 호출하는 컴포넌트에 대한 Context 값을 반환합니다. 이 값은 트리에서 호출하는 컴포넌트 상위의 가장 가까운 `SomeContext.Provider`에 전달된 값으로 결정됩니다. Provider가 없으면 반환된 값은 해당 Context에 대해 [`createContext`](/reference/react/createContext)에 전달한 `defaultValue`가 됩니다. 반환된 값은 항상 최신 상태입니다. Context가 변경되면 React는 자동으로 해당 Context를 읽는 컴포넌트를 다시 렌더링합니다.
+`useContext`는 호출하는 컴포넌트에 대한 Context 값을 반환합니다. 이 값은 트리에서 호출하는 컴포넌트 상위의 가장 가까운 `SomeContext`에 전달된 값으로 결정됩니다. Provider가 없으면 반환된 값은 해당 Context에 대해 [`createContext`](/reference/react/createContext)에 전달한 `defaultValue`가 됩니다. 반환된 값은 항상 최신 상태입니다. Context가 변경되면 React는 자동으로 해당 Context를 읽는 컴포넌트를 다시 렌더링합니다.
#### 주의 사항 {/*caveats*/}
-* 컴포넌트 내의 `useContext()` 호출은 **동일한** 컴포넌트에서 반환된 Provider에 영향을 받지 않습니다. 해당하는 ``는 `useContext()` 호출을 하는 컴포넌트 ***상위에* 배치되어야 합니다.**
+* 컴포넌트 내의 `useContext()` 호출은 **동일한** 컴포넌트에서 반환된 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`가 ***정확하게* 동일한 객체**인 경우에만 작동합니다.
@@ -70,9 +70,9 @@ Context를 `Button`에 전달하려면 해당 버튼 또는 상위 컴포넌트
```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]]
function MyPage() {
return (
-
+
-
+
);
}
@@ -98,9 +98,9 @@ const ThemeContext = createContext(null);
export default function MyApp() {
return (
-
+
-
+
)
}
@@ -183,14 +183,14 @@ function Button({ children }) {
function MyPage() {
const [theme, setTheme] = useState('dark');
return (
-
+
-
+
);
}
```
@@ -213,7 +213,7 @@ const ThemeContext = createContext(null);
export default function MyApp() {
const [theme, setTheme] = useState('light');
return (
-
+
-
+
)
}
@@ -317,14 +317,14 @@ const CurrentUserContext = createContext(null);
export default function MyApp() {
const [currentUser, setCurrentUser] = useState(null);
return (
-
-
+
);
}
@@ -411,8 +411,8 @@ export default function MyApp() {
const [theme, setTheme] = useState('light');
const [currentUser, setCurrentUser] = useState(null);
return (
-
-
+
Use dark mode
-
-
+
+
)
}
@@ -596,16 +596,16 @@ export default function MyApp() {
function MyProviders({ children, theme, setTheme }) {
const [currentUser, setCurrentUser] = useState(null);
return (
-
-
+
{children}
-
-
+
+
);
}
@@ -775,11 +775,11 @@ export function TasksProvider({ children }) {
);
return (
-
-
+
+
{children}
-
-
+
+
);
}
@@ -978,9 +978,9 @@ export default function MyApp() {
const [theme, setTheme] = useState('light');
return (
<>
-
+
-
+