isValidElement

const isElement = isValidElement(value)

• Reference참조
  • isValidElement(value)
• Usage사용법
  • Checking if something is a React elementReact 엘리먼트인지 확인하기

Reference참조

isValidElement(value)

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

import { isValidElement, createElement } from 'react';

// ✅ React elements
console.log(isValidElement(<p />)); // 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. 아래에서 더 많은 예시를 확인하세요.

Parameters매개변수

• value: The value you want to check. It can be any a value of any type. value: 확인하려는 value입니다. 모든 유형의 값이 될 수 있습니다.

Returns반환값

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

Caveats주의사항

• Only JSX tags and objects returned by 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 are also not considered to be React elements. JSX 태그 및 createElement로부터 반환된 객체만이 React 엘리먼트로 간주됩니다. 예를 들어, 42와 같은 숫자는 유효한 React 노드이지만(또한 컴포넌트로부터 반환될 수도 있지만) 유효한 React 엘리먼트는 아닙니다. createPortal로 생성된 배열과 포털 역시 React 엘리먼트로 간주되지 않습니다.

Usage사용법

Checking if something is a React elementReact 엘리먼트인지 확인하기

Call isValidElement to check if some value is a React element. 어떤 값이 React 엘리먼트인지 확인하려면 isValidElement를 호출하세요.

React elements are: React 엘리먼트는 다음과 같습니다:

• Values produced by writing a JSX tag JSX 태그로 생성한 값

• Values produced by calling createElement createElement를 호출하여 생성한 값

For React elements, isValidElement returns true: React 엘리먼트의 경우 isValidElement는 true를 반환합니다:

import { isValidElement, createElement } from 'react';

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

// ✅ Values returned by createElement are React elements
// ✅ createElement로부터 반환된 값은 React 엘리먼트입니다.
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. 다른 값들, 예컨대 문자열, 숫자, 임의의 객체나 배열 등은 React 엘리먼트가 아닙니다.

For them, isValidElement returns false: 이들에 대해 isValidElement는 false를 반환합니다:

// ❌ These are *not* React elements
console.log(isValidElement(null)); // false
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false
console.log(isValidElement([<div />, <div />])); // 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 does) and you want to avoid an error when your argument is not a React element. isValidElement가 필요한 경우는 매우 드뭅니다. 주로 오직 (cloneElement가 그런 것처럼) 엘리먼트만 허용하는 별도의 API에, React 엘리먼트가 아닌 다른 인수로 호출하면 발생하는 오류를 피하고자 할 때 유용합니다.

Unless you have some very specific reason to add an isValidElement check, you probably don’t need it. isValidElement 확인을 추가해야 할 특별한 이유가 없는 한, 이는 필요하지 않을 것입니다.

function MyComponent() {
  // ... you can return any React node ...
}

function MyComponent() {
  return 42; // It's ok to return a number from component
}