From 3cb61975d8a58b3cd1289c67cab8b7133c4f902a Mon Sep 17 00:00:00 2001 From: "Yejeong, Ham" Date: Sun, 24 Aug 2025 22:24:00 +0900 Subject: [PATCH 1/4] docs: add missing translations in src/content/reference/react-dom/components/common.md Signed-off-by: Yejeong, Ham --- .../reference/react-dom/components/common.md | 24 +++++++++---------- src/sidebarReference.json | 2 +- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 3f0c95544..70e3ae100 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -255,32 +255,32 @@ title: "공통 컴포넌트 (예:
)" }}> ``` -[See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback) +[`ref` 콜백을 사용하는 예시를 확인해 보세요.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback) -When the `
` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `
` DOM node is removed, React will call your the cleanup function returned from the callback. +화면에 `
` DOM 노드가 추가되면, React는 `ref` 콜백을 호출하고 그 인자로 DOM `node`를 전달합니다. 해당 `
` DOM 노드가 제거되면, React는 콜백에서 반환한 cleanup 함수를 호출합니다. -React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node. +React는 *다른* `ref` 콜백을 전달할 때마다 `ref` 콜백도 호출합니다. 위 예시에서 `(node) => { ... }`는 매 렌더링마다 서로 다른 함수입니다. 컴포넌트가 다시 렌더링될 때, *이전* 함수는 인자로 `null`을 받아 호출되고, *다음* 함수는 DOM 노드를 인자로 받아 호출됩니다. -#### Parameters {/*ref-callback-parameters*/} +#### 매개변수 {/*ref-callback-parameters*/} -* `node`: A DOM node. React will pass you the DOM node when the ref gets attached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily cleanup and re-create during every re-render of the component. +* `node`: 하나의 DOM 노드. ref가 DOM 노드에 연결될 때 React가 해당 DOM 노드를 전달합니다. 매 렌더에서 `ref` 콜백에 동일한 함수 참조를 넘기지 않으면, 컴포넌트가 리렌더링될 때마다 그 콜백이 잠시 정리됐다가 다시 생성됩니다. -#### React 19 added cleanup functions for `ref` callbacks. {/*react-19-added-cleanup-functions-for-ref-callbacks*/} +#### React 19는 `ref` 콜백을 위한 cleanup 함수를 추가했습니다. {/*react-19-added-cleanup-functions-for-ref-callbacks*/} -To support backwards compatibility, if a cleanup function is not returned from the `ref` callback, `node` will be called with `null` when the `ref` is detached. This behavior will be removed in a future version. +하위 호환성을 위해, `ref` 콜백이 cleanup 함수를 반환하지 않으면, `ref`가 분리될 때 `node`가 `null`로 호출됩니다. 이 동작은 향후 버전에서 제거될 예정입니다. -#### Returns {/*returns*/} +#### 반환값 {/*returns*/} -* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached. This behavior will be removed in a future version. +* **optional** `cleanup 함수`: `ref`가 분리되면, React는 cleanup 함수를 호출합니다. `ref` 콜백에 의해 함수가 반환되지 않으면 React는 `ref`가 분리되면 인수로 `null`을 사용하여 다시 콜백을 호출합니다. 이 동작은 향후 버전에서 제거될 예정입니다. -#### Caveats {/*caveats*/} +#### 주의사항 {/*caveats*/} -* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function. -* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If no cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node. +* Strict Mode가 켜져있으면, React는 첫 번째 실제 설정 전에 **개발 전용 설정 + cleanup 주기**를 하나 더 실행할 것입니다. 이는 스트레스 테스트로, cleanup 로직이 setup 로직을 "거울처럼" 따라가며 setup이 하는 일을 중지하거나 되돌리도록 보장하기 위한 것입니다. 이 때문에 문제가 발생한다면 cleanup 함수를 구현하세요. +* *다른* `ref` 콜백을 전달하면, React는 먼저 *이전* 콜백의 cleanup 함수가 있다면 그것을 호출합니다. cleanup 함수가 없으면, 이전 `ref` 콜백을 `null` 인수로 한 번 호출합니다. *다음* 함수는 DOM 노드와 함께 호출됩니다. --- diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 6a98dcf33..9ea98232e 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -187,7 +187,7 @@ "path": "/reference/react-dom/components", "routes": [ { - "title": "Common (e.g.
)", + "title": "공통 컴포넌트 (예:
)", "path": "/reference/react-dom/components/common" }, { From 59fd55fb41038ea8b0f3dbb664a1dc01599b18d8 Mon Sep 17 00:00:00 2001 From: "Yejeong, Ham" Date: Sun, 24 Aug 2025 22:33:01 +0900 Subject: [PATCH 2/4] Chore: apply spell checker results Signed-off-by: Yejeong, Ham --- src/content/reference/react-dom/components/common.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 70e3ae100..74a07fb22 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -259,7 +259,7 @@ title: "공통 컴포넌트 (예:
)" 화면에 `
` DOM 노드가 추가되면, React는 `ref` 콜백을 호출하고 그 인자로 DOM `node`를 전달합니다. 해당 `
` DOM 노드가 제거되면, React는 콜백에서 반환한 cleanup 함수를 호출합니다. -React는 *다른* `ref` 콜백을 전달할 때마다 `ref` 콜백도 호출합니다. 위 예시에서 `(node) => { ... }`는 매 렌더링마다 서로 다른 함수입니다. 컴포넌트가 다시 렌더링될 때, *이전* 함수는 인자로 `null`을 받아 호출되고, *다음* 함수는 DOM 노드를 인자로 받아 호출됩니다. +React는 *다른* `ref` 콜백을 전달할 때마다 `ref` 콜백도 호출합니다. 위 예시에서 `(node) => { ... }`는 렌더링마다 서로 다른 함수입니다. 컴포넌트가 다시 렌더링 될 때, *이전* 함수는 인자로 `null`을 받아 호출되고, *다음* 함수는 DOM 노드를 인자로 받아 호출됩니다. #### 매개변수 {/*ref-callback-parameters*/} From 7df7b0fe9c9592ace0012e1ed16115bc54b871d7 Mon Sep 17 00:00:00 2001 From: "Yejeong, Ham" Date: Sun, 24 Aug 2025 22:37:06 +0900 Subject: [PATCH 3/4] Fix: resolve textlint errors Signed-off-by: Yejeong, Ham --- src/content/reference/react-dom/components/common.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 74a07fb22..0712b3087 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -277,7 +277,7 @@ React는 *다른* `ref` 콜백을 전달할 때마다 `ref` 콜백도 호출합 * **optional** `cleanup 함수`: `ref`가 분리되면, React는 cleanup 함수를 호출합니다. `ref` 콜백에 의해 함수가 반환되지 않으면 React는 `ref`가 분리되면 인수로 `null`을 사용하여 다시 콜백을 호출합니다. 이 동작은 향후 버전에서 제거될 예정입니다. -#### 주의사항 {/*caveats*/} +#### 주의 사항 {/*caveats*/} * Strict Mode가 켜져있으면, React는 첫 번째 실제 설정 전에 **개발 전용 설정 + cleanup 주기**를 하나 더 실행할 것입니다. 이는 스트레스 테스트로, cleanup 로직이 setup 로직을 "거울처럼" 따라가며 setup이 하는 일을 중지하거나 되돌리도록 보장하기 위한 것입니다. 이 때문에 문제가 발생한다면 cleanup 함수를 구현하세요. * *다른* `ref` 콜백을 전달하면, React는 먼저 *이전* 콜백의 cleanup 함수가 있다면 그것을 호출합니다. cleanup 함수가 없으면, 이전 `ref` 콜백을 `null` 인수로 한 번 호출합니다. *다음* 함수는 DOM 노드와 함께 호출됩니다. From 66887982630478df505d6aa0c4424ffb90a37edc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Mon, 25 Aug 2025 23:07:08 +0900 Subject: [PATCH 4/4] Fix typos in common.md regarding refs --- .../reference/react-dom/components/common.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 0712b3087..2490374ad 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -257,30 +257,30 @@ title: "공통 컴포넌트 (예:
)" [`ref` 콜백을 사용하는 예시를 확인해 보세요.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback) -화면에 `
` DOM 노드가 추가되면, React는 `ref` 콜백을 호출하고 그 인자로 DOM `node`를 전달합니다. 해당 `
` DOM 노드가 제거되면, React는 콜백에서 반환한 cleanup 함수를 호출합니다. +화면에 `
` DOM 노드가 추가되면, React는 `ref` 콜백을 호출하고 그 인자로 DOM `node`를 전달합니다. 해당 `
` DOM 노드가 제거되면, React는 콜백에서 반환한 Cleanup 함수를 호출합니다. React는 *다른* `ref` 콜백을 전달할 때마다 `ref` 콜백도 호출합니다. 위 예시에서 `(node) => { ... }`는 렌더링마다 서로 다른 함수입니다. 컴포넌트가 다시 렌더링 될 때, *이전* 함수는 인자로 `null`을 받아 호출되고, *다음* 함수는 DOM 노드를 인자로 받아 호출됩니다. #### 매개변수 {/*ref-callback-parameters*/} -* `node`: 하나의 DOM 노드. ref가 DOM 노드에 연결될 때 React가 해당 DOM 노드를 전달합니다. 매 렌더에서 `ref` 콜백에 동일한 함수 참조를 넘기지 않으면, 컴포넌트가 리렌더링될 때마다 그 콜백이 잠시 정리됐다가 다시 생성됩니다. +* `node`: DOM 노드. Ref가 DOM 노드에 연결될 때 React가 해당 DOM 노드를 전달합니다. 매 렌더링에서 `ref` 콜백에 동일한 함수 참조를 넘기지 않으면, 컴포넌트가 리렌더링될 때마다 콜백이 일시적으로 Cleanup 됐다가 다시 생성됩니다. -#### React 19는 `ref` 콜백을 위한 cleanup 함수를 추가했습니다. {/*react-19-added-cleanup-functions-for-ref-callbacks*/} +#### React 19는 `ref` 콜백을 위한 Cleanup 함수를 추가했습니다. {/*react-19-added-cleanup-functions-for-ref-callbacks*/} -하위 호환성을 위해, `ref` 콜백이 cleanup 함수를 반환하지 않으면, `ref`가 분리될 때 `node`가 `null`로 호출됩니다. 이 동작은 향후 버전에서 제거될 예정입니다. +하위 호환성을 위해, `ref` 콜백이 Cleanup 함수를 반환하지 않으면, `ref`가 분리될 때 `node`가 `null`로 호출됩니다. 이 동작은 향후 버전에서 제거될 예정입니다. #### 반환값 {/*returns*/} -* **optional** `cleanup 함수`: `ref`가 분리되면, React는 cleanup 함수를 호출합니다. `ref` 콜백에 의해 함수가 반환되지 않으면 React는 `ref`가 분리되면 인수로 `null`을 사용하여 다시 콜백을 호출합니다. 이 동작은 향후 버전에서 제거될 예정입니다. +* **optional** `Cleanup 함수`: `ref`가 분리되면, React는 cleanup 함수를 호출합니다. `ref` 콜백에 의해 함수가 반환되지 않으면 React는 `ref`가 분리되면 인수로 `null`을 사용하여 다시 콜백을 호출합니다. 이 동작은 향후 버전에서 제거될 예정입니다. #### 주의 사항 {/*caveats*/} -* Strict Mode가 켜져있으면, React는 첫 번째 실제 설정 전에 **개발 전용 설정 + cleanup 주기**를 하나 더 실행할 것입니다. 이는 스트레스 테스트로, cleanup 로직이 setup 로직을 "거울처럼" 따라가며 setup이 하는 일을 중지하거나 되돌리도록 보장하기 위한 것입니다. 이 때문에 문제가 발생한다면 cleanup 함수를 구현하세요. -* *다른* `ref` 콜백을 전달하면, React는 먼저 *이전* 콜백의 cleanup 함수가 있다면 그것을 호출합니다. cleanup 함수가 없으면, 이전 `ref` 콜백을 `null` 인수로 한 번 호출합니다. *다음* 함수는 DOM 노드와 함께 호출됩니다. +* Strict Mode가 켜져있으면, React는 첫 번째 실제 설정 전에 **개발 전용 Setup + cleanup 주기**를 하나 더 실행할 것입니다. 이는 스트레스 테스트로, Cleanup 로직이 Setup 로직을 "거울처럼" 따라가며 Setup이 하는 일을 중지하거나 되돌리도록 보장하기 위한 것입니다. 이 때문에 문제가 발생한다면 Cleanup 함수를 구현하세요. +* *다른* `ref` 콜백을 전달하면, React는 먼저 *이전* 콜백의 Cleanup 함수가 있다면 그것을 호출합니다. Cleanup 함수가 없으면, 이전 `ref` 콜백을 `null`을 인수로 하여 한 번 호출합니다. *다음* 함수는 DOM 노드와 함께 호출됩니다. ---