From 6fb87c5cf8135c9f7654e11ae344a0d79bae4f1e Mon Sep 17 00:00:00 2001 From: Yoon-Hae-Min Date: Wed, 3 May 2023 22:56:05 +0900 Subject: [PATCH 1/3] docs: translate isValidElement --- src/content/reference/react/isValidElement.md | 79 +++++++++---------- 1 file changed, 39 insertions(+), 40 deletions(-) diff --git a/src/content/reference/react/isValidElement.md b/src/content/reference/react/isValidElement.md index bc4fbaef4..61f710b2e 100644 --- a/src/content/reference/react/isValidElement.md +++ b/src/content/reference/react/isValidElement.md @@ -4,7 +4,7 @@ title: isValidElement -`isValidElement` checks whether a value is a React element. +`isValidElement`는 값이 리액트 엘리먼트인지 확인합니다. ```js const isElement = isValidElement(value) @@ -16,72 +16,72 @@ const isElement = isValidElement(value) --- -## Reference {/*reference*/} +## 레퍼런스 {/*reference*/} ### `isValidElement(value)` {/*isvalidelement*/} -Call `isValidElement(value)` to check whether `value` is a React element. +`isValidElement(value)`를 호출하여 `value`가 리액트 엘리먼트인지 확인합니다. ```js import { isValidElement, createElement } from 'react'; -// ✅ React elements +// ✅ 리액트 엘리먼트 console.log(isValidElement(

)); // true console.log(isValidElement(createElement('p'))); // true -// ❌ Not React elements +// ❌ 리액트 엘리먼트가 아님 console.log(isValidElement(25)); // false console.log(isValidElement('Hello')); // false console.log(isValidElement({ age: 42 })); // false ``` -[See more examples below.](#usage) +[아래에서 더 많은 예시를 확인하세요](#usage) -#### Parameters {/*parameters*/} +#### 파라미터 {/*parameters*/} -* `value`: The `value` you want to check. It can be any a value of any type. +`value`: 확인하려는 `value`입니다. 모든 종류의 값이 될 수 있습니다. -#### Returns {/*returns*/} +#### 반환 {/*returns*/} -`isValidElement` returns `true` if the `value` is a React element. Otherwise, it returns `false`. +`isValidElement`는 `value`가 리액트 엘리먼트인 경우 `true`를 반환합니다. 그렇지 않으면 `false`를 반환합니다. -#### Caveats {/*caveats*/} +#### 주의사항 {/*caveats*/} -* **Only [JSX tags](/learn/writing-markup-with-jsx) and objects returned by [`createElement`](/reference/react/createElement) are considered to be React elements.** For example, even though a number like `42` is a valid React *node* (and can be returned from a component), it is not a valid React element. Arrays and portals created with [`createPortal`](/reference/react-dom/createPortal) are also *not* considered to be React elements. +* **[`createElement`](/reference/react/createElement)가 반환한 [JSX 태그](/learn/writing-markup-with-jsx)와 객체는 리액트 엘리먼트로 간주합니다.** 예를 들어, `42`와 같은 숫자는 유효한 리액트 *노드* (컴포넌트에서 반환될 수 있지만)이지만, 유효한 리액트 엘리먼트는 아닙니다. [`createPortal`](/reference/react-dom/createPortal)로 만들어진 배열과 portal도 리액트 엘리먼트로 간주하지 *않습니다*. --- -## Usage {/*usage*/} +## 사용법 {/*usage*/} -### Checking if something is a React element {/*checking-if-something-is-a-react-element*/} +### 어떤 것이 리액트 엘리먼트인지 확인하기 {/*checking-if-something-is-a-react-element*/} -Call `isValidElement` to check if some value is a *React element.* +어떤 값이 리액트 엘리먼트인지 확인하려면 `isValidElement`를 호출해 보세요. -React elements are: +리액트 엘리먼트는 다음과 같습니다. -- Values produced by writing a [JSX tag](/learn/writing-markup-with-jsx) -- Values produced by calling [`createElement`](/reference/react/createElement) +- [JSX tag](/learn/writing-markup-with-jsx)를 작성하여 생성된 값 +- [`createElement`](/reference/react/createElement)를 호출하여 생성된 값 -For React elements, `isValidElement` returns `true`: +리액트 엘리먼트의 경우 `isValidElement`는 `true`를 반환합니다. ```js import { isValidElement, createElement } from 'react'; -// ✅ JSX tags are React elements +// ✅ JSX 태그는 리액트 엘리먼트입니다. console.log(isValidElement(

)); // true console.log(isValidElement()); // true -// ✅ Values returned by createElement are React elements +// ✅ createElement가 반환하는 값은 리액트 엘리먼트입니다. console.log(isValidElement(createElement('p'))); // true console.log(isValidElement(createElement(MyComponent))); // true ``` -Any other values, such as strings, numbers, or arbitrary objects and arrays, are not React elements. +문자열, 숫자, 임의의 객체 및 배열과 같은 값들은 리액트 엘리먼트가 아닙니다. -For them, `isValidElement` returns `false`: +이 경우 `isValidElement`는 `false`를 반환합니다. ```js -// ❌ These are *not* React elements +// ❌ 이것들은 리액트 엘리먼트가 *아닙니다*. console.log(isValidElement(null)); // false console.log(isValidElement(25)); // false console.log(isValidElement('Hello')); // false @@ -90,39 +90,38 @@ console.log(isValidElement([

