You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: src/content/reference/react/useMemo.md
+13-13
Original file line number
Diff line number
Diff line change
@@ -1056,9 +1056,9 @@ label {
1056
1056
1057
1057
---
1058
1058
1059
-
### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}
1059
+
### Effect가 자주 실행되지 않도록 하기 {/*preventing-an-effect-from-firing-too-often*/}
1060
1060
1061
-
Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects)
1061
+
때때로, [Effect](/learn/synchronizing-with-effects) 안에 값을 사용하고 싶을 것입니다.
1062
1062
1063
1063
```js {4-7,10}
1064
1064
functionChatRoom({ roomId }) {
@@ -1075,19 +1075,18 @@ function ChatRoom({ roomId }) {
1075
1075
// ...
1076
1076
```
1077
1077
1078
-
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:
1079
-
1078
+
이것은 문제를 일으킵니다. [모든 반응형 값은 Effect의 종속성으로 선언되어야 합니다.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) 그러나 만약 `options`을 종속성으로 선언한다면, 이것은 Effect가 chat room과 계속해서 재연결되도록 할 것입니다.
1080
1079
1081
1080
```js {5}
1082
1081
useEffect(() => {
1083
1082
constconnection=createConnection(options);
1084
1083
connection.connect();
1085
1084
return () =>connection.disconnect();
1086
-
}, [options]); // 🔴 Problem: This dependency changes on every render
1085
+
}, [options]); // 🔴 문제: 이 종속성은 렌더링마다 변경됩니다.
1087
1086
// ...
1088
1087
```
1089
1088
1090
-
To solve this, you can wrap the object you need to call from an Effect in `useMemo`:
1089
+
이 문제를 해결하기 위해서는, Effect 안에서 사용되는 객체를 `useMemo`로 감싸면 됩니다.
1091
1090
1092
1091
```js {4-9,16}
1093
1092
functionChatRoom({ roomId }) {
@@ -1098,38 +1097,39 @@ function ChatRoom({ roomId }) {
1098
1097
serverUrl:'https://localhost:1234',
1099
1098
roomId: roomId
1100
1099
};
1101
-
}, [roomId]); // ✅ Only changes when roomId changes
1100
+
}, [roomId]); // ✅ roomId가 변경될때만 실행됩니다.
1102
1101
1103
1102
useEffect(() => {
1104
1103
constconnection=createConnection(options);
1105
1104
connection.connect();
1106
1105
return () =>connection.disconnect();
1107
-
}, [options]); // ✅ Only changes when options changes
1106
+
}, [options]); // ✅ options가 변경될때만 실행됩니다.
1108
1107
// ...
1109
1108
```
1110
1109
1111
-
This ensures that the `options` object is the same between re-renders if `useMemo` returns the cached object.
1110
+
이것은 만약 `useMemo`가 캐시된 객체를 반환할 경우, 재렌더링시 `options` 객체가 동일하다는 것을 보장합니다.
1111
+
1112
+
그러나 `useMemo`는 성능 최적화를 위한 것이지 의미론적 보장은 아니기 때문에 React는 [특별한 이유가 있는 경우](#caveats) 캐시된 값을 버릴 수 있습니다. 이로 인해 Effect가 다시 실행될 수 있습니다. 따라서 객체를 Effect *안으로* 이동시켜 **함수 종속성의 필요성을 제거하는 것이 더 좋습니다.**
1112
1113
1113
-
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:
1114
1114
1115
1115
```js {5-8,13}
1116
1116
functionChatRoom({ roomId }) {
1117
1117
const [message, setMessage] =useState('');
1118
1118
1119
1119
useEffect(() => {
1120
-
constoptions= { // ✅ No need for useMemo or object dependencies!
1120
+
constoptions= { // ✅ 더이상 useMemo나 object dependencies가 필요없습니다!
1121
1121
serverUrl:'https://localhost:1234',
1122
1122
roomId: roomId
1123
1123
}
1124
1124
1125
1125
constconnection=createConnection(options);
1126
1126
connection.connect();
1127
1127
return () =>connection.disconnect();
1128
-
}, [roomId]); // ✅ Only changes when roomId changes
1128
+
}, [roomId]); // ✅ roomId가 변경될때에만 실행됩니다.
1129
1129
// ...
1130
1130
```
1131
1131
1132
-
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)
1132
+
이제 코드는 더 간단해지고 `useMemo`가 필요하지 않습니다. [Effect 종속성 제거에 대해 더 알아보세요.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
1133
1133
1134
1134
### 다른 Hook의 종속성 메모화 {/*memoizing-a-dependency-of-another-hook*/}
0 commit comments