React 앱에서 제공하는 API 중 리액트 요소를 검증하는 isValidElement() API에 대하여 알아봅니다.


! React API isValidElement()
리액트 엘리먼트를 검증하고 확인하기 위해서 다음의 API를 사용할 수 있습니다.

React.isValidElement(target)


React API 중 하나인 isValidElement()는 엘리먼트를 인자로 받아 대상 객체가 React 엘리먼트인지를 검증한 후 Boolean 값으로 true 또는 false를 반환하게 됩니다.


@ 언제 isValidElement()를 사용할까요?
컴포넌트를 통하거나 API 등을 사용해 전달 받은 엘리먼트 요소가 있다고 생각해봅니다. 이 때 전달 받은 엘리먼트를 현재의 컴포넌트에 추가해야 할 경우가 있다면? 리액트 요소인지의 여부를 판단하고 append 하기 위해 isValidElement()를 사용할 수 있습니다.

결과가 true인 경우 정상적으로 사용할 수 있는 리액트 요소임을 검증할 수 있을 것입니다.


! React API isValidElement() 예제 코드 보기
간단한 예제 코드를 알아봅니다.
const AComponent = <h2>Webisfree.com</h2>;
const getTitle = () => <h2>Webisfree.com</h2>;


React.isValidElement(AComponent);
// true

React.isValidElement(getTitle);
// false

출력 결과는 각각 true, false입니다. AComponent의 경우 true이므로 현재 앱, 컴포넌트에 추가하는 등 사용할 수 있겠죠.


@ this.props.children으로 자식 요소를 전달 받는 경우
컴포넌트 사이에 엘리먼트를 전달 받는 다면? 이때 isValidElement()를 사용해 true인 경우에만 화면에 렌더링 하도록 아래와 같이 코드를 작성하는 것도 가능합니다.
<div>
  { React.isValidElement(props.children) && props.children }
</div>

만약 false 값을 반환하는 경우 렌더링 하지 않으며 에러가 발생하는 것을 미리 방지할 수도 있겠지요.


여기까지 React API 중 하나인 isValidElement()에 대하여 알아보았습니다.