,
])); // false console.log(isValidElement(MyComponent)); // false ``` -It is very uncommon to need `isValidElement`. It's mostly useful if you're calling another API that *only* accepts elements (like [`cloneElement`](/reference/react/cloneElement) does) and you want to avoid an error when your argument is not a React element. +`isValidElement`가 필요한 경우는 매우 드뭅니다. 주로 "엘리먼트만" 허용하는 다른 API를 호출할 때와 ([`cloneElement`](/reference/react/cloneElement)가 하는 것처럼) 인수가 리액트 엘리먼트가 아닌 경우 오류를 피하고 싶을 때 유용합니다. -Unless you have some very specific reason to add an `isValidElement` check, you probably don't need it. +`isValidElement`확인을 추가 해야 하는 구체적인 이유가 없는 한 이 확인은 필요하지 않을 수 있습니다. -#### React elements vs React nodes {/*react-elements-vs-react-nodes*/} +#### 리액트 엘리먼트 vs 리액트 노드 {/*react-elements-vs-react-nodes*/} -When you write a component, you can return any kind of *React node* from it: +컴포넌트를 작성할 때 모든 종류의 *리액트 노드*를 반환할 수 있습니다. ```js function MyComponent() { - // ... you can return any React node ... + // ... 리액트 노드를 반환할수 있습니다. ... } ``` -A React node can be: +리액트 노드는 다음과 같습니다. +- `
` 또는 `createElement('div')`와 같이 생성된 리액트 엘리먼트입니다. +- [`createPortal`](/reference/react-dom/createPortal)로 생성된 portal입니다. +- 문자열 +- 숫자 +- `true`, `false`, `null`, 또는 `undefined` (표시되지 않는 경우) +- 다른 리액트 노드의 배열 -- A React element created like `
` or `createElement('div')` -- A portal created with [`createPortal`](/reference/react-dom/createPortal) -- A string -- A number -- `true`, `false`, `null`, or `undefined` (which are not displayed) -- An array of other React nodes - -**Note `isValidElement` checks whether the argument is a *React element,* not whether it's a React node.** For example, `42` is not a valid React element. However, it is a perfectly valid React node: +**주의 `isValidElement`는 인수가 리액트 노드의 여부가 아니라 *리액트 엘리먼트*의 여부를 확인합니다.** 예를 들어 `42`는 유효한 리액트 엘리먼트가 아닙니다. 하지만 완벽하게 유효한 리액트 노드입니다. ```js function MyComponent() { - return 42; // It's ok to return a number from component + return 42; // 컴포넌트에서 숫자를 반환해도 괜찮습니다. } ``` -This is why you shouldn't use `isValidElement` as a way to check whether something can be rendered. +이것이 무언가를 렌더링할 수 있는지 확인하는 여부로 `isValidElement`를 사용해서는 안 되는 이유입니다. From c04f3b756edff23ad5813141647b4e8c2a9681ef Mon Sep 17 00:00:00 2001 From: Yoon-Hae-Min Date: Tue, 9 May 2023 11:17:31 +0900 Subject: [PATCH 2/3] =?UTF-8?q?docs:=20=EB=A6=AC=EC=95=A1=ED=8A=B8=20?= =?UTF-8?q?=EB=AC=B8=EA=B5=AC=EB=A5=BC=20React=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/isValidElement.md | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/content/reference/react/isValidElement.md b/src/content/reference/react/isValidElement.md index 61f710b2e..629e650b9 100644 --- a/src/content/reference/react/isValidElement.md +++ b/src/content/reference/react/isValidElement.md @@ -4,7 +4,7 @@ title: isValidElement -`isValidElement`는 값이 리액트 엘리먼트인지 확인합니다. +`isValidElement`는 값이 React 엘리먼트인지 확인합니다. ```js const isElement = isValidElement(value) @@ -20,16 +20,16 @@ const isElement = isValidElement(value) ### `isValidElement(value)` {/*isvalidelement*/} -`isValidElement(value)`를 호출하여 `value`가 리액트 엘리먼트인지 확인합니다. +`isValidElement(value)`를 호출하여 `value`가 React 엘리먼트인지 확인합니다. ```js import { isValidElement, createElement } from 'react'; -// ✅ 리액트 엘리먼트 +// ✅ React 엘리먼트 console.log(isValidElement(

)); // true console.log(isValidElement(createElement('p'))); // true -// ❌ 리액트 엘리먼트가 아님 +// ❌ React 엘리먼트가 아님 console.log(isValidElement(25)); // false console.log(isValidElement('Hello')); // false console.log(isValidElement({ age: 42 })); // false @@ -43,45 +43,45 @@ console.log(isValidElement({ age: 42 })); // false #### 반환 {/*returns*/} -`isValidElement`는 `value`가 리액트 엘리먼트인 경우 `true`를 반환합니다. 그렇지 않으면 `false`를 반환합니다. +`isValidElement`는 `value`가 React 엘리먼트인 경우 `true`를 반환합니다. 그렇지 않으면 `false`를 반환합니다. #### 주의사항 {/*caveats*/} -* **[`createElement`](/reference/react/createElement)가 반환한 [JSX 태그](/learn/writing-markup-with-jsx)와 객체는 리액트 엘리먼트로 간주합니다.** 예를 들어, `42`와 같은 숫자는 유효한 리액트 *노드* (컴포넌트에서 반환될 수 있지만)이지만, 유효한 리액트 엘리먼트는 아닙니다. [`createPortal`](/reference/react-dom/createPortal)로 만들어진 배열과 portal도 리액트 엘리먼트로 간주하지 *않습니다*. +* **[`createElement`](/reference/react/createElement)가 반환한 [JSX 태그](/learn/writing-markup-with-jsx)와 객체는 React 엘리먼트로 간주합니다.** 예를 들어, `42`와 같은 숫자는 유효한 React *노드* (컴포넌트에서 반환될 수 있지만)이지만, 유효한 React 엘리먼트는 아닙니다. [`createPortal`](/reference/react-dom/createPortal)로 만들어진 배열과 portal도 React 엘리먼트로 간주하지 *않습니다*. --- ## 사용법 {/*usage*/} -### 어떤 것이 리액트 엘리먼트인지 확인하기 {/*checking-if-something-is-a-react-element*/} +### 어떤 것이 React 엘리먼트인지 확인하기 {/*checking-if-something-is-a-react-element*/} -어떤 값이 리액트 엘리먼트인지 확인하려면 `isValidElement`를 호출해 보세요. +어떤 값이 React 엘리먼트인지 확인하려면 `isValidElement`를 호출해 보세요. -리액트 엘리먼트는 다음과 같습니다. +React 엘리먼트는 다음과 같습니다. - [JSX tag](/learn/writing-markup-with-jsx)를 작성하여 생성된 값 - [`createElement`](/reference/react/createElement)를 호출하여 생성된 값 -리액트 엘리먼트의 경우 `isValidElement`는 `true`를 반환합니다. +React 엘리먼트의 경우 `isValidElement`는 `true`를 반환합니다. ```js import { isValidElement, createElement } from 'react'; -// ✅ JSX 태그는 리액트 엘리먼트입니다. +// ✅ JSX 태그는 React 엘리먼트입니다. console.log(isValidElement(

)); // true console.log(isValidElement()); // true -// ✅ createElement가 반환하는 값은 리액트 엘리먼트입니다. +// ✅ createElement가 반환하는 값은 React 엘리먼트입니다. console.log(isValidElement(createElement('p'))); // true console.log(isValidElement(createElement(MyComponent))); // true ``` -문자열, 숫자, 임의의 객체 및 배열과 같은 값들은 리액트 엘리먼트가 아닙니다. +문자열, 숫자, 임의의 객체 및 배열과 같은 값들은 React 엘리먼트가 아닙니다. 이 경우 `isValidElement`는 `false`를 반환합니다. ```js -// ❌ 이것들은 리액트 엘리먼트가 *아닙니다*. +// ❌ 이것들은 React 엘리먼트가 *아닙니다*. console.log(isValidElement(null)); // false console.log(isValidElement(25)); // false console.log(isValidElement('Hello')); // false @@ -90,31 +90,31 @@ console.log(isValidElement([

