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`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component.
37
+
*`render`: 컴포넌트의 렌더링 함수입니다. React는 컴포넌트가 부모로부터 받은 props와 `ref`로 이 함수를 호출합니다. 반환하는 JSX는 컴포넌트의 결과가 됩니다.
38
38
39
-
#### Returns {/*returns*/}
39
+
#### 반환값 {/*returns*/}
40
40
41
-
`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, a component returned by `forwardRef` is also able to receive a `ref`prop.
41
+
`forwardRef`는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 다르게, `forwardRef`가 반환하는 컴포넌트는 `ref`prop도 받을 수 있습니다.
42
42
43
-
#### Caveats {/*caveats*/}
43
+
#### 주의 {/*caveats*/}
44
44
45
-
*In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice)This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
45
+
* Strict Mode에서 React는 [실수로 발생한 결함을 찾기 위해](#my-initializer-or-updater-function-runs-twice)**렌더링 함수를 두 번 호출**합니다. 이는 개발 환경 전용 동작이며 프로덕션 환경에는 영향을 미치지 않습니다. 렌더링 함수가 순수함수인 경우(그래야만 합니다.) 컴포넌트 로직에 영향을 미치지 않습니다. 호출 결과 중 하나의 결과는 무시됩니다.
46
46
47
47
48
48
---
49
49
50
-
### `render`function {/*render-function*/}
50
+
### `render`함수 {/*render-function*/}
51
51
52
-
`forwardRef` accepts a render function as an argument. React calls this function with `props` and `ref`:
52
+
`forwardRef`는 render 함수를 인수로 받습니다. React는 `props`와 `ref`와 함께 이 함수를 호출합니다.
*`props`: The props passed by the parent component.
67
+
*`props`: 부모 컴포넌트가 전달한 props입니다.
68
68
69
-
*`ref`: The `ref`attribute passed by the parent component. The `ref` can be an object or a function. If the parent component has not passed a ref, it will be `null`. You should either pass the `ref` you receive to another component, or pass it to [`useImperativeHandle`.](/reference/react/useImperativeHandle)
69
+
*`ref`: 부모 컴포넌트가 전달한 `ref`어트리뷰트입니다. `ref`는 객체나 함수일 수 있습니다. 부모 컴포넌트가 ref를 전달하지 않은 경우 `null`이 됩니다. 전달받은 `ref`를 다른 컴포넌트에 전달하거나 [`useImperativeHandle`.](/reference/react/useImperativeHandle)에 전달해야 합니다.
70
70
71
-
#### Returns {/*render-returns*/}
71
+
#### 반환값 {/*render-returns*/}
72
72
73
-
`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by `forwardRef`is able to take a `ref`prop.
73
+
`forwardRef`는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 다르게 `forwardRef`에 의해 반환되는 컴포넌트는 `ref`prop를 받을 수 있습니다.
74
74
75
75
---
76
76
77
-
## Usage {/*usage*/}
77
+
## 사용법 {/*usage*/}
78
78
79
-
### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/}
79
+
### 부모 컴포넌트에 DOM 노드 노출하기 {/*exposing-a-dom-node-to-the-parent-component*/}
80
80
81
-
By default, each component's DOM nodes are private. However, sometimes it's useful to expose a DOM node to the parent--for example, to allow focusing it. To opt in, wrap your component definition into `forwardRef()`:
81
+
기본적으로 각 컴포넌트의 DOM 노드는 비공개입니다. 그러나 때로는 부모에 DOM 노드를 노출하는 것이 유용할 수 있습니다. 예를 들어 focus 하기 위해 노출할 수 있습니다. 이를 위해 컴포넌트 정의를 `forwardRef()`로 감싸주면 됩니다.
This`Form`component [passes a ref](/reference/react/useRef#manipulating-the-dom-with-a-ref) to `MyInput`. The `MyInput`component *forwards* that ref to the `<input>`browser tag. As a result, the `Form`component can access that `<input>` DOM node and call [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it.
134
+
이`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)를 호출할 수 있습니다.
135
135
136
-
Keep in mind that exposing a ref to the DOM node inside your component makes it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment.
136
+
컴포넌트 내부의 DOM 노드의 ref를 노출하면 나중에 컴포넌트의 내부를 변경하기가 더 어려워진다는 점에 유의하세요. 일반적으로 버튼이나 텍스트 input과 같이 재사용할 수 있는 저수준 컴포넌트에서 DOM 노드를 노출하지만, 아바타나 댓글 같은 애플리케이션 레벨의 컴포넌트에서는 노출하고 싶지 않을 것입니다.
137
137
138
-
<RecipestitleText="Examples of forwarding a ref">
138
+
<Recipestitle="ref 전달 예시">
139
139
140
-
#### Focusing a text input {/*focusing-a-text-input*/}
140
+
#### 텍스트 input에 초점 맞추기 {/*focusing-a-text-input*/}
141
141
142
-
Clicking the button will focus the input. The `Form`component defines a ref and passes it to the `MyInput`component. The `MyInput`component forwards that ref to the browser `<input>`. This lets the `Form`component focus the `<input>`.
142
+
버튼을 클릭하면 input에 포커스 됩니다. `Form`컴포넌트는 ref를 정의하고 이를 `MyInput`컴포넌트로 전달합니다. `MyInput`컴포넌트는 해당 ref를 `input`으로 전달합니다. 이렇게 하면 `Form`컴포넌트가 `input`의 포커스를 줄 수 있습니다.
143
143
144
144
<Sandpack>
145
145
@@ -191,9 +191,9 @@ input {
191
191
192
192
<Solution />
193
193
194
-
#### Playing and pausing a video {/*playing-and-pausing-a-video*/}
194
+
#### 비디오 재생 및 정지하기 {/*playing-and-pausing-a-video*/}
195
195
196
-
Clicking the button will call[`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play)and[`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause) on a `<video>` DOM node. The `App`component defines a ref and passes it to the `MyVideoPlayer`component. The `MyVideoPlayer`component forwards that ref to the browser `<video>`node. This lets the `App`component play and pause the `<video>`.
196
+
버튼을 클릭하면 `<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>`를 재생하고 정지할 수 있습니다.
If that `MyInput`component forwards a ref to its `<input>`, a ref to `FormField` will give you that `<input>`:
271
+
`MyInput`컴포넌트가 `<input>`에 ref를 전달하면 `FormField`의 ref는 해당 `<input>`을 얻을 수 있습니다.
272
272
273
273
```js {2,5,10}
274
274
functionForm() {
@@ -289,7 +289,7 @@ function Form() {
289
289
}
290
290
```
291
291
292
-
The `Form`component defines a ref and passes it to `FormField`. The `FormField`component forwards that ref to `MyInput`, which forwards it to a browser `<input>` DOM node. This is how `Form` accesses that DOM node.
292
+
`Form`컴포넌트는 ref를 정의하고 이를 `FormField`에 전달합니다. `FormField`컴포넌트는 해당 ref를 `MyInput`으로 전달하고, 이 컴포넌트는 `<input>` DOM 노드로 전달합니다. 이것이 `Form`이 `<input>`DOM 노드에 접근하는 방식입니다.
293
293
294
294
295
295
<Sandpack>
@@ -367,9 +367,9 @@ input, button {
367
367
368
368
---
369
369
370
-
### Exposing an imperative handle instead of a DOM node {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
370
+
### DOM 노드 대신 명령형 핸들 노출하기 {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
371
371
372
-
Instead of exposing an entire DOM node, you can expose a custom object, called an *imperative handle,* with a more constrained set of methods. To do this, you'd need to define a separate ref to hold the DOM node:
372
+
전체 DOM 노드를 노출하는 대신 제한된 메서드 집합과 함께 *명령형 핸들*이라고 하는 사용자 정의 객체를 노출할 수 있습니다. 이를 위해 DOM 노드를 보유할 별도의 ref를 정의해야 합니다.
If some component gets a ref to `MyInput`, it will only receive your`{ focus, scrollIntoView }`object instead of the DOM node. This lets you limit the information you expose about your DOM node to the minimum.
407
+
일부 컴포넌트가 `MyInput`의 ref를 받으면 DOM 노드 대신`{ focus, scrollIntoView }`객체만 받습니다. 이를 통해 노출하는 DOM 노드의 정보를 최소한으로 제한할 수 있습니다.
408
408
409
409
<Sandpack>
410
410
@@ -463,25 +463,25 @@ input {
463
463
464
464
</Sandpack>
465
465
466
-
[Read more about using imperative handles.](/reference/react/useImperativeHandle)
466
+
[명령형 핸들 사용에 대해 자세히 알아보세요.](/reference/react/useImperativeHandle)
467
467
468
468
<Pitfall>
469
469
470
-
**Do not overuse refs.**You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.
470
+
**ref를 과도하게 사용하지 마세요.**노드로 스크롤 하기, 노드에 포커스하기, 애니메이션 트리거하기, 텍스트 선택하기 등 prop로 표현할 수 없는 필수적인 동작에만 ref를 사용해야 합니다.
471
471
472
-
**If you can express something as a prop, you should not use a ref.**For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props.
472
+
**prop로 무언가를 표현할 수 있다면 ref를 사용해서는 안 됩니다.**예를 들어 `Modal` 컴포넌트에서 `{ open, close }`와 같은 명령형 핸들을 노출하는 대신 `<Modal isOpen={isOpen} />`과 같이 prop `isOpen`을 사용하는 것이 더 좋습니다. [Effects](/learn/synchronizing-with-effects)는 props를 통해 명령형 동작을 노출하는 데 도움이 될 수 있습니다.
473
473
474
474
</Pitfall>
475
475
476
476
---
477
477
478
-
## Troubleshooting {/*troubleshooting*/}
478
+
## 문제해결 {/*troubleshooting*/}
479
479
480
-
### My component is wrapped in `forwardRef`, but the `ref` to it is always `null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
480
+
### 컴포넌트가 `forwardRef`로 감싸져 있지만, 컴포넌트의 `ref`는 항상 `null`입니다. {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
481
481
482
-
This usually means that you forgot to actually use the `ref` that you received.
482
+
일반적으로 `ref`를 실제로 사용하는 것을 잊어버렸다는 것입니다.
483
483
484
-
For example, this component doesn't do anything with its `ref`:
If `showInput` is `false`, then the ref won't be forwarded to any node, and a ref to `MyInput` will remain empty. This is particularly easy to miss if the condition is hidden inside another component, like `Panel` in this example:
523
+
`showInput`이 `false`이면 ref가 어떤 노드로도 전달되지 않으며 `MyInput`의 ref는 비어 있게 됩니다. 이 예제의 `Panel`과 같이 조건이 다른 컴포넌트 안에 숨겨져 있는 경우 특히 이 점을 놓치기 쉽습니다.
0 commit comments