Skip to content

Commit ee48f84

Browse files
f0rever0lumirlumir
andauthored
docs: translate effect optimization section of useMemo (#1153)
<!-- PR을 보내주셔서 감사합니다! 여러분과 같은 기여자들이 React를 더욱 멋지게 만듭니다! 기존 이슈와 관련된 PR이라면, 아래에 이슈 번호를 추가해주세요. --> # useMemo > preventing-an-effect-from-firing-too-often 섹션 번역 작업 <!-- 어떤 종류의 PR인지 상세 내용을 작성해주세요. --> - close #1152 - useMemo 페이지 `preventing-an-effect-from-firing-too-often` 섹션 한국어 번역 작업을 진행했습니다. ## 필수 확인 사항 - [x] [기여자 행동 강령 규약<sup>Code of Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md) - [x] [기여 가이드라인<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md) - [x] [공통 스타일 가이드<sup>Universal Style Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md) - [x] [번역을 위한 모범 사례<sup>Best Practices for Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md) - [x] [번역 용어 정리<sup>Translate Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md) - [x] [`textlint` 가이드<sup>Textlint Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md) - [x] [맞춤법 검사<sup>Spelling Check</sup>](https://nara-speller.co.kr/speller/) ## 선택 확인 사항 - [ ] 번역 초안 작성<sup>Draft Translation</sup> - [ ] 리뷰 반영<sup>Resolve Reviews</sup> --------- Co-authored-by: 루밀LuMir <[email protected]>
1 parent 6301e6d commit ee48f84

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

src/content/reference/react/useMemo.md

+13-13
Original file line numberDiff line numberDiff line change
@@ -1056,9 +1056,9 @@ label {
10561056

10571057
---
10581058

1059-
### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}
1059+
### Effect가 자주 실행되지 않도록 하기 {/*preventing-an-effect-from-firing-too-often*/}
10601060

1061-
Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects)
1061+
때때로, [Effect](/learn/synchronizing-with-effects) 안에 값을 사용하고 싶을 것입니다.
10621062

10631063
```js {4-7,10}
10641064
function ChatRoom({ roomId }) {
@@ -1075,19 +1075,18 @@ function ChatRoom({ roomId }) {
10751075
// ...
10761076
```
10771077
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과 계속해서 재연결되도록 할 것입니다.
10801079
10811080
```js {5}
10821081
useEffect(() => {
10831082
const connection = createConnection(options);
10841083
connection.connect();
10851084
return () => connection.disconnect();
1086-
}, [options]); // 🔴 Problem: This dependency changes on every render
1085+
}, [options]); // 🔴 문제: 이 종속성은 렌더링마다 변경됩니다.
10871086
// ...
10881087
```
10891088
1090-
To solve this, you can wrap the object you need to call from an Effect in `useMemo`:
1089+
이 문제를 해결하기 위해서는, Effect 안에서 사용되는 객체를 `useMemo`로 감싸면 됩니다.
10911090
10921091
```js {4-9,16}
10931092
function ChatRoom({ roomId }) {
@@ -1098,38 +1097,39 @@ function ChatRoom({ roomId }) {
10981097
serverUrl: 'https://localhost:1234',
10991098
roomId: roomId
11001099
};
1101-
}, [roomId]); //Only changes when roomId changes
1100+
}, [roomId]); //roomId가 변경될때만 실행됩니다.
11021101

11031102
useEffect(() => {
11041103
const connection = createConnection(options);
11051104
connection.connect();
11061105
return () => connection.disconnect();
1107-
}, [options]); //Only changes when options changes
1106+
}, [options]); //options가 변경될때만 실행됩니다.
11081107
// ...
11091108
```
11101109
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 *안으로* 이동시켜 **함수 종속성의 필요성을 제거하는 것이 더 좋습니다.**
11121113
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:
11141114
11151115
```js {5-8,13}
11161116
function ChatRoom({ roomId }) {
11171117
const [message, setMessage] = useState('');
11181118

11191119
useEffect(() => {
1120-
const options = { //No need for useMemo or object dependencies!
1120+
const options = { //더이상 useMemo나 object dependencies가 필요없습니다!
11211121
serverUrl: 'https://localhost:1234',
11221122
roomId: roomId
11231123
}
11241124

11251125
const connection = createConnection(options);
11261126
connection.connect();
11271127
return () => connection.disconnect();
1128-
}, [roomId]); //Only changes when roomId changes
1128+
}, [roomId]); //roomId가 변경될때에만 실행됩니다.
11291129
// ...
11301130
```
11311131
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)
11331133
11341134
### 다른 Hook의 종속성 메모화 {/*memoizing-a-dependency-of-another-hook*/}
11351135

0 commit comments

Comments
 (0)