Skip to content

Commit ad2fef3

Browse files
committed
docs : translate Ref in StrictMode section
1 parent 6301e6d commit ad2fef3

File tree

1 file changed

+24
-25
lines changed

1 file changed

+24
-25
lines changed

src/content/reference/react/StrictMode.md

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -829,15 +829,15 @@ Strict Mode가 없으면 Effect를 클린업해야 한다는 사실을 놓치기
829829
[Effect 클린업을 구현하는 방법에 대해 자세히 알아보세요.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
830830
831831
---
832-
### Fixing bugs found by re-running ref callbacks in development {/*fixing-bugs-found-by-re-running-ref-callbacks-in-development*/}
832+
### 개발 환경에서 ref 콜백을 다시 실행하여 발견된 버그 수정 {/*fixing-bugs-found-by-re-running-ref-callbacks-in-development*/}
833833
834-
Strict Mode can also help find bugs in [callbacks refs.](/learn/manipulating-the-dom-with-refs)
834+
Strict Mode는 [callbacks refs](/learn/manipulating-the-dom-with-refs)의 버그를 찾는 데도 도움이 됩니다.
835835
836-
Every callback `ref` has some setup code and may have some cleanup code. Normally, React calls setup when the element is *created* (is added to the DOM) and calls cleanup when the element is *removed* (is removed from the DOM).
836+
모든 콜백 `ref`에는 몇 가지 셋업 코드가 있고 어쩌면 클린업 코드가 있을 수 있습니다. 일반적으로 React는 엘리먼트가 생성(DOM에 추가)될 때 셋업 코드를 실행하고, 엘리먼트가 제거(DOM에서 삭제)될 때 셋업 코드를 실행합니다.
837837
838-
When Strict Mode is on, React will also run **one extra setup+cleanup cycle in development for every callback `ref`.** This may feel surprising, but it helps reveal subtle bugs that are hard to catch manually.
838+
Strict Mode가 켜져 있으면 React는 **모든 콜백 `ref`에 대해 개발 환경에서 한 번 더 셋업+클린업 사이클을 실행합니다.** 이외로 느껴질 수도 있지만, 수동으로 파악하기 어려운 미묘한 버그를 드러내는 데 도움이 됩니다.
839839
840-
Consider this example, which allows you to select an animal and then scroll to one of them. Notice when you switch from "Cats" to "Dogs", the console logs show that the number of animals in the list keeps growing, and the "Scroll to" buttons stop working:
840+
다음 예시를 살펴봅시다. 이 예시는 동물을 선택한 후 목록 중 하나로 스크롤 할 수 있게 해줍니다. "cats"에서 "dogs"로 전환할 때 콘솔 로그를 보면 목록에 있는 동물의 수가 계속 증가하고, "Scroll to" 버튼이 동작하지 않게 되는 점을 확인할 수 있습니다.
841841
842842
<Sandpack>
843843
@@ -895,9 +895,9 @@ export default function AnimalFriends() {
895895
const list = itemsRef.current;
896896
const item = {animal: animal, node};
897897
list.push(item);
898-
console.log(`Adding animal to the map. Total animals: ${list.length}`);
898+
console.log(`동물을 목록에 추가하는 중. 총 동물 수: ${list.length}`);
899899
if (list.length > 10) {
900-
console.log('Too many animals in the list!');
900+
console.log('목록에 동물이 너무 많습니다!');
901901
}
902902
return () => {
903903
// 🚩 No cleanup, this is a bug!
@@ -957,9 +957,9 @@ li {
957957
</Sandpack>
958958
959959
960-
**This is a production bug!** Since the ref callback doesn't remove animals from the list in the cleanup, the list of animals keeps growing. This is a memory leak that can cause performance problems in a real app, and breaks the behavior of the app.
960+
**이것은 프로덕션 버그입니다!** ref 콜백이 클린업 과정에서 동물 목록을 제거하지 않으므로 동물 목록이 계속 증가합니다. 이는 메모리 누수를 일으켜 실제 앱에서 성능 문제를 유발할 수 있으며, 앱의 동작을 망가뜨립니다.
961961
962-
The issue is the ref callback doesn't cleanup after itself:
962+
문제는 ref 콜백이 스스로 클린업을 하지 않는 점입니다.
963963
964964
```js {6-8}
965965
<li
@@ -974,8 +974,7 @@ The issue is the ref callback doesn't cleanup after itself:
974974
</li>
975975
```
976976
977-
Now let's wrap the original (buggy) code in `<StrictMode>`:
978-
977+
이제 원본 (버그가 있는) 코드를 `<StrictMode>`로 감싸봅시다.
979978
<Sandpack>
980979
981980
```js src/index.js
@@ -1037,9 +1036,9 @@ export default function AnimalFriends() {
10371036
const list = itemsRef.current;
10381037
const item = {animal: animal, node}
10391038
list.push(item);
1040-
console.log(`Adding animal to the map. Total animals: ${list.length}`);
1039+
console.log(`동물을 목록에 추가하는 중. 총 동물 수: ${list.length}`);
10411040
if (list.length > 10) {
1042-
console.log('Too many animals in the list!');
1041+
console.log('목록에 동물이 너무 많습니다!');
10431042
}
10441043
return () => {
10451044
// 🚩 No cleanup, this is a bug!
@@ -1098,9 +1097,9 @@ li {
10981097
10991098
</Sandpack>
11001099
1101-
**With Strict Mode, you immediately see that there is a problem**. Strict Mode runs an extra setup+cleanup cycle for every callback ref. This callback ref has no cleanup logic, so it adds refs but doesn't remove them. This is a hint that you're missing a cleanup function.
1100+
**Strict Mode를 사용하면 문제를 즉시 찾을 수 있습니다.** Strict Mode는 모든 콜백 ref에 대해 추가적인 셋업+클린업 사이클을 실행 실행합니다. 이 콜백 ref에는 클린업 로직이 없기 때문에 ref를 추가만 하고 제거하지 않습니다. 이는 클린업 함수가 누락되었다는 힌트입니다.
11021101
1103-
Strict Mode lets you eagerly find mistakes in callback refs. When you fix your callback by adding a cleanup function in Strict Mode, you *also* fix many possible future production bugs like the "Scroll to" bug from before:
1102+
Strict Mode를 통해 콜백 ref에서 발생하는 실수를 조기에 발견할 수 있습니다. Strict Mode에서 클린업 함수를 추가해 콜백을 수정하면, 이전에 발생했던 "Scroll to" 버그와 같은 많은 잠재적인 프로덕션 버그도 함께 해결할 수 있습니다.
11041103
11051104
<Sandpack>
11061105
@@ -1163,13 +1162,13 @@ export default function AnimalFriends() {
11631162
const list = itemsRef.current;
11641163
const item = {animal, node};
11651164
list.push({animal: animal, node});
1166-
console.log(`Adding animal to the map. Total animals: ${list.length}`);
1165+
console.log(`동물을 목록에 추가하는 중. 총 동물 수: ${list.length}`);
11671166
if (list.length > 10) {
1168-
console.log('Too many animals in the list!');
1167+
console.log('목록에 동물이 너무 많습니다!');
11691168
}
11701169
return () => {
11711170
list.splice(list.indexOf(item));
1172-
console.log(`Removing animal from the map. Total animals: ${itemsRef.current.length}`);
1171+
console.log(`목록에서 동물을 제거합니다. 전체 동물 수: ${itemsRef.current.length}`);
11731172
}
11741173
}}
11751174
>
@@ -1225,23 +1224,23 @@ li {
12251224
12261225
</Sandpack>
12271226
1228-
Now on inital mount in StrictMode, the ref callbacks are all setup, cleaned up, and setup again:
1227+
이제 StrictMode에서 초기 마운트 시, ref 콜백이 모두 셋업되고, 클린업 후, 다시 셋업 됩니다.
12291228
12301229
```
12311230
...
1232-
Adding animal to the map. Total animals: 10
1231+
동물을 목록에 추가하는 중. 총 동물 수: 10
12331232
...
1234-
Removing animal from the map. Total animals: 0
1233+
목록에서 동물을 제거합니다. 총 동물 수: 0
12351234
...
1236-
Adding animal to the map. Total animals: 10
1235+
동물을 목록에 추가하는 중. 총 동물 수: 10
12371236
```
12381237
1239-
**This is expected.** Strict Mode confirms that the ref callbacks are cleaned up correctly, so the size never grows above the expected amount. After the fix, there are no memory leaks, and all the features work as expected.
1238+
**이것이 예상된 결과입니다.** Strict Mode는 ref 콜백이 올바르게 클린업 되었는지 확인해 주기 때문에 크기가 예상된 양을 초과하지 않습니다. 수정 후에는 메모리 누수가 발생하지 않으며, 모든 기능이 예상대로 작동합니다.
12401239
1241-
Without Strict Mode, it was easy to miss the bug until you clicked around to app to notice broken features. Strict Mode made the bugs appear right away, before you push them to production.
1240+
Strict Mode 없이는 고장 난 기능을 알아차릴 때까지 여기저기 클릭해야 하므로 버그를 놓치기 쉽습니다. Strict Mode는 버그를 즉시 드러나도록 하여 프로덕션에 배포하기 전에 문제를 발견할 수 있습니다.
12421241
12431242
---
1244-
### Fixing deprecation warnings enabled by Strict Mode {/*fixing-deprecation-warnings-enabled-by-strict-mode*/}
1243+
### Strict Mode에서 활성화된 더 이상 사용되지 않는 경고 수정하기 {/*fixing-deprecation-warnings-enabled-by-strict-mode*/}
12451244
12461245
React는 `<StrictMode>` 트리 내부의 컴포넌트가 더 이상 사용되지 않는 다음 API 중 하나를 사용하는 경우 경고를 표시합니다.
12471246

0 commit comments

Comments
 (0)