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()에 대하여 알아보았습니다.