You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
*`render`: 컴포넌트의 렌더링 함수입니다. React는 컴포넌트가 부모로부터 받은 props와`ref`로 이 함수를 호출합니다. 반환하는 JSX는 컴포넌트의 결과가 됩니다.
45
+
*`render`: 컴포넌트의 렌더링 함수입니다. React는 컴포넌트가 부모로부터 받은 `props`와`ref`로 이 함수를 호출합니다. 반환하는 JSX는 컴포넌트의 결과가 됩니다.
46
46
47
47
#### 반환값 {/*returns*/}
48
48
49
-
`forwardRef`는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 다르게, `forwardRef`가 반환하는 컴포넌트는 `ref`prop도 받을 수 있습니다.
49
+
`forwardRef`는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 다르게, `forwardRef`가 반환하는 컴포넌트는 `ref`Prop도 받을 수 있습니다.
50
50
51
51
#### 주의 사항 {/*caveats*/}
52
52
53
-
* Strict Mode에서 React는 [실수로 발생한 결함을 찾기 위해](/reference/react/useState#my-initializer-or-updater-function-runs-twice)**렌더링 함수를 두 번 호출**합니다. 이는 개발 환경 전용 동작이며 프로덕션 환경에는 영향을 미치지 않습니다. 렌더링 함수가 순수함수인 경우(그래야만 합니다.) 컴포넌트 로직에 영향을 미치지 않습니다. 호출 결과 중 하나의 결과는 무시됩니다.
53
+
* Strict Mode에서 React는 [실수로 발생한 결함을 찾기 위해](/reference/react/useState#my-initializer-or-updater-function-runs-twice)**렌더링 함수를 두 번 호출**합니다. 이는 개발 환경 전용 동작이며 프로덕션 환경에는 영향을 미치지 않습니다. 렌더링 함수가 순수 함수인 경우(그래야만 합니다), 컴포넌트 로직에 영향을 미치지 않습니다. 호출 결과 중 하나의 결과는 무시됩니다.
54
54
55
55
56
56
---
57
57
58
58
### `render` 함수 {/*render-function*/}
59
59
60
-
`forwardRef`는 `render` 함수를 인수로 받습니다. React는 `props`와`ref`와 함께 이 함수를 호출합니다.
60
+
`forwardRef`는 `render` 함수를 인수로 받습니다. React는 `props` 및`ref`와 함께 이 함수를 호출합니다.
*`ref`: 부모 컴포넌트가 전달한 `ref` 어트리뷰트입니다. `ref`는 객체나 함수일 수 있습니다. 부모 컴포넌트가 ref를 전달하지 않은 경우 `null`이 됩니다. 전달받은 `ref`를 다른 컴포넌트에 전달하거나 [`useImperativeHandle`.](/reference/react/useImperativeHandle)에 전달해야 합니다.
77
+
*`ref`: 부모 컴포넌트가 전달한 `ref` 어트리뷰트입니다. `ref`는 객체나 함수일 수 있습니다. 부모 컴포넌트가 Ref를 전달하지 않은 경우 `null`이 됩니다. 전달받은 `ref`를 다른 컴포넌트에 전달하거나 [`useImperativeHandle`](/reference/react/useImperativeHandle)에 전달해야 합니다.
78
78
79
79
#### 반환값 {/*render-returns*/}
80
80
81
-
`forwardRef`는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 다르게 `forwardRef`에 의해 반환되는 컴포넌트는 `ref`prop를 받을 수 있습니다.
81
+
`forwardRef`는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 다르게 `forwardRef`에 의해 반환되는 컴포넌트는 `ref`Prop를 받을 수 있습니다.
82
82
83
83
---
84
84
85
85
## 사용법 {/*usage*/}
86
86
87
87
### 부모 컴포넌트에 DOM 노드 노출하기 {/*exposing-a-dom-node-to-the-parent-component*/}
88
88
89
-
기본적으로 각 컴포넌트의 DOM 노드는 비공개입니다. 그러나 때로는 부모에 DOM 노드를 노출하는 것이 유용할 수 있습니다. 예를 들어 focus 하기 위해 노출할 수 있습니다. 이를 위해 컴포넌트 정의를 `forwardRef()`로 감싸주면 됩니다.
89
+
기본적으로 각 컴포넌트의 DOM 노드는 비공개입니다. 그러나 때로는 부모에 DOM 노드를 노출하는 것이 유용할 수 있습니다. 예를 들어 포커스<sup>Focus</sup> 하기 위해 노출할 수 있습니다. 이를 위해 컴포넌트 정의를 `forwardRef()`로 감싸주면 됩니다.
props 다음에 두 번째 인수로 <CodeStepstep={1}>ref</CodeStep>를 받게 됩니다. 노출하려는 DOM 노드에 이를 전달합니다.
105
+
`props` 다음에 두 번째 인수로 <CodeStepstep={1}>ref</CodeStep>를 받게 됩니다. 노출하려는 DOM 노드에 이를 전달합니다.
106
106
107
107
```js {8} [[1, 3, "ref"], [1, 8, "ref", 30]]
108
108
import { forwardRef } from'react';
@@ -139,15 +139,15 @@ function Form() {
139
139
}
140
140
```
141
141
142
-
이 `Form` 컴포넌트는 `MyInput` 에게 [ref를 전달](/reference/react/useRef#manipulating-the-dom-with-a-ref)합니다. `MyInput` 컴포넌트는 해당 ref를`<input>` 태그에 전달합니다. 결과적으로 `Form` 컴포넌트는 해당 `<input>` DOM 노드에 접근하여 [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)를 호출할 수 있습니다.
142
+
이 `Form` 컴포넌트는 `MyInput` 에게 [Ref를 전달](/reference/react/useRef#manipulating-the-dom-with-a-ref)합니다. `MyInput` 컴포넌트는 해당 Ref를`<input>` 태그에 전달합니다. 결과적으로 `Form` 컴포넌트는 해당 `<input>` DOM 노드에 접근하여 [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)를 호출할 수 있습니다.
143
143
144
-
컴포넌트 내부의 DOM 노드의 ref를 노출하면 나중에 컴포넌트의 내부를 변경하기가 더 어려워진다는 점에 유의하세요. 일반적으로 버튼이나 텍스트 input과 같이 재사용할 수 있는 저수준 컴포넌트에서 DOM 노드를 노출하지만, 아바타나 댓글 같은 애플리케이션 레벨의 컴포넌트에서는 노출하고 싶지 않을 것입니다.
144
+
컴포넌트 내부 DOM 노드의 Ref를 노출하면 나중에 컴포넌트의 내부를 변경하기가 더 어려워진다는 점에 유의하세요. 일반적으로 버튼이나 텍스트 Input과 같이 재사용할 수 있는 저수준 컴포넌트에서 DOM 노드를 노출하지만, 아바타나 댓글 같은 애플리케이션 레벨의 컴포넌트에서는 노출하고 싶지 않을 것입니다.
145
145
146
146
<Recipestitle="ref 전달 예시">
147
147
148
-
#### 텍스트 input에 초점 맞추기 {/*focusing-a-text-input*/}
148
+
#### 텍스트 Input에 초점 맞추기 {/*focusing-a-text-input*/}
149
149
150
-
버튼을 클릭하면 input에 포커스 됩니다. `Form` 컴포넌트는 ref를 정의하고 이를 `MyInput` 컴포넌트로 전달합니다. `MyInput` 컴포넌트는 해당 ref를`input`으로 전달합니다. 이렇게 하면 `Form` 컴포넌트가 `input`의 포커스를 줄 수 있습니다.
150
+
버튼을 클릭하면 Input에 포커스됩니다. `Form` 컴포넌트는 Ref를 정의하고 이를 `MyInput` 컴포넌트로 전달합니다. `MyInput` 컴포넌트는 해당 Ref를`input`으로 전달합니다. 이렇게 하면 `Form` 컴포넌트가 `input`에 포커스를 줄 수 있습니다.
151
151
152
152
<Sandpack>
153
153
@@ -201,7 +201,7 @@ input {
201
201
202
202
#### 비디오 재생 및 정지하기 {/*playing-and-pausing-a-video*/}
203
203
204
-
버튼을 클릭하면 `<video>` DOM 노드에서 [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) 및 [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause)를 호출합니다. `App` 컴포넌트는 ref를 정의하고 이를 `MyVideoPlayer` 컴포넌트에 전달합니다. `MyVideoPlayer` 컴포넌트는 해당 ref를 브라우저 `<video>` 노드로 전달합니다. 이렇게 하면 `App` 컴포넌트가 `<video>`를 재생하고 정지할 수 있습니다.
204
+
버튼을 클릭하면 `<video>` DOM 노드에서 [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) 및 [`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause)를 호출합니다. `App` 컴포넌트는 Ref를 정의하고 이를 `MyVideoPlayer` 컴포넌트에 전달합니다. `MyVideoPlayer` 컴포넌트는 해당 Ref를 브라우저 `<video>` 노드로 전달합니다. 이렇게 하면 `App` 컴포넌트가 `<video>`를 재생하고 정지할 수 있습니다.
`MyInput` 컴포넌트가 `<input>`에 ref를 전달하면 `FormField`의 ref는 해당 `<input>`을 얻을 수 있습니다.
279
+
`MyInput` 컴포넌트가 `<input>`에 `ref`를 전달하면 `FormField`의 `ref`는 해당 `<input>`을 얻을 수 있습니다.
280
280
281
281
```js {2,5,10}
282
282
functionForm() {
@@ -297,7 +297,7 @@ function Form() {
297
297
}
298
298
```
299
299
300
-
`Form` 컴포넌트는 ref를 정의하고 이를 `FormField`에 전달합니다. `FormField` 컴포넌트는 해당 ref를`MyInput`으로 전달하고, 이 컴포넌트는`<input>` DOM 노드로 전달합니다. 이것이 `Form`이 `<input>` DOM 노드에 접근하는 방식입니다.
300
+
`Form` 컴포넌트는 Ref를 정의하고 이를 `FormField`에 전달합니다. `FormField` 컴포넌트는 해당 Ref를`MyInput`으로 전달하고, 이 컴포넌트는 `<input>` DOM 노드로 전달합니다. 이것이 `Form`이 `<input>` DOM 노드에 접근하는 방식입니다.
301
301
302
302
303
303
<Sandpack>
@@ -377,7 +377,7 @@ input, button {
377
377
378
378
### DOM 노드 대신 명령형 핸들 노출하기 {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
379
379
380
-
전체 DOM 노드를 노출하는 대신 제한된 메서드 집합과 함께 *명령형 핸들*이라고 하는 사용자 정의 객체를 노출할 수 있습니다. 이를 위해 DOM 노드를 보유할 별도의 ref를 정의해야 합니다.
380
+
전체 DOM 노드를 노출하는 대신 제한된 메서드 집합과 함께 *명령형 핸들*이라고 하는 사용자 정의 객체를 노출할 수 있습니다. 이를 위해 DOM 노드를 보유할 별도의 Ref를 정의해야 합니다.
0 commit comments