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