From 7a56faf502f51ee10cf42567719704c8e2747351 Mon Sep 17 00:00:00 2001 From: lumirbot Date: Thu, 10 Jul 2025 16:12:09 +0900 Subject: [PATCH 1/6] docs: update documentation --- src/content/reference/react/forwardRef.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index fc6fffa90..88a04ef16 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -12,7 +12,7 @@ In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead. -`forwardRef`를 사용하면 컴포넌트가 [ref](/learn/manipulating-the-dom-with-refs)를 사용하여 부모 컴포넌트의 DOM 노드를 노출할 수 있습니다. +`forwardRef`를 사용하면 컴포넌트가 [Ref](/learn/manipulating-the-dom-with-refs)를 사용하여 부모 컴포넌트의 DOM 노드를 노출할 수 있습니다. ```js const SomeComponent = forwardRef(render) From 10aca030de47b1e061096a5d588d07eab6f5d886 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Thu, 10 Jul 2025 16:19:45 +0900 Subject: [PATCH 2/6] refactor: translate Callout component --- src/components/MDX/ExpandableCallout.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index 73e0e4dc4..48634ffe5 100644 --- a/src/components/MDX/ExpandableCallout.tsx +++ b/src/components/MDX/ExpandableCallout.tsx @@ -27,7 +27,7 @@ interface ExpandableCalloutProps { const variantMap = { deprecated: { - title: '더 이상 사용되지 않습니다', + title: '더 이상 사용되지 않습니다!', Icon: IconWarning, containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20', textColor: 'text-red-50 dark:text-red-40', @@ -53,7 +53,7 @@ const variantMap = { 'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)', }, experimental: { - title: 'Experimental Feature', + title: '실험적 기능', Icon: IconCanary, containerClasses: 'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg', @@ -70,7 +70,7 @@ const variantMap = { 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', }, wip: { - title: '개발중이에요', + title: '개발중이에요!', Icon: IconNote, containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20', textColor: 'text-yellow-50 dark:text-yellow-40', From 000dcb215e51ca880a3923c572f8d739ec7ed065 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A3=A8=EB=B0=80LuMir?= Date: Thu, 10 Jul 2025 17:10:52 +0900 Subject: [PATCH 3/6] docs: update `forwardRef.md` --- src/content/reference/react/forwardRef.md | 48 +++++++++++------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md index 88a04ef16..b068b57d1 100644 --- a/src/content/reference/react/forwardRef.md +++ b/src/content/reference/react/forwardRef.md @@ -4,9 +4,9 @@ title: forwardRef -In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead. +React 19부터는 더 이상 `forwardRef`이 필요하지 않습니다. 이제 `ref`를 Prop으로 직접 전달하면 됩니다. -`forwardRef` will deprecated in a future release. Learn more [here](/blog/2024/04/25/react-19#ref-as-a-prop). +`forwardRef`는 향후 릴리스에서 사용 중단Deprecated될 예정입니다. 자세한 내용은 [여기](/blog/2024/12/05/react-19#ref-as-a-prop)에서 확인하세요. @@ -28,7 +28,7 @@ const SomeComponent = forwardRef(render) ### `forwardRef(render)` {/*forwardref*/} -컴포넌트가 ref를 받아 하위 컴포넌트로 전달하도록 하려면 `forwardRef()`를 호출하세요. +컴포넌트가 Ref를 받아 하위 컴포넌트로 전달하도록 하려면 `forwardRef()`를 호출하세요. ```js import { forwardRef } from 'react'; @@ -42,22 +42,22 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### 매개변수 {/*parameters*/} -* `render`: 컴포넌트의 렌더링 함수입니다. React는 컴포넌트가 부모로부터 받은 props와 `ref`로 이 함수를 호출합니다. 반환하는 JSX는 컴포넌트의 결과가 됩니다. +* `render`: 컴포넌트의 렌더링 함수입니다. React는 컴포넌트가 부모로부터 받은 `props`와 `ref`로 이 함수를 호출합니다. 반환하는 JSX는 컴포넌트의 결과가 됩니다. #### 반환값 {/*returns*/} -`forwardRef`는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 다르게, `forwardRef`가 반환하는 컴포넌트는 `ref` prop도 받을 수 있습니다. +`forwardRef`는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 다르게, `forwardRef`가 반환하는 컴포넌트는 `ref` Prop도 받을 수 있습니다. #### 주의 사항 {/*caveats*/} -* Strict Mode에서 React는 [실수로 발생한 결함을 찾기 위해](/reference/react/useState#my-initializer-or-updater-function-runs-twice) **렌더링 함수를 두 번 호출**합니다. 이는 개발 환경 전용 동작이며 프로덕션 환경에는 영향을 미치지 않습니다. 렌더링 함수가 순수함수인 경우(그래야만 합니다.) 컴포넌트 로직에 영향을 미치지 않습니다. 호출 결과 중 하나의 결과는 무시됩니다. +* Strict Mode에서 React는 [실수로 발생한 결함을 찾기 위해](/reference/react/useState#my-initializer-or-updater-function-runs-twice) **렌더링 함수를 두 번 호출**합니다. 이는 개발 환경 전용 동작이며 프로덕션 환경에는 영향을 미치지 않습니다. 렌더링 함수가 순수 함수인 경우(그래야만 합니다), 컴포넌트 로직에 영향을 미치지 않습니다. 호출 결과 중 하나의 결과는 무시됩니다. --- ### `render` 함수 {/*render-function*/} -`forwardRef`는 `render` 함수를 인수로 받습니다. React는 `props`와 `ref`와 함께 이 함수를 호출합니다. +`forwardRef`는 `render` 함수를 인수로 받습니다. React는 `props` 및 `ref`와 함께 이 함수를 호출합니다. ```js const MyInput = forwardRef(function MyInput(props, ref) { @@ -72,13 +72,13 @@ const MyInput = forwardRef(function MyInput(props, ref) { #### 매개변수 {/*render-parameters*/} -* `props`: 부모 컴포넌트가 전달한 props입니다. +* `props`: 부모 컴포넌트가 전달한 Props입니다. -* `ref`: 부모 컴포넌트가 전달한 `ref` 어트리뷰트입니다. `ref`는 객체나 함수일 수 있습니다. 부모 컴포넌트가 ref를 전달하지 않은 경우 `null`이 됩니다. 전달받은 `ref`를 다른 컴포넌트에 전달하거나 [`useImperativeHandle`.](/reference/react/useImperativeHandle)에 전달해야 합니다. +* `ref`: 부모 컴포넌트가 전달한 `ref` 어트리뷰트입니다. `ref`는 객체나 함수일 수 있습니다. 부모 컴포넌트가 Ref를 전달하지 않은 경우 `null`이 됩니다. 전달받은 `ref`를 다른 컴포넌트에 전달하거나 [`useImperativeHandle`](/reference/react/useImperativeHandle)에 전달해야 합니다. #### 반환값 {/*render-returns*/} -`forwardRef`는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 다르게 `forwardRef` 에 의해 반환되는 컴포넌트는 `ref` prop를 받을 수 있습니다. +`forwardRef`는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 다르게 `forwardRef`에 의해 반환되는 컴포넌트는 `ref` Prop를 받을 수 있습니다. --- @@ -86,7 +86,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { ### 부모 컴포넌트에 DOM 노드 노출하기 {/*exposing-a-dom-node-to-the-parent-component*/} -기본적으로 각 컴포넌트의 DOM 노드는 비공개입니다. 그러나 때로는 부모에 DOM 노드를 노출하는 것이 유용할 수 있습니다. 예를 들어 focus 하기 위해 노출할 수 있습니다. 이를 위해 컴포넌트 정의를 `forwardRef()`로 감싸주면 됩니다. +기본적으로 각 컴포넌트의 DOM 노드는 비공개입니다. 그러나 때로는 부모에 DOM 노드를 노출하는 것이 유용할 수 있습니다. 예를 들어 포커스Focus 하기 위해 노출할 수 있습니다. 이를 위해 컴포넌트 정의를 `forwardRef()`로 감싸주면 됩니다. ```js {3,11} import { forwardRef } from 'react'; @@ -102,7 +102,7 @@ const MyInput = forwardRef(function MyInput(props, ref) { }); ``` -props 다음에 두 번째 인수로 ref를 받게 됩니다. 노출하려는 DOM 노드에 이를 전달합니다. +`props` 다음에 두 번째 인수로 ref를 받게 됩니다. 노출하려는 DOM 노드에 이를 전달합니다. ```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]] import { forwardRef } from 'react'; @@ -139,15 +139,15 @@ function Form() { } ``` -이 `Form` 컴포넌트는 `MyInput` 에게 [ref를 전달](/reference/react/useRef#manipulating-the-dom-with-a-ref)합니다. `MyInput` 컴포넌트는 해당 ref를 `` 태그에 전달합니다. 결과적으로 `Form` 컴포넌트는 해당 `` DOM 노드에 접근하여 [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)를 호출할 수 있습니다. +이 `Form` 컴포넌트는 `MyInput` 에게 [Ref를 전달](/reference/react/useRef#manipulating-the-dom-with-a-ref)합니다. `MyInput` 컴포넌트는 해당 Ref를 `` 태그에 전달합니다. 결과적으로 `Form` 컴포넌트는 해당 `` DOM 노드에 접근하여 [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)를 호출할 수 있습니다. -컴포넌트 내부의 DOM 노드의 ref를 노출하면 나중에 컴포넌트의 내부를 변경하기가 더 어려워진다는 점에 유의하세요. 일반적으로 버튼이나 텍스트 input과 같이 재사용할 수 있는 저수준 컴포넌트에서 DOM 노드를 노출하지만, 아바타나 댓글 같은 애플리케이션 레벨의 컴포넌트에서는 노출하고 싶지 않을 것입니다. +컴포넌트 내부 DOM 노드의 Ref를 노출하면 나중에 컴포넌트의 내부를 변경하기가 더 어려워진다는 점에 유의하세요. 일반적으로 버튼이나 텍스트 Input과 같이 재사용할 수 있는 저수준 컴포넌트에서 DOM 노드를 노출하지만, 아바타나 댓글 같은 애플리케이션 레벨의 컴포넌트에서는 노출하고 싶지 않을 것입니다. -#### 텍스트 input에 초점 맞추기 {/*focusing-a-text-input*/} +#### 텍스트 Input에 초점 맞추기 {/*focusing-a-text-input*/} -버튼을 클릭하면 input에 포커스 됩니다. `Form` 컴포넌트는 ref를 정의하고 이를 `MyInput` 컴포넌트로 전달합니다. `MyInput` 컴포넌트는 해당 ref를 `input`으로 전달합니다. 이렇게 하면 `Form` 컴포넌트가 `input`의 포커스를 줄 수 있습니다. +버튼을 클릭하면 Input에 포커스됩니다. `Form` 컴포넌트는 Ref를 정의하고 이를 `MyInput` 컴포넌트로 전달합니다. `MyInput` 컴포넌트는 해당 Ref를 `input`으로 전달합니다. 이렇게 하면 `Form` 컴포넌트가 `input`에 포커스를 줄 수 있습니다. @@ -201,7 +201,7 @@ input { #### 비디오 재생 및 정지하기 {/*playing-and-pausing-a-video*/} -버튼을 클릭하면 `