Translate: Common components (e.g. <div>) #648

xilucks · 2023-05-16T07:57:33Z

Progress

번역 초안 작성 (Draft translation)
공통 스타일 가이드 확인 (Check the common style guide)
모범사례 확인 (Check best practices)
용어 확인 (Check the term)
맞춤법 검사 (Spelling check)
리뷰 반영 (Resolve reviews)

…uments

github-actions · 2023-05-19T04:31:18Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

eomttt

아주 길었는데 수고하셨습니다

eomttt · 2023-05-20T06:45:06Z

src/content/reference/react-dom/components/common.md

-
-* [`onCancel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event): An [`Event` handler](#event-handler) function. Fires when the user tries to dismiss the dialog.
-* `onCancelCapture`: A version of `onCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+내장된 모든 컴포넌트에 대해 다음과 같은 특별한 React props가 지원됩니다.


Suggested change

내장된 모든 컴포넌트에 대해 다음과 같은 특별한 React props가 지원됩니다.

내장된 모든 컴포넌트에 대해 다음과 같은 특별한 React props가 있습니다.

좀 더 자연스러운 문장일것 같아요

아니면 밑에 아래의 표준 DOM props는 내장된 모든 컴포넌트에 지원됩니다.
와 라임 맞추셔도 괜찮을것 같네요
아래의 특별한 React props 들은 내장된 모든 컴포넌트에서 지원합니다.

eomttt · 2023-05-20T06:46:21Z

src/content/reference/react-dom/components/common.md

-* `onCancelCapture`: A version of `onCancel` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
+내장된 모든 컴포넌트에 대해 다음과 같은 특별한 React props가 지원됩니다.
+
+* `children`: React 노드(엘리먼트, 문자열, 숫자, [portal,](/reference/react-dom/createPortal) `null`, `undefined` 그리고 불리언 타입과 같은 빈 노드, 또는 다른 React 노드의 배열) 입니다. 컴포넌트 내부의 콘텐츠를 지정합니다. JSX를 사용하면 일반적으로`<div><span /></div>`의 예시처럼 태그를 중첩하여 `children` prop를 암시적으로 지정합니다.


Suggested change

* `children`: React 노드(엘리먼트, 문자열, 숫자, [portal,](/reference/react-dom/createPortal) `null`, `undefined` 그리고 불리언 타입과 같은 빈 노드, 또는 다른 React 노드의 배열) 입니다. 컴포넌트 내부의 콘텐츠를 지정합니다. JSX를 사용하면 일반적으로`<div><span /></div>`의 예시처럼 태그를 중첩하여 `children` prop를 암시적으로 지정합니다.

* `children`: React 노드(엘리먼트, 문자열, 숫자, [portal,](/reference/react-dom/createPortal) `null`, `undefined` 그리고 불리언 타입과 같은 빈 노드, 또는 다른 React 노드의 배열) 입니다. 컴포넌트 내부의 콘텐츠를 지정합니다. JSX를 사용하면 일반적으로`<div><span /></div>`의 예시처럼 태그를 중첩하여 `children` prop를 암묵적으로 지정합니다.

좀 더 자연스러운것 같습니다

eomttt · 2023-05-20T06:47:20Z

src/content/reference/react-dom/components/common.md

+
+* `dangerouslySetInnerHTML`: 원시 HTML 문자열이 포함된`{ __html: '<p>some html</p>' }`형식의 객체입니다. DOM 노드의 [`innerHTML`](https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML) 프로퍼티를 덮어쓰고 전달된 HTML을 내부에 표시합니다. 이것은 매우 주의해서 사용해야 합니다. 내부 HTML을 신뢰할 수 없는 경우 (예시: 사용자 데이터를 기반으로 하는 경우) [XSS](https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8C%85) 취약점이 발생할 수 있습니다. [`dangerouslySetInnerHTML`에 대해 더 알아보려면 읽어보세요.](#dangerously-setting-the-inner-html)
+
+* `ref`: [`useRef`](/reference/react/useRef)나 [`createRef`](/reference/react/createRef)의 ref 객체, 또는 [`ref` 콜백 함수](#ref-callback)거나 [레거시 refs](https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs)의 문자열입니다. 해당 ref는 해당 노드의 DOM 엘리먼트로 채워집니다. [ref를 사용하여 DOM을 조작하는 방법에 대해 더 자세히 알아보세요.](#manipulating-a-dom-node-with-a-ref)


Suggested change

* `ref`: [`useRef`](/reference/react/useRef)나 [`createRef`](/reference/react/createRef)의 ref 객체, 또는 [`ref` 콜백 함수](#ref-callback)거나 [레거시 refs](https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs)의 문자열입니다. 해당 ref는 해당 노드의 DOM 엘리먼트로 채워집니다. [ref를 사용하여 DOM을 조작하는 방법에 대해 더 자세히 알아보세요.](#manipulating-a-dom-node-with-a-ref)

* `ref`: [`useRef`](/reference/react/useRef)나 [`createRef`](/reference/react/createRef)의 ref 객체, 또는 [`ref` 콜백 함수](#ref-callback)거나 [legacy refs](https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs)의 문자열입니다. 해당 ref는 해당 노드의 DOM 엘리먼트로 채워집니다. [ref를 사용하여 DOM을 조작하는 방법에 대해 더 자세히 알아보세요.](#manipulating-a-dom-node-with-a-ref)

레거시 ref 는 번역 안해도 될것 같네요

eomttt · 2023-05-20T06:50:53Z

src/content/reference/react-dom/components/common.md

+
+* `ref`: [`useRef`](/reference/react/useRef)나 [`createRef`](/reference/react/createRef)의 ref 객체, 또는 [`ref` 콜백 함수](#ref-callback)거나 [레거시 refs](https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs)의 문자열입니다. 해당 ref는 해당 노드의 DOM 엘리먼트로 채워집니다. [ref를 사용하여 DOM을 조작하는 방법에 대해 더 자세히 알아보세요.](#manipulating-a-dom-node-with-a-ref)
+
+* `suppressContentEditableWarning`: 불리언 타입입니다. `true` 일 때 `children`과 `contentEditable={true}`(이 둘은 일반적으로 함께 작동하지 않습니다.)가 모두 존재하는 엘리먼트에 대해 React에서 발생하는 경고를 억제합니다. 이는`contentEditable` 콘텐츠를 수동으로 관리하는 텍스트 입력 라이브러리를 빌드할 때 사용됩니다.


Suggested change

* `suppressContentEditableWarning`: 불리언 타입입니다. `true` 일 때 `children`과 `contentEditable={true}`(이 둘은 일반적으로 함께 작동하지 않습니다.)가 모두 존재하는 엘리먼트에 대해 React에서 발생하는 경고를 억제합니다. 이는`contentEditable` 콘텐츠를 수동으로 관리하는 텍스트 입력 라이브러리를 빌드할 때 사용됩니다.

* `suppressContentEditableWarning`: 불리언 타입입니다. `true` 일 때, 일반적으로 같이 사용하지 않는 `children`과 `contentEditable={true}`가 모두 존재하는 엘리먼트에 대해 React에서 발생하는 경고를 �나타내지 않습니다. 이는`contentEditable` 콘텐츠를 수동으로 관리하는 텍스트 입력 라이브러리를 빌드할 때 사용됩니다.

eomttt · 2023-05-20T06:56:09Z

src/content/reference/react-dom/components/common.md

+
+* `style`: `{ fontWeight: 'bold', margin: 20 }`와 같이 CSS 스타일이 있는 객체입니다. DOM의 [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) 프로퍼티에서 `fontWeight` 대신 `font-weight`로 작성하는 것과 마찬가지로 CSS 프로퍼티의 이름도 `camelCase`로 작성해야 합니다. 또한 문자열이나 숫자를 값으로 전달할 수 있습니다. `width: 100`와 같은 숫자를 전달한다면 React는 [단위가 없는 프로퍼티](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57)가 아니라면 자동으로 `px` ("픽셀")로 값을 추가합니다. `style`은 스타일 값을 미리 알 수 없는 동적 스타일에만 사용하는 것을 권장합니다. 그 외의 경우에는 `className`을 사용하여 일반 CSS 클래스를 사용하는 것이 더 효율적입니다. [`className`과 `style`에 대해서 더 자세히 알아보세요.](#applying-css-styles)
+
+아래의 표준 DOM props는 내장된 모든 컴포넌트에 지원됩니다.


Suggested change

아래의 표준 DOM props는 내장된 모든 컴포넌트에 지원됩니다.

아래의 표준 DOM props 들은 내장된 모든 컴포넌트에서 지원합니다.

eomttt · 2023-05-20T07:05:55Z

src/content/reference/react-dom/components/common.md


-Instead of a ref object (like the one returned by [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)), you may pass a function to the `ref` attribute.
+ref 객체 (예시: [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref) 에서 반환되는 객체) 대신 내부 HTML을 설정하면 `ref` 속성에 함수를 전달할 수 있습니다.


Suggested change

ref 객체 (예시: [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref) 에서 반환되는 객체) 대신 내부 HTML을 설정하면 `ref` 속성에 함수를 전달할 수 있습니다.

[`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref) 에서 반환되는 ref 객체 대신 `ref` 속성에 함수를 전달할 수 있습니다.

eomttt · 2023-05-20T07:07:50Z

src/content/reference/react-dom/components/common.md


-When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your `ref` callback with `null`.
+`<div>` DOM 노드가 화면에 추가될 때, React는 `node`를 인수로 사용하여 `ref` 콜백을 호출합니다. 해당 `<div>` DOM 노드가 제거되면 React는 `null`을 사용하여 `ref` 콜백을 호출합니다.


Suggested change

`<div>` DOM 노드가 화면에 추가될 때, React는 `node`를 인수로 사용하여 `ref` 콜백을 호출합니다. 해당 `<div>` DOM 노드가 제거되면 React는 `null`을 사용하여 `ref` 콜백을 호출합니다.

`<div>` DOM 노드가 화면에 추가될 때, React는 `node`를 인수로 사용하여 `ref` 콜백을 호출합니다. 해당 `<div>` DOM 노드가 제거되면 React는 `null`을 인수로 사용하여 `ref` 콜백을 호출합니다.

eomttt · 2023-05-20T07:15:05Z

src/content/reference/react-dom/components/common.md


-To make this more readable, you can use a tiny helper library like [`classnames`:](https://github.com/JedWatson/classnames)
+가독성을 높이고 싶다면 [`classnames`](https://github.com/JedWatson/classnames)와 같은 작은 도움을 주는 라이브러리를 사용할 수 있습니다.


Suggested change

가독성을 높이고 싶다면 [`classnames`](https://github.com/JedWatson/classnames)와 같은 작은 도움을 주는 라이브러리를 사용할 수 있습니다.

가독성을 높이고 싶다면 [`classnames`](https://github.com/JedWatson/classnames)와 같은 작은 헬퍼 라이브러리를 사용할 수 있습니다.

도움을 주는 보단 유틸성 라이브러리라는것을 의미하고 싶어하는것 같습니다

eomttt

아주 길었는데 수고하셨습니다

MaxKim-J · 2023-05-20T07:01:33Z

src/content/reference/react-dom/components/common.md

@@ -1099,9 +1099,9 @@ input { margin-left: 10px; }

 ---

-### Handling focus events {/*handling-focus-events*/}
+### 포커싱 이벤트 처리 {/*handling-focus-events*/}


"엘리먼트에 포커싱되었다" 라는 현상을 설명하는 문맥이 아니라면, 굳이 "포커싱"이라고 번역할 필요가 없어 보입니다.

- ### 포커싱 이벤트 처리 {/*handling-focus-events*/} + ### 포커스 이벤트 처리 {/*handling-focus-events*/}

MaxKim-J · 2023-05-20T07:05:00Z

src/content/reference/react-dom/components/common.md


-In React, [focus events](#focusevent-handler) bubble. You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from outside of the parent element. The example shows how to detect focusing a child, focusing the parent element, and how to detect focus entering or leaving the whole subtree.
+React에서는 [포커싱 이벤트](#focusevent-handler)가 버블링됩니다. 부모 엘리먼트의 바깥 부분에서 발생한 이벤트가 포커싱(focusing) 혹은 포커싱 해제(blurring)인지 구분하기 위해 `currentTarget`과 `relatedTarget`를 사용할 수 있습니다. 해당 예시는 자식 엘리먼트에 포커싱 될 때, 부모 엘리먼트에 포커싱 될 때, 그리고 전체 서브트리(subtree)에서 포커싱이 되거나 해제되는 것을 감지하는 방법을 보여줍니다.


focus와 blur가 고유한 이벤트 이름인만큼 번역하지 않고 표현해도 무방해보입니다.

- React에서는 [포커싱 이벤트](#focusevent-handler)가 버블링됩니다. 부모 엘리먼트의 바깥 부분에서 발생한 이벤트가 포커싱(focusing) 혹은 포커싱 해제(blurring)인지 구분하기 위해 `currentTarget`과 `relatedTarget`를 사용할 수 있습니다. + React에서는 [focus 이벤트](#focusevent-handler)가 버블링됩니다. 부모 엘리먼트의 바깥 부분에서 발생한 이벤트가 focus 혹은 blur인지 구분하기 위해 `currentTarget`과 `relatedTarget`를 사용할 수 있습니다.

MaxKim-J · 2023-05-20T07:11:57Z

src/content/reference/react-dom/components/common.md

  content: `<img src="" onerror='alert("you were hacked")'>`
 };

 export default function MarkdownPreview() {
-  // 🔴 SECURITY HOLE: passing untrusted input to dangerouslySetInnerHTML
+  // 🔴 보안 구멍: 신뢰할 수 없는 입력을 dangerouslySetInnerHTML로 전달했습니다.


직역하기보다, "취약점" 정도로 의역하면 뜻이 더 명징할 것 같습니다

- 보안 구멍: 신뢰할 수 없는 입력을 dangerouslySetInnerHTML로 전달했습니다. + 보안 취약점: 신뢰할 수 없는 입력을 dangerouslySetInnerHTML로 전달했습니다.

MaxKim-J · 2023-05-20T07:16:05Z

src/content/reference/react-dom/components/common.md


 ```js
 const markup = { __html: '<p>some raw html</p>' };
 return <div dangerouslySetInnerHTML={markup} />;
 ```

-**This is dangerous. As with the underlying DOM [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property, you must exercise extreme caution! Unless the markup is coming from a completely trusted source, it is trivial to introduce an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability this way.**
+**이것은 위험합니다. 기본 DOM의 [`innerHTML`](https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML) 프로퍼티와 마찬가지로 각별히 주의해야 합니다. 마크업이 완전히 신뢰할 수 있는 출처에서 제공되는 것이 아니라면,  [XSS](https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8C%85) 취약점을 도입하는 것은 사소한 일입니다.**


표현이 어색합니다

- 마크업이 완전히 신뢰할 수 있는 출처에서 제공되는 것이 아니라면, XSS취약점을 도입하는 것은 사소한 일입니다. + 마크업이 완전히 신뢰할 수 있는 출처에서 제공되는 것이 아니라면, XSS 취약점이 쉽게 나타날 수 있습니다.

xilucks · 2023-05-21T12:46:10Z

@eomttt @MaxKim-J
두분께 좋은 리뷰 해주셔서 감사하다는 말씀드립니다! 번역하는 과정에서 어색한 부분에 대해서 고민이 많았는데
그 부분들을 잘 짚고 넘어가주셔서 좋은 경험할 수 있었습니다 :)
말씀해 주신 점들에 대해서는 수정 및 반영 했고, 다시 한번 더 감사합니다!

hg-pyun

고생하셨습니다! 머지할께요 🙇‍♂️

xilucks added 4 commits May 16, 2023 14:34

docs(translation): Draft Translation

7b869c3

docs(translation): Modifying the link to the mdn file with Korean doc…

7486895

…uments

docs(translation): Transforming sentences naturally

c77a4b9

docs(translation): Spell check and apply

981ae7d

xilucks requested review from hg-pyun, taehwanno, simsim0709, gnujoow, b9words, taggon, MaxKim-J, eomttt and goofcode as code owners May 16, 2023 07:57

xilucks changed the title ~~docs(translation): react-dom/compoents/common~~ Translate: react-dom/compoents/common May 16, 2023

vercel bot deployed to Preview – ko-react-dev May 16, 2023 07:58 View deployment

docs(translation): Add missing parts

b4a9b28

vercel bot deployed to Preview – ko-react-dev May 16, 2023 08:01 View deployment

docs(translation): Add missing parts

99110ae

xilucks changed the title ~~Translate: react-dom/compoents/common~~ Common components (e.g. <div>) May 18, 2023

xilucks changed the title ~~Common components (e.g. <div>)~~ Translate: Common components (e.g. <div>) May 18, 2023

vercel bot deployed to Preview – ko-react-dev May 18, 2023 00:04 View deployment

Merge branch 'main' into translate/react-dom/components/common

cf629ab

vercel bot deployed to Preview – ko-react-dev May 19, 2023 04:28 View deployment

eomttt reviewed May 20, 2023

View reviewed changes

eomttt added the needs author response label May 20, 2023

MaxKim-J reviewed May 20, 2023

View reviewed changes

Merge branch 'reactjs:main' into translate/react-dom/components/common

ee5de02

vercel bot deployed to Preview – ko-react-dev May 21, 2023 12:39 View deployment

docs(translation): reslove reviews

a7bb0fd

vercel bot deployed to Preview – ko-react-dev May 21, 2023 12:41 View deployment

hg-pyun approved these changes May 23, 2023

View reviewed changes

hg-pyun merged commit c2af980 into reactjs:main May 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translate: Common components (e.g. <div>) #648

Translate: Common components (e.g. <div>) #648

xilucks commented May 16, 2023 •

edited

Loading

github-actions bot commented May 19, 2023

📦 Next.js Bundle Analysis for react-dev

eomttt left a comment

eomttt May 20, 2023

eomttt May 20, 2023

eomttt May 20, 2023

eomttt May 20, 2023

eomttt May 20, 2023

eomttt May 20, 2023

eomttt May 20, 2023

eomttt May 20, 2023

eomttt May 20, 2023

eomttt left a comment

MaxKim-J May 20, 2023

MaxKim-J May 20, 2023

MaxKim-J May 20, 2023

MaxKim-J May 20, 2023

xilucks commented May 21, 2023

hg-pyun left a comment

	내장된 모든 컴포넌트에 대해 다음과 같은 특별한 React props가 지원됩니다.
	내장된 모든 컴포넌트에 대해 다음과 같은 특별한 React props가 있습니다.


		* `dangerouslySetInnerHTML`: 원시 HTML 문자열이 포함된`{ __html: '<p>some html</p>' }`형식의 객체입니다. DOM 노드의 [`innerHTML`](https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML) 프로퍼티를 덮어쓰고 전달된 HTML을 내부에 표시합니다. 이것은 매우 주의해서 사용해야 합니다. 내부 HTML을 신뢰할 수 없는 경우 (예시: 사용자 데이터를 기반으로 하는 경우) [XSS](https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EA%B0%84_%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8C%85) 취약점이 발생할 수 있습니다. [`dangerouslySetInnerHTML`에 대해 더 알아보려면 읽어보세요.](#dangerously-setting-the-inner-html)

		* `ref`: [`useRef`](/reference/react/useRef)나 [`createRef`](/reference/react/createRef)의 ref 객체, 또는 [`ref` 콜백 함수](#ref-callback)거나 [레거시 refs](https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs)의 문자열입니다. 해당 ref는 해당 노드의 DOM 엘리먼트로 채워집니다. [ref를 사용하여 DOM을 조작하는 방법에 대해 더 자세히 알아보세요.](#manipulating-a-dom-node-with-a-ref)


		* `ref`: [`useRef`](/reference/react/useRef)나 [`createRef`](/reference/react/createRef)의 ref 객체, 또는 [`ref` 콜백 함수](#ref-callback)거나 [레거시 refs](https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs)의 문자열입니다. 해당 ref는 해당 노드의 DOM 엘리먼트로 채워집니다. [ref를 사용하여 DOM을 조작하는 방법에 대해 더 자세히 알아보세요.](#manipulating-a-dom-node-with-a-ref)

		* `suppressContentEditableWarning`: 불리언 타입입니다. `true` 일 때 `children`과 `contentEditable={true}`(이 둘은 일반적으로 함께 작동하지 않습니다.)가 모두 존재하는 엘리먼트에 대해 React에서 발생하는 경고를 억제합니다. 이는`contentEditable` 콘텐츠를 수동으로 관리하는 텍스트 입력 라이브러리를 빌드할 때 사용됩니다.


		* `style`: `{ fontWeight: 'bold', margin: 20 }`와 같이 CSS 스타일이 있는 객체입니다. DOM의 [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) 프로퍼티에서 `fontWeight` 대신 `font-weight`로 작성하는 것과 마찬가지로 CSS 프로퍼티의 이름도 `camelCase`로 작성해야 합니다. 또한 문자열이나 숫자를 값으로 전달할 수 있습니다. `width: 100`와 같은 숫자를 전달한다면 React는 [단위가 없는 프로퍼티](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57)가 아니라면 자동으로 `px` ("픽셀")로 값을 추가합니다. `style`은 스타일 값을 미리 알 수 없는 동적 스타일에만 사용하는 것을 권장합니다. 그 외의 경우에는 `className`을 사용하여 일반 CSS 클래스를 사용하는 것이 더 효율적입니다. [`className`과 `style`에 대해서 더 자세히 알아보세요.](#applying-css-styles)

		아래의 표준 DOM props는 내장된 모든 컴포넌트에 지원됩니다.

	아래의 표준 DOM props는 내장된 모든 컴포넌트에 지원됩니다.
	아래의 표준 DOM props 들은 내장된 모든 컴포넌트에서 지원합니다.


		Instead of a ref object (like the one returned by [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)), you may pass a function to the `ref` attribute.
		ref 객체 (예시: [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref) 에서 반환되는 객체) 대신 내부 HTML을 설정하면 `ref` 속성에 함수를 전달할 수 있습니다.

	ref 객체 (예시: [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref) 에서 반환되는 객체) 대신 내부 HTML을 설정하면 `ref` 속성에 함수를 전달할 수 있습니다.
	[`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref) 에서 반환되는 ref 객체 대신 `ref` 속성에 함수를 전달할 수 있습니다.


		When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your `ref` callback with `null`.
		`<div>` DOM 노드가 화면에 추가될 때, React는 `node`를 인수로 사용하여 `ref` 콜백을 호출합니다. 해당 `<div>` DOM 노드가 제거되면 React는 `null`을 사용하여 `ref` 콜백을 호출합니다.


		To make this more readable, you can use a tiny helper library like [`classnames`:](https://github.com/JedWatson/classnames)
		가독성을 높이고 싶다면 [`classnames`](https://github.com/JedWatson/classnames)와 같은 작은 도움을 주는 라이브러리를 사용할 수 있습니다.


		In React, [focus events](#focusevent-handler) bubble. You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from outside of the parent element. The example shows how to detect focusing a child, focusing the parent element, and how to detect focus entering or leaving the whole subtree.
		React에서는 [포커싱 이벤트](#focusevent-handler)가 버블링됩니다. 부모 엘리먼트의 바깥 부분에서 발생한 이벤트가 포커싱(focusing) 혹은 포커싱 해제(blurring)인지 구분하기 위해 `currentTarget`과 `relatedTarget`를 사용할 수 있습니다. 해당 예시는 자식 엘리먼트에 포커싱 될 때, 부모 엘리먼트에 포커싱 될 때, 그리고 전체 서브트리(subtree)에서 포커싱이 되거나 해제되는 것을 감지하는 방법을 보여줍니다.

Translate: Common components (e.g. <div>) #648

Translate: Common components (e.g. <div>) #648

Conversation

xilucks commented May 16, 2023 • edited Loading

Progress

github-actions bot commented May 19, 2023

Size changes

📦 Next.js Bundle Analysis for react-dev

eomttt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eomttt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xilucks commented May 21, 2023

hg-pyun left a comment

Choose a reason for hiding this comment

xilucks commented May 16, 2023 •

edited

Loading