Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ const nextConfig = {
// Don't bundle the shim unnecessarily.
config.resolve.alias['use-sync-external-store/shim'] = 'react';

// ESLint depends on the CommonJS version of esquery,
// but Webpack loads the ESM version by default. This
// alias ensures the correct version is used.
//
// More info:
// https://github.com/reactjs/react.dev/pull/8115
config.resolve.alias['esquery'] = 'esquery/dist/esquery.min.js';

const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
config.plugins.push(
new NormalModuleReplacementPlugin(
Expand Down
7 changes: 0 additions & 7 deletions src/components/MDX/Sandpack/runESLint.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,6 @@ const getCodeMirrorPosition = (

const linter = new Linter();

// HACK! Eslint requires 'esquery' using `require`, but there's no commonjs interop.
// because of this it tries to run `esquery.parse()`, while there's only `esquery.default.parse()`.
// This hack places the functions in the right place.
const esquery = require('esquery');
esquery.parse = esquery.default?.parse;
esquery.matches = esquery.default?.matches;

const reactRules = require('eslint-plugin-react-hooks').rules;
linter.defineRules({
'react-hooks/rules-of-hooks': reactRules['rules-of-hooks'],
Expand Down
10 changes: 10 additions & 0 deletions src/content/reference/react/Component.md
Original file line number Diff line number Diff line change
Expand Up @@ -1271,6 +1271,16 @@ button { margin-left: 10px; }

기본적으로 애플리케이션이 렌더링 도중 에러를 발생시키면 React는 화면에서 해당 UI를 제거합니다. 이를 방지하기 위해 UI의 일부를 *Error Boundary*로 감싸면 됩니다. Error Boundary는 에러가 발생한 부분 대신 오류 메시지와 같은 Fallback UI를 표시할 수 있는 특수 컴포넌트입니다.

<Note>
Error boundaries do not catch errors for:

- Event handlers [(learn more)](/learn/responding-to-events)
- [Server side rendering](/reference/react-dom/server)
- Errors thrown in the error boundary itself (rather than its children)
- Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks); an exception is the usage of the [`startTransition`](/reference/react/useTransition#starttransition) function returned by the [`useTransition`](/reference/react/useTransition) Hook. Errors thrown inside the transition function are caught by error boundaries [(learn more)](/reference/react/useTransition#displaying-an-error-to-users-with-error-boundary)

</Note>

Error Boundary 컴포넌트를 구현하려면 오류에 대한 응답으로 State를 업데이트하고 사용자에게 오류 메시지를 표시할 수 있는 [`static getDerivedStateFromError`](#static-getderivedstatefromerror)를 제공해야 합니다. 또한 선택적으로 [`componentDidCatch`](#componentdidcatch)를 구현하여 분석 서비스에 오류를 기록하는 등의 추가 로직을 추가할 수도 있습니다.

With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development.
Expand Down
7 changes: 7 additions & 0 deletions src/sidebarBlog.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,13 @@
"date": "October 7, 2025",
"path": "/blog/2025/10/07/introducing-the-react-foundation"
},
{
"title": "React 19.2",
"titleForHomepage": "React 19.2",
"icon": "blog",
"date": "October 1, 2025",
"path": "/blog/2025/10/01/react-19-2"
},
{
"title": "React Labs: View Transitions, Activity, and more",
"titleForHomepage": "View Transitions and Activity",
Expand Down