Translate: manipulating-the-dom-with-refs #387
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gnujoow
added
needs review
ellemedit
force-pushed
the
translate-manipulating-the-dom-with-refs-korean
branch
from
08f3d7e
to
e1c44e1
Compare
ellemedit
force-pushed
the
translate-manipulating-the-dom-with-refs-korean
branch
from
2be022d
to
89191e0
Compare
alstn2468
reviewed
Dec 14, 2021
|
|
||
| While DOM manipulation is the most common use case for refs, the `useRef` Hook can be used for storing other things outside React, like timer IDs. Similarly to state, refs remain between renders. You can even think of refs as state variables that don't trigger re-renders when you set them! You can learn more about refs in [Referencing Values with Refs](/learn/referencing-values-with-refs). | ||
| DOM 조작이 ref를 사용하는 가장 일반적인 사용처지만 `useRef` Hook은 setTimeout Timer ID 같은 React 외부 요소를 저장하는 용도로도 사용할 수 있습니다. 상태(state)와 비슷하게 ref는 렌더링 사이에도 유지됩니다. ref를 설정하더라도 컴포넌트의 렌더링을 다시 유발하지 않는 상태 변수로 생각해도 괜찮습니다! [Ref와 값 참조](/learn/referencing-values-with-refs)에서 ref에 대해 자세히 배울 수 있습니다. |
There was a problem hiding this comment.
원문에 setTimeout은 없는데 (유추하면 맞는 내용이겠지만) 사용하는게 맞을까 생각이 듭니다!
| @@ -314,33 +314,33 @@ li { | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The `ref` callback on every list item takes care to update the Map: | |||
| 이 예시에서 `itemsRef`는 DOM 노드 하나를 가지고 있지 않습니다. 대신에 식별자와 DOM 노드 키맵으로 연결된 [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map)을 가지고 있습니다. ([Ref는 아무 값이나 가질 수 있습니다!](/learn/referencing-values-with-refs)) 모든 리스트 아이템에 있는 `ref` 콜백은 Map 변경을 처리합니다. | |||
There was a problem hiding this comment.
Suggested change
| 이 예시에서 `itemsRef`는 DOM 노드 하나를 가지고 있지 않습니다. 대신에 식별자와 DOM 노드 키맵으로 연결된 [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map)을 가지고 있습니다. ([Ref는 아무 값이나 가질 수 있습니다!](/learn/referencing-values-with-refs)) 모든 리스트 아이템에 있는 `ref` 콜백은 Map 변경을 처리합니다. | |
| 이 예시에서 `itemsRef`는 하나의 DOM 노드를 가지고 있지 않습니다. 대신에 식별자와 DOM 노드 키맵으로 연결된 [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map)을 가지고 있습니다. ([Ref는 아무 값이나 가질 수 있습니다!](/learn/referencing-values-with-refs)) 모든 리스트 아이템에 있는 `ref` 콜백은 Map 변경을 처리합니다. |
중간의 키맵은 원문에서는 보이지 않는 것 같습니다.
There was a problem hiding this comment.
"식별자로 DOM 노드를 접근할 수 있는 [Map]" 이라고 번역하는게 맞을까요?
|
|
||
| Now clicking the button to focus the input works: | ||
| 이제 버튼을 클릭하면 입력요소로 포커스가 잘 이동합니다. |
There was a problem hiding this comment.
Suggested change
| 이제 버튼을 클릭하면 입력요소로 포커스가 잘 이동합니다. | |
| 이제 버튼을 클릭하면 input 요소로 포커스가 잘 이동합니다. |
button은 버튼으로 번역하는데 input은 번역하는게 맞는지 잘 모르겠네요..
There was a problem hiding this comment.
버튼은 한글로 번역할 때 많이 와닿는 느낌인데 입력이라고 하면 안와닿고 텍스트박스라고 하면 더 모를 것 같아서... 좋은 방법이 있으면 좋겠네요. 다른 분들 번역한 내용을 참고해봐야겠습니다.
Co-authored-by: Minsu Kim <alstn2468_@naver.com>
hg-pyun
approved these changes
Dec 22, 2021
gnujoow
approved these changes
Dec 27, 2021
|
|
||
| ```js | ||
| import { useRef } from 'react'; | ||
| ``` | ||
|
|
||
| Then, use it to declare a ref inside your component: | ||
| 컴포넌트 안에서 ref를 선언하기 위해 방금 가져온 Hook을 사용합니다. |
There was a problem hiding this comment.
👍 대명사를 그대로 가져오는것 보다 번역 해주신것처럼 풀어서 쓰신것이 더 이해하기 좋은것 같습니다.
gnujoow
added
ready to merge
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Progress