From c982794aa4c059faa21ba6af7cfda65d60069206 Mon Sep 17 00:00:00 2001 From: thecode00 Date: Mon, 24 Feb 2025 00:34:03 +0900 Subject: [PATCH 1/4] Fix wrong translation --- src/content/learn/synchronizing-with-effects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index a14c0874d..b4e9db4e2 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -860,7 +860,7 @@ export default function App() { 입력란에 무언가를 입력한 다음 "컴포넌트 마운트 해제"를 눌러보세요. 마운트 해제가 마지막 렌더의 Effect를 정리함을 주목하세요. 여기서는 타임아웃이 실행되기 전에 마지막 타임아웃이 취소됩니다. -마지막으로 위 컴포넌트를 수정하고 정리 함수의 주석 처리를 해제하여 타임아웃이 취소되지 않도록 해보세요. `abcde`를 빠르게 입력해 보세요. 몇 초 후에 무엇이 기대되는지 생각해 보세요. 타임아웃 내부의 `console.log(text)`가 가장 최근의 `text`를 출력하고 다섯 번의 `abcde` 로그가 생성될까요? 직접 시도하여 확인해 보세요! +마지막으로 위 컴포넌트를 수정하고 정리 함수를 주석 처리하여 타임아웃이 취소되지 않도록 해보세요. `abcde`를 빠르게 입력해 보세요. 몇 초 후에 무엇이 기대되는지 생각해 보세요. 타임아웃 내부의 `console.log(text)`가 가장 최근의 `text`를 출력하고 다섯 번의 `abcde` 로그가 생성될까요? 직접 시도하여 확인해 보세요! 수 초 후에 `a`, `ab`, `abc`, `abcd`, 그리고 `abcde`라는 일련의 로그를 볼 수 있을 것입니다. **각 Effect는 해당 렌더의 `text` 값을 "캡처"합니다.** `text` 상태가 변경되었는지 여부는 중요하지 않습니다. `text = 'ab'` 렌더의 Effect에서는 항상 `'ab'`를 볼 것입니다. 다시 말해, 각 렌더의 Effect는 서로 격리되어 있습니다. 이 작동 방식에 대해서 궁금하다면 [클로저](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)에 대해 읽어볼 수 있습니다. From 65d036ce8c8c5ab55fe56adc600881d204da7df9 Mon Sep 17 00:00:00 2001 From: thecode00 Date: Mon, 24 Feb 2025 18:52:19 +0900 Subject: [PATCH 2/4] Translate accessing-another-components-dom-nodes --- .../learn/manipulating-the-dom-with-refs.md | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index c46597a9a..fcb0b45f1 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -329,13 +329,13 @@ li { > ``` -This lets you read individual DOM nodes from the Map later. +이렇게 하면 나중에 Map에서 개별 DOM 노드를 읽을 수 있습니다. -When Strict Mode is enabled, ref callbacks will run twice in development. +Strict Mode가 활성화되어 있다면 개발 모드에서 ref 콜백이 두 번 실행됩니다. -Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs. +ref 콜백에서 [이 방식이 버그를 찾는데 어떻게 도움이 되는지](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) 자세히 알아보세요. @@ -348,10 +348,10 @@ Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bu 하지만 `` 같이 **직접 만든** 컴포넌트에 ref를 주입할 때는 `null`이 기본적으로 주어집니다. 여기 앞서 말한 내용을 설명하는 예시가 있습니다. 버튼을 클릭할 때 input 요소에 포커스 **되지 않는 것을** 주목하세요. -Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile. +Ref는 일종의 탈출구입니다. 다른 컴포넌트의 DOM 노드를 수동으로 조작하면 코드를 불안정하게 만들 수 있습니다. -You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component). +부모 컴포넌트에서 자식 컴포넌트로 ref를 [prop 처럼](/learn/passing-props-to-a-component) 전달할 수 있습니다. ```js {3-4,9} import { useRef } from 'react'; @@ -366,9 +366,10 @@ function MyForm() { } ``` -In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to ``. Because `` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `` DOM element. +위 예시에서, 부모 컴포넌트인 `MyForm`에서 ref를 생성하고, 이를 자식 컴포넌트인 `MyInput`으로 전달합니다. 그리고 `MyInput`은 그 ref를 ``에 넘겨줍니다. ``은 [내장 컴포넌트](/reference/react-dom/components/common)이므로, React는 해당 ref의 `.current` 속성을 `` DOM 요소로 설정합니다. + +`MyForm`에서 생성된 `inputRef`는 이제 `MyInput`이 반환한 `` DOM 요소를 가리킵니다. 그리고 `MyForm`에서 생성한 클릭 핸들러는 `inputRef`에 접근하여 `focus()`를 호출함으로써 ``에 포커스를 설정할 수 있습니다. -The `inputRef` created in `MyForm` now points to the `` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on ``. @@ -403,9 +404,7 @@ export default function MyForm() { #### 명령형 처리방식으로 하위 API 노출하기 {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/} -위 예시에서 `MyInput` 컴포넌트는 DOM 입력 요소를 그대로 노출했습니다. 그리고 부모 컴포넌트에서 DOM 노드의 `focus()`를 호출할 수 있게 되었습니다. 하지만 이에 따라 부모 컴포넌트에서 DOM 노드의 CSS 스타일을 직접 변경하는 등의 예상치 못 한 작업을 할 수 있습니다. 몇몇 상황에서는 노출된 기능을 제한하고 싶을 수 있는데, 이 때 `useImperativeHandle`을 사용합니다. - -In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle): {/*TODO*/} +위 예시에서 `MyInput` 컴포넌트는 DOM 입력 요소를 그대로 노출했습니다. 그리고 부모 컴포넌트에서 DOM 노드의 `focus()`를 호출할 수 있게 되었습니다. 하지만 이에 따라 부모 컴포넌트에서 DOM 노드의 CSS 스타일을 직접 변경하는 등의 예상치 못 한 작업을 할 수 있습니다. 몇몇 상황에서는 노출된 기능을 제한하고 싶을 수 있는데, 이 때 [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용합니다. @@ -443,8 +442,6 @@ export default function Form() { 여기 `MyInput` 내부의 `realInputRef`는 실제 input DOM 노드를 가지고 있습니다. 하지만 [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용하여 React가 ref를 참조하는 부모 컴포넌트에 직접 구성한 객체를 전달하도록 지시합니다. 따라서 `Form` 컴포넌트 안쪽의 `inputRef.current`는 `foucs` 메서드만 가지고 있습니다. 이 경우 ref는 DOM 노드가 아니라 [`useImperativeHandle`](/reference/react/useImperativeHandle) 호출에서 직접 구성한 객체가 됩니다. -Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call. {/*TODO*/} - ## React가 ref를 부여할 때 {/*when-react-attaches-the-refs*/} From eab5fbd3c8aea069377f4ddadc47b84568dc620e Mon Sep 17 00:00:00 2001 From: thecode00 Date: Tue, 25 Feb 2025 00:16:35 +0900 Subject: [PATCH 3/4] Translate new exposing-a-subset-of-the-api-with-an-imperative-handle --- src/content/learn/manipulating-the-dom-with-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index fcb0b45f1..7a17a8114 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -404,7 +404,7 @@ export default function MyForm() { #### 명령형 처리방식으로 하위 API 노출하기 {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/} -위 예시에서 `MyInput` 컴포넌트는 DOM 입력 요소를 그대로 노출했습니다. 그리고 부모 컴포넌트에서 DOM 노드의 `focus()`를 호출할 수 있게 되었습니다. 하지만 이에 따라 부모 컴포넌트에서 DOM 노드의 CSS 스타일을 직접 변경하는 등의 예상치 못 한 작업을 할 수 있습니다. 몇몇 상황에서는 노출된 기능을 제한하고 싶을 수 있는데, 이 때 [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용합니다. +위 예시에서 `MyInput`에 전달된 ref는 DOM 입력 요소로 전달됩니다. 그리고 부모 컴포넌트에서 DOM 노드의 `focus()`를 호출할 수 있게 되었습니다. 하지만 이에 따라 부모 컴포넌트에서 DOM 노드의 CSS 스타일을 직접 변경하는 등의 예상치 못 한 작업을 할 수 있습니다. 몇몇 상황에서는 노출된 기능을 제한하고 싶을 수 있는데, 이 때 [`useImperativeHandle`](/reference/react/useImperativeHandle)을 사용합니다. From 737e8c1d3a81817dc9f5ef3cb76a8627c91cb858 Mon Sep 17 00:00:00 2001 From: thecode00 Date: Tue, 25 Feb 2025 00:32:14 +0900 Subject: [PATCH 4/4] Fix translated id --- src/content/learn/synchronizing-with-effects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index b4e9db4e2..1a8768908 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -590,7 +590,7 @@ input { display: block; margin-bottom: 20px; } **배포 환경에서는 `"✅ 연결 중..."`이 한 번만 출력됩니다.** 컴포넌트를 다시 마운트하는 것은 개발 중에만 발생하며 클린업이 필요한 Effect를 찾아주는 데 도움을 줍니다. 개발 동작에서 벗어나려면 [Strict Mode](/reference/react/StrictMode)를 끄는 것도 가능하지만, 켜둘 것을 권장합니다. 이렇게 하면 위와 같은 많은 버그를 찾을 수 있습니다. -## 개발 중에 Effect가 두 번 실행되는 경우를 다루는 방법 {/*개발-중에-effect가-두-번-실행되는-경우를-다루는-방법*/} +## 개발 중에 Effect가 두 번 실행되는 경우를 다루는 방법 {/*how-to-handle-the-effect-firing-twice-in-development*/} React는 마지막 예시와 같은 버그를 찾기 위해 개발 중에 컴포넌트를 명시적으로 다시 마운트합니다. **"Effect를 한 번 실행하는 방법"이 아니라 "어떻게 Effect가 다시 마운트된 후에도 작동하도록 고칠 것인가"라는 것이 옳은 질문입니다.**