,
])); // false console.log(isValidElement(MyComponent)); // false ``` -`isValidElement`가 필요한 경우는 매우 드뭅니다. 주로 "엘리먼트만" 허용하는 다른 API를 호출할 때와 ([`cloneElement`](/reference/react/cloneElement)가 하는 것처럼) 인수가 리액트 엘리먼트가 아닌 경우 오류를 피하고 싶을 때 유용합니다. +`isValidElement`가 필요한 경우는 매우 드뭅니다. 주로 "엘리먼트만" 허용하는 다른 API를 호출할 때와 ([`cloneElement`](/reference/react/cloneElement)가 하는 것처럼) 인수가 React 엘리먼트가 아닌 경우 오류를 피하고 싶을 때 유용합니다. `isValidElement`확인을 추가 해야 하는 구체적인 이유가 없는 한 이 확인은 필요하지 않을 수 있습니다. -#### 리액트 엘리먼트 vs 리액트 노드 {/*react-elements-vs-react-nodes*/} +#### React 엘리먼트 vs React 노드 {/*react-elements-vs-react-nodes*/} -컴포넌트를 작성할 때 모든 종류의 *리액트 노드*를 반환할 수 있습니다. +컴포넌트를 작성할 때 모든 종류의 *React 노드*를 반환할 수 있습니다. ```js function MyComponent() { - // ... 리액트 노드를 반환할수 있습니다. ... + // ... React 노드를 반환할수 있습니다. ... } ``` -리액트 노드는 다음과 같습니다. -- `
` 또는 `createElement('div')`와 같이 생성된 리액트 엘리먼트입니다. +React 노드는 다음과 같습니다. +- `
` 또는 `createElement('div')`와 같이 생성된 React 엘리먼트입니다. - [`createPortal`](/reference/react-dom/createPortal)로 생성된 portal입니다. - 문자열 - 숫자 - `true`, `false`, `null`, 또는 `undefined` (표시되지 않는 경우) -- 다른 리액트 노드의 배열 +- 다른 React 노드의 배열 -**주의 `isValidElement`는 인수가 리액트 노드의 여부가 아니라 *리액트 엘리먼트*의 여부를 확인합니다.** 예를 들어 `42`는 유효한 리액트 엘리먼트가 아닙니다. 하지만 완벽하게 유효한 리액트 노드입니다. +**주의 `isValidElement`는 인수가 React 노드의 여부가 아니라 *React 엘리먼트*의 여부를 확인합니다.** 예를 들어 `42`는 유효한 React 엘리먼트가 아닙니다. 하지만 완벽하게 유효한 React 노드입니다. ```js function MyComponent() { From dccce85280b1008c53808b48526c97f2582e49f9 Mon Sep 17 00:00:00 2001 From: Yoon-Hae-Min Date: Wed, 10 May 2023 11:39:40 +0900 Subject: [PATCH 3/3] =?UTF-8?q?docs:=20parameter=EB=A5=BC=20=EB=A7=A4?= =?UTF-8?q?=EA=B0=9C=EB=B3=80=EC=88=98=EB=A1=9C=20=EB=B2=88=EC=97=AD=20#61?= =?UTF-8?q?4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/isValidElement.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/isValidElement.md b/src/content/reference/react/isValidElement.md index 629e650b9..357c86321 100644 --- a/src/content/reference/react/isValidElement.md +++ b/src/content/reference/react/isValidElement.md @@ -37,7 +37,7 @@ console.log(isValidElement({ age: 42 })); // false [아래에서 더 많은 예시를 확인하세요](#usage) -#### 파라미터 {/*parameters*/} +#### 매개변수 {/*parameters*/} `value`: 확인하려는 `value`입니다. 모든 종류의 값이 될 수 있습니다.