From da73f36065e3fb252bdaab872b9f81dc4678161b Mon Sep 17 00:00:00 2001 From: lee-eojin Date: Mon, 25 May 2026 18:04:36 +0900 Subject: [PATCH 1/5] docs: translate event separation note in hooks reference --- src/content/reference/react/hooks.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md index 4a75cb343..8baf92589 100644 --- a/src/content/reference/react/hooks.md +++ b/src/content/reference/react/hooks.md @@ -79,9 +79,9 @@ Effect는 React 패러다임의 "탈출구"입니다. 애플리케이션의 데 * [`useLayoutEffect`](/reference/react/useLayoutEffect)는 브라우저가 화면을 다시 그리기 전에 실행됩니다. 여기에서 레이아웃을 계산할 수 있습니다. * [`useInsertionEffect`](/reference/react/useInsertionEffect)는 React가 DOM을 변경하기 전에 실행됩니다. 라이브러리는 여기에 동적 CSS를 삽입할 수 있습니다. -You can also separate events from Effects: +이벤트를 Effect에서 분리할 수도 있습니다. -- [`useEffectEvent`](/reference/react/useEffectEvent) creates a non-reactive event to fire from any Effect hook. +- [`useEffectEvent`](/reference/react/useEffectEvent)는 어떤 Effect Hook에서든 호출할 수 있는 비반응형 이벤트를 생성합니다. --- ## Performance Hooks {/*performance-hooks*/} From 26d4e2066352ffd9edc3014fa32134de7d0ac962 Mon Sep 17 00:00:00 2001 From: lee-eojin Date: Sat, 6 Jun 2026 19:56:30 +0900 Subject: [PATCH 2/5] =?UTF-8?q?docs:=20fix=20typo=20(=EB=A9=94=EC=84=B8?= =?UTF-8?q?=EC=A7=80=20=E2=86=92=20=EB=A9=94=EC=8B=9C=EC=A7=80)=20in=20ref?= =?UTF-8?q?erence?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/Component.md | 2 +- src/content/reference/react/useEffect.md | 2 +- src/content/reference/react/useReducer.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 2aeba522f..3481e474f 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -222,7 +222,7 @@ constructor는 부수 효과 또는 구독을 포함하면 안 됩니다. #### 주의 사항 {/*componentdidcatch-caveats*/} -* 과거에는 UI를 업데이트하고 대체 에러 메세지를 표시하기 위해 `setState`를 `componentDidCatch` 안에서 호출하는 것이 일반적이었습니다. 이는 [`static getDerivedStateFromError`](#static-getderivedstatefromerror)를 정의하기 위해 더 이상 사용되지 않습니다. +* 과거에는 UI를 업데이트하고 대체 에러 메시지를 표시하기 위해 `setState`를 `componentDidCatch` 안에서 호출하는 것이 일반적이었습니다. 이는 [`static getDerivedStateFromError`](#static-getderivedstatefromerror)를 정의하기 위해 더 이상 사용되지 않습니다. * React의 프로덕션과 개발 빌드는 `componentDidCatch`가 에러를 처리하는 방식이 약간 다릅니다. 개발에서는, 에러는 `window`까지 버블링될 것이며, 이는 `window.onerror` 또는 `window.addEventListener('error', callback)`가 `componentDidCatch`에 의해 탐지된 에러를 가로챈다는 것을 의미합니다. 대신 프로덕션에서, 에러는 버블링되지 않을 것이며, 이는 어떤 상위의 에러 핸들러가 `componentDidCatch`에 의해 명시적으로 탐지되지 않은 에러만을 수신하는 것을 의미합니다. diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md index aee2f1e70..d24dddbd4 100644 --- a/src/content/reference/react/useEffect.md +++ b/src/content/reference/react/useEffect.md @@ -1154,7 +1154,7 @@ useEffect(() => { }, [a, b]); // a나 b가 다르면 다시 실행됨 ``` -아래 예시에서는 `serverUrl`와 `roomId`은 [반응형 값](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values)이므로 둘 다 의존성으로 지정해야 합니다. 결과적으로 드롭다운에서 다른 방을 선택하거나 서버 URL 입력을 편집하면 채팅이 다시 연결됩니다. 그러나 `message`는 Effect에서 사용되지 않으므로(의존성이 아니므로), 메세지를 편집해도 대화가 다시 연결되지 않습니다. +아래 예시에서는 `serverUrl`와 `roomId`은 [반응형 값](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values)이므로 둘 다 의존성으로 지정해야 합니다. 결과적으로 드롭다운에서 다른 방을 선택하거나 서버 URL 입력을 편집하면 채팅이 다시 연결됩니다. 그러나 `message`는 Effect에서 사용되지 않으므로(의존성이 아니므로), 메시지를 편집해도 대화가 다시 연결되지 않습니다. diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md index e99177082..83ba7b5e9 100644 --- a/src/content/reference/react/useReducer.md +++ b/src/content/reference/react/useReducer.md @@ -1064,7 +1064,7 @@ function reducer(state, action) { ### "Too many re-renders" 오류가 발생합니다. {/*im-getting-an-error-too-many-re-renders*/} -`Too many re-renders. React limits the number of renders to prevent an infinite loop.`라는 에러 메세지를 받을 수 있습니다. 일반적으로는 렌더링 과정에서 dispatch가 실행될 때 이러한 일이 일어납니다. 렌더링은 dispatch를 야기하고, dispatch는 렌더링을 야기하므로 렌더링 무한 루프가 일어납니다. 이러한 상황은 이벤트 핸들러를 잘못 호출할 때 종종 발생합니다. +`Too many re-renders. React limits the number of renders to prevent an infinite loop.`라는 에러 메시지를 받을 수 있습니다. 일반적으로는 렌더링 과정에서 dispatch가 실행될 때 이러한 일이 일어납니다. 렌더링은 dispatch를 야기하고, dispatch는 렌더링을 야기하므로 렌더링 무한 루프가 일어납니다. 이러한 상황은 이벤트 핸들러를 잘못 호출할 때 종종 발생합니다. ```js {1-2} // 🚩 Wrong: calls the handler during render From df15e35d65412f06c56ca2b4dfa0643ddf0ed833 Mon Sep 17 00:00:00 2001 From: lee-eojin Date: Tue, 23 Jun 2026 21:33:37 +0900 Subject: [PATCH 3/5] docs: translate memoization interaction guidance --- src/content/reference/react/memo.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 8faf6a72d..fcc6903fc 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -117,7 +117,7 @@ label { #### 모든 곳에 `memo`를 추가해야할까요? {/*should-you-add-memo-everywhere*/} -If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful. +이 사이트처럼 앱에서 대부분의 상호작용이 (페이지나 섹션 전체를 교체하는 것처럼) 큰 단위로 이루어진다면, 메모이제이션은 대개 필요하지 않습니다. 반면에 그림 편집기처럼 대부분의 상호작용이 (도형을 움직이는 것처럼) 세밀한 단위로 이루어진다면, 메모이제이션이 매우 유용할 수 있습니다. `memo`로 최적화하는 것은 컴포넌트가 정확히 동일한 Props로 자주 리렌더링 되고, 리렌더링 로직이 비용이 많이 드는 경우에만 유용합니다. 컴포넌트가 리렌더링 될 때 인지할 수 있을 만큼의 지연이 없다면 `memo`가 필요하지 않습니다. `memo`는 객체 또는 렌더링 중에 정의된 일반 함수처럼 *항상 다른* Props가 컴포넌트에 전달되는 경우에 완전히 무용지물입니다. 따라서 `memo`와 함께 [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components)와 [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components)이 종종 필요합니다. From 21ce43897e3685d9b59c2686150511d196614b10 Mon Sep 17 00:00:00 2001 From: lee-eojin Date: Tue, 23 Jun 2026 21:34:39 +0900 Subject: [PATCH 4/5] docs: translate React Compiler memo guidance --- src/content/reference/react/memo.md | 36 ++++++++++++++--------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index fcc6903fc..ea23577a3 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -361,16 +361,16 @@ function arePropsEqual(oldProps, newProps) { --- -### Do I still need React.memo if I use React Compiler? {/*react-compiler-memo*/} +### React 컴파일러를 사용한다면 React.memo가 여전히 필요한가요? {/*react-compiler-memo*/} -When you enable [React Compiler](/learn/react-compiler), you typically don't need `React.memo` anymore. The compiler automatically optimizes component re-rendering for you. +[React 컴파일러](/learn/react-compiler)를 활성화하면 일반적으로 `React.memo`가 더 이상 필요하지 않습니다. 컴파일러가 컴포넌트 리렌더링을 자동으로 최적화해 주기 때문입니다. -Here's how it works: +작동 방식은 다음과 같습니다. -**Without React Compiler**, you need `React.memo` to prevent unnecessary re-renders: +**React 컴파일러를 활성화하지 않으면** 불필요한 리렌더링을 막기 위해 `React.memo`가 필요합니다. ```js -// Parent re-renders every second +// 부모가 매초 리렌더링됩니다 function Parent() { const [seconds, setSeconds] = useState(0); @@ -389,30 +389,30 @@ function Parent() { ); } -// Without memo, this re-renders every second even though props don't change +// memo가 없으면 Props가 변경되지 않아도 매초 리렌더링됩니다 const ExpensiveChild = memo(function ExpensiveChild({ name }) { console.log('ExpensiveChild rendered'); return
Hello, {name}!
; }); ``` -**With React Compiler enabled**, the same optimization happens automatically: +**React 컴파일러를 활성화하면** 동일한 최적화가 자동으로 이루어집니다. ```js -// No memo needed - compiler prevents re-renders automatically +// memo가 필요 없습니다. 컴파일러가 리렌더링을 자동으로 막아 줍니다 function ExpensiveChild({ name }) { console.log('ExpensiveChild rendered'); return
Hello, {name}!
; } ``` -Here's the key part of what the React Compiler generates: +React 컴파일러가 생성하는 코드의 핵심 부분은 다음과 같습니다. ```js {6-12} function Parent() { const $ = _c(7); const [seconds, setSeconds] = useState(0); - // ... other code ... + // ... 그 외 코드 ... let t3; if ($[4] === Symbol.for("react.memo_cache_sentinel")) { @@ -421,22 +421,22 @@ function Parent() { } else { t3 = $[4]; } - // ... return statement ... + // ... return 문 ... } ``` -Notice the highlighted lines: The compiler wraps `` in a cache check. Since the `name` prop is always `"John"`, this JSX is created once and reused on every parent re-render. This is exactly what `React.memo` does - it prevents the child from re-rendering when its props haven't changed. +강조된 줄을 살펴보세요. 컴파일러는 ``를 캐시 검사로 감쌉니다. `name` Prop이 항상 `"John"`이므로, 이 JSX는 한 번만 생성되고 부모가 리렌더링될 때마다 재사용됩니다. 이는 정확히 `React.memo`가 하는 일과 같습니다. 즉, 자식의 Props가 변경되지 않았을 때 자식이 리렌더링되지 않도록 막아 줍니다. -The React Compiler automatically: -1. Tracks that the `name` prop passed to `ExpensiveChild` hasn't changed -2. Reuses the previously created JSX for `` -3. Skips re-rendering `ExpensiveChild` entirely +React 컴파일러는 자동으로 다음을 수행합니다. +1. `ExpensiveChild`에 전달된 `name` Prop이 변경되지 않았음을 추적합니다. +2. 이전에 생성한 `` JSX를 재사용합니다. +3. `ExpensiveChild`의 리렌더링을 완전히 건너뜁니다. -This means **you can safely remove `React.memo` from your components when using React Compiler**. The compiler provides the same optimization automatically, making your code cleaner and easier to maintain. +즉, **React 컴파일러를 사용할 때는 컴포넌트에서 `React.memo`를 안전하게 제거할 수 있습니다.** 컴파일러가 동일한 최적화를 자동으로 제공하므로 코드가 더 깔끔해지고 유지보수하기 쉬워집니다. -The compiler's optimization is actually more comprehensive than `React.memo`. It also memoizes intermediate values and expensive computations within your components, similar to combining `React.memo` with `useMemo` throughout your component tree. +컴파일러의 최적화는 사실 `React.memo`보다 더 포괄적입니다. 컴포넌트 내부의 중간값과 비용이 많이 드는 계산까지 메모이제이션하는데, 이는 컴포넌트 트리 전반에 걸쳐 `React.memo`와 `useMemo`를 함께 사용하는 것과 비슷합니다. From 3500f4be76a63d3224d7382c29983f35b5e89257 Mon Sep 17 00:00:00 2001 From: lee-eojin Date: Tue, 23 Jun 2026 21:35:00 +0900 Subject: [PATCH 5/5] docs: translate memo troubleshooting headings --- src/content/reference/react/memo.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index ea23577a3..0df6047c0 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -442,7 +442,7 @@ React 컴파일러는 자동으로 다음을 수행합니다. --- -## Troubleshooting {/*troubleshooting*/} -### My component re-renders when a prop is an object, array, or function {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} +## 문제 해결 {/*troubleshooting*/} +### Prop이 객체, 배열 또는 함수일 때 컴포넌트가 리렌더링됩니다 {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} React는 얕은 비교를 기준으로 이전 Props와 새로운 Props를 비교합니다. 즉, 각각의 새로운 Prop가 이전 Prop와 참조가 동일한지 여부를 고려합니다. 부모가 리렌더링 될 때마다 새로운 객체나 배열을 생성하면, 개별 요소들이 모두 동일하더라도 React는 여전히 변경된 것으로 간주합니다. 마찬가지로 부모 컴포넌트를 렌더링할 때 새로운 함수를 만들면 React는 함수의 정의가 동일하더라도 변경된 것으로 간주합니다. 이를 방지하려면 [부모 컴포넌트에서 Props를 단순화하거나 메모화 하세요.](#minimizing-props-changes)