Skip to content

Commit 22b98c7

Browse files
Yoon-Hae-Mineomttt
andauthored
Translate: isValidElement (#616)
* docs: translate isValidElement * docs: 리액트 문구를 React로 수정 * docs: parameter를 매개변수로 번역 #614 --------- Co-authored-by: Hyuntae EOM <[email protected]>
1 parent 9acdcf5 commit 22b98c7

File tree

1 file changed

+39
-40
lines changed

1 file changed

+39
-40
lines changed

src/content/reference/react/isValidElement.md

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: isValidElement
44

55
<Intro>
66

7-
`isValidElement` checks whether a value is a React element.
7+
`isValidElement`는 값이 React 엘리먼트인지 확인합니다.
88

99
```js
1010
const isElement = isValidElement(value)
@@ -16,72 +16,72 @@ const isElement = isValidElement(value)
1616

1717
---
1818

19-
## Reference {/*reference*/}
19+
## 레퍼런스 {/*reference*/}
2020

2121
### `isValidElement(value)` {/*isvalidelement*/}
2222

23-
Call `isValidElement(value)` to check whether `value` is a React element.
23+
`isValidElement(value)`를 호출하여 `value`React 엘리먼트인지 확인합니다.
2424

2525
```js
2626
import { isValidElement, createElement } from 'react';
2727

28-
// ✅ React elements
28+
// ✅ React 엘리먼트
2929
console.log(isValidElement(<p />)); // true
3030
console.log(isValidElement(createElement('p'))); // true
3131

32-
//Not React elements
32+
// ❌ React 엘리먼트가 아님
3333
console.log(isValidElement(25)); // false
3434
console.log(isValidElement('Hello')); // false
3535
console.log(isValidElement({ age: 42 })); // false
3636
```
3737

38-
[See more examples below.](#usage)
38+
[아래에서 더 많은 예시를 확인하세요](#usage)
3939

40-
#### Parameters {/*parameters*/}
40+
#### 매개변수 {/*parameters*/}
4141

42-
* `value`: The `value` you want to check. It can be any a value of any type.
42+
`value`: 확인하려는 `value`입니다. 모든 종류의 값이 될 수 있습니다.
4343

44-
#### Returns {/*returns*/}
44+
#### 반환 {/*returns*/}
4545

46-
`isValidElement` returns `true` if the `value` is a React element. Otherwise, it returns `false`.
46+
`isValidElement``value`가 React 엘리먼트인 경우 `true`를 반환합니다. 그렇지 않으면 `false`를 반환합니다.
4747

48-
#### Caveats {/*caveats*/}
48+
#### 주의사항 {/*caveats*/}
4949

50-
* **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.
50+
* **[`createElement`](/reference/react/createElement)가 반환한 [JSX 태그](/learn/writing-markup-with-jsx)와 객체는 React 엘리먼트로 간주합니다.** 예를 들어, `42`와 같은 숫자는 유효한 React *노드* (컴포넌트에서 반환될 수 있지만)이지만, 유효한 React 엘리먼트는 아닙니다. [`createPortal`](/reference/react-dom/createPortal)로 만들어진 배열과 portal도 React 엘리먼트로 간주하지 *않습니다*.
5151

5252
---
5353

54-
## Usage {/*usage*/}
54+
## 사용법 {/*usage*/}
5555

56-
### Checking if something is a React element {/*checking-if-something-is-a-react-element*/}
56+
### 어떤 것이 React 엘리먼트인지 확인하기 {/*checking-if-something-is-a-react-element*/}
5757

58-
Call `isValidElement` to check if some value is a *React element.*
58+
어떤 값이 React 엘리먼트인지 확인하려면 `isValidElement`를 호출해 보세요.
5959

60-
React elements are:
60+
React 엘리먼트는 다음과 같습니다.
6161

62-
- Values produced by writing a [JSX tag](/learn/writing-markup-with-jsx)
63-
- Values produced by calling [`createElement`](/reference/react/createElement)
62+
- [JSX tag](/learn/writing-markup-with-jsx)를 작성하여 생성된 값
63+
- [`createElement`](/reference/react/createElement)를 호출하여 생성된 값
6464

65-
For React elements, `isValidElement` returns `true`:
65+
React 엘리먼트의 경우 `isValidElement``true`를 반환합니다.
6666

6767
```js
6868
import { isValidElement, createElement } from 'react';
6969

70-
// ✅ JSX tags are React elements
70+
// ✅ JSX 태그는 React 엘리먼트입니다.
7171
console.log(isValidElement(<p />)); // true
7272
console.log(isValidElement(<MyComponent />)); // true
7373

74-
//Values returned by createElement are React elements
74+
//createElement가 반환하는 값은 React 엘리먼트입니다.
7575
console.log(isValidElement(createElement('p'))); // true
7676
console.log(isValidElement(createElement(MyComponent))); // true
7777
```
7878

79-
Any other values, such as strings, numbers, or arbitrary objects and arrays, are not React elements.
79+
문자열, 숫자, 임의의 객체 및 배열과 같은 값들은 React 엘리먼트가 아닙니다.
8080

81-
For them, `isValidElement` returns `false`:
81+
이 경우 `isValidElement``false`를 반환합니다.
8282

8383
```js
84-
//These are *not* React elements
84+
//이것들은 React 엘리먼트가 *아닙니다*.
8585
console.log(isValidElement(null)); // false
8686
console.log(isValidElement(25)); // false
8787
console.log(isValidElement('Hello')); // false
@@ -90,39 +90,38 @@ console.log(isValidElement([<div />, <div />])); // false
9090
console.log(isValidElement(MyComponent)); // false
9191
```
9292

93-
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.
93+
`isValidElement`가 필요한 경우는 매우 드뭅니다. 주로 "엘리먼트만" 허용하는 다른 API를 호출할 때와 ([`cloneElement`](/reference/react/cloneElement)가 하는 것처럼) 인수가 React 엘리먼트가 아닌 경우 오류를 피하고 싶을 때 유용합니다.
9494

95-
Unless you have some very specific reason to add an `isValidElement` check, you probably don't need it.
95+
`isValidElement`확인을 추가 해야 하는 구체적인 이유가 없는 한 이 확인은 필요하지 않을 수 있습니다.
9696

9797
<DeepDive>
9898

99-
#### React elements vs React nodes {/*react-elements-vs-react-nodes*/}
99+
#### React 엘리먼트 vs React 노드 {/*react-elements-vs-react-nodes*/}
100100

101-
When you write a component, you can return any kind of *React node* from it:
101+
컴포넌트를 작성할 때 모든 종류의 *React 노드*를 반환할 수 있습니다.
102102

103103
```js
104104
function MyComponent() {
105-
// ... you can return any React node ...
105+
// ... React 노드를 반환할수 있습니다. ...
106106
}
107107
```
108108

109-
A React node can be:
109+
React 노드는 다음과 같습니다.
110+
- `<div />` 또는 `createElement('div')`와 같이 생성된 React 엘리먼트입니다.
111+
- [`createPortal`](/reference/react-dom/createPortal)로 생성된 portal입니다.
112+
- 문자열
113+
- 숫자
114+
- `true`, `false`, `null`, 또는 `undefined` (표시되지 않는 경우)
115+
- 다른 React 노드의 배열
110116

111-
- A React element created like `<div />` or `createElement('div')`
112-
- A portal created with [`createPortal`](/reference/react-dom/createPortal)
113-
- A string
114-
- A number
115-
- `true`, `false`, `null`, or `undefined` (which are not displayed)
116-
- An array of other React nodes
117-
118-
**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:
117+
**주의 `isValidElement`는 인수가 React 노드의 여부가 아니라 *React 엘리먼트*의 여부를 확인합니다.** 예를 들어 `42`는 유효한 React 엘리먼트가 아닙니다. 하지만 완벽하게 유효한 React 노드입니다.
119118

120119
```js
121120
function MyComponent() {
122-
return 42; // It's ok to return a number from component
121+
return 42; // 컴포넌트에서 숫자를 반환해도 괜찮습니다.
123122
}
124123
```
125124

126-
This is why you shouldn't use `isValidElement` as a way to check whether something can be rendered.
125+
이것이 무언가를 렌더링할 수 있는지 확인하는 여부로 `isValidElement`를 사용해서는 안 되는 이유입니다.
127126

128127
</DeepDive>

0 commit comments

Comments
 (0)