From 8868cbe2651ece5013b62405e0a71fd464b915d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=A1=EC=9A=B0=EC=98=81?= <62867581+f0rever0@users.noreply.github.com> Date: Thu, 13 Mar 2025 13:50:27 +0900 Subject: [PATCH 1/3] docs : translate effect optimization section of useMemo --- src/content/reference/react/useMemo.md | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index bfd706d4a..88de900f0 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -1056,9 +1056,9 @@ label { --- -### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/} +### Effect가 자주 실행되지 않도록 하기 {/*preventing-an-effect-from-firing-too-often*/} -Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects) +때때로, [Effect](/learn/synchronizing-with-effects) 안에 값을 사용하고 싶을 것입니다. ```js {4-7,10} function ChatRoom({ roomId }) { @@ -1075,19 +1075,19 @@ function ChatRoom({ roomId }) { // ... ``` -This creates a problem. [Every reactive value must be declared as a dependency of your Effect.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) However, if you declare `options` as a dependency, it will cause your Effect to constantly reconnect to the chat room: +이것은 문제를 일으킵니다. [모든 반응형 값은 Effect의 종속성으로 선언되어야 합니다.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) 그러나 만약 `options`을 종속성으로 선언한다면, 이것은 Effect가 chat room과 계속해서 재연결되도록 할 것입니다. ```js {5} useEffect(() => { const connection = createConnection(options); connection.connect(); return () => connection.disconnect(); - }, [options]); // 🔴 Problem: This dependency changes on every render + }, [options]); // 🔴 문제: 이 종속성은 렌더링마다 변경됩니다. // ... ``` -To solve this, you can wrap the object you need to call from an Effect in `useMemo`: +이 문제를 해결하기 위해서는, Effect 안에서 사용되는 객체를 `useMemo`로 감싸면 됩니다. ```js {4-9,16} function ChatRoom({ roomId }) { @@ -1098,26 +1098,28 @@ function ChatRoom({ roomId }) { serverUrl: 'https://localhost:1234', roomId: roomId }; - }, [roomId]); // ✅ Only changes when roomId changes + }, [roomId]); // ✅ roomId가 변경될때만 실행됩니다. useEffect(() => { const connection = createConnection(options); connection.connect(); return () => connection.disconnect(); - }, [options]); // ✅ Only changes when options changes + }, [options]); // ✅ options가 변경될때만 실행됩니다. // ... ``` -This ensures that the `options` object is the same between re-renders if `useMemo` returns the cached object. -However, since `useMemo` is performance optimization, not a semantic guarantee, React may throw away the cached value if [there is a specific reason to do that](#caveats). This will also cause the effect to re-fire, **so it's even better to remove the need for a function dependency** by moving your object *inside* the Effect: +이것은 만약 `useMemo`가 캐시된 객체를 반환할 경우, 재렌더링시 `options` 객체가 동일하다는 것을 보장합니다. + +그러나 `useMemo`는 성능 최적화를 위한 것이지 의미론적 보장은 아니기 때문에 React는 [특별한 이유가 있는 경우](#caveats) 캐시된 값을 버릴 수 있습니다. 이로 인해 effect가 다시 실행될 수 있습니다. 따라서 객체를 Effect *안으로* 이동시켜 **함수 종속성의 필요성을 제거하는 것이 더 좋습니다.** + ```js {5-8,13} function ChatRoom({ roomId }) { const [message, setMessage] = useState(''); useEffect(() => { - const options = { // ✅ No need for useMemo or object dependencies! + const options = { // ✅ 더이상 useMemo나 object dependencies가 필요없습니다! serverUrl: 'https://localhost:1234', roomId: roomId } @@ -1125,11 +1127,11 @@ function ChatRoom({ roomId }) { const connection = createConnection(options); connection.connect(); return () => connection.disconnect(); - }, [roomId]); // ✅ Only changes when roomId changes + }, [roomId]); // ✅ roomId가 변경될때에만 실행됩니다. // ... ``` -Now your code is simpler and doesn't need `useMemo`. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) +이제 코드는 더 간단해지고 `useMemo`가 필요하지 않습니다. [Effect 종속성 제거에 대해 더 알아보세요.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect) ### 다른 Hook의 종속성 메모화 {/*memoizing-a-dependency-of-another-hook*/} From 49bd279a1b04a8ab9ddebef2f49a89c26c845332 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sun, 16 Mar 2025 15:02:39 +0900 Subject: [PATCH 2/3] wip --- src/content/reference/react/useMemo.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 88de900f0..24cf49de7 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -1075,7 +1075,6 @@ function ChatRoom({ roomId }) { // ... ``` - 이것은 문제를 일으킵니다. [모든 반응형 값은 Effect의 종속성으로 선언되어야 합니다.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) 그러나 만약 `options`을 종속성으로 선언한다면, 이것은 Effect가 chat room과 계속해서 재연결되도록 할 것입니다. ```js {5} From 9e19fe430f12c3ec252ddb61540d90c6dbfdf151 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Sun, 16 Mar 2025 15:05:37 +0900 Subject: [PATCH 3/3] wip --- src/content/reference/react/useMemo.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 24cf49de7..4123af521 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -1107,10 +1107,9 @@ function ChatRoom({ roomId }) { // ... ``` - 이것은 만약 `useMemo`가 캐시된 객체를 반환할 경우, 재렌더링시 `options` 객체가 동일하다는 것을 보장합니다. -그러나 `useMemo`는 성능 최적화를 위한 것이지 의미론적 보장은 아니기 때문에 React는 [특별한 이유가 있는 경우](#caveats) 캐시된 값을 버릴 수 있습니다. 이로 인해 effect가 다시 실행될 수 있습니다. 따라서 객체를 Effect *안으로* 이동시켜 **함수 종속성의 필요성을 제거하는 것이 더 좋습니다.** +그러나 `useMemo`는 성능 최적화를 위한 것이지 의미론적 보장은 아니기 때문에 React는 [특별한 이유가 있는 경우](#caveats) 캐시된 값을 버릴 수 있습니다. 이로 인해 Effect가 다시 실행될 수 있습니다. 따라서 객체를 Effect *안으로* 이동시켜 **함수 종속성의 필요성을 제거하는 것이 더 좋습니다.** ```js {5-8,13}