[ React ] React.isValidElement(), React.Children.map()

Tabs 컴포넌트를 만들며 적용한 React  API 두가지
개념 정리

 

• React.isValidElement( ) 란?
  
  
• React.Children.map( ) 란?
  
  
• 사용한 이유 및 사용 방법
  
  

 

 

 

 

 

React.isValidElement( ) 란?

 

앨리먼트를 인자로 받아 대상 객체가 React 앨리먼트인지를 검증한 후 Boolean 값으로 true 또는 false를 반환 해 준다.

즉, 리액트 앨리먼트를 검증하고 확인하기 위해 사용하는 React API 이다.

 

React.Children.map( ) 란?

 

javascript의 map( ) 과 유사하지만 다른점은 map( )의 경우 첫번째인자로 callback 함수를 받고,
React.Children.map( )의 경우 첫번째 인자로 children 두번째 인자로 callback함수를 받는다는 것이다.

 

사용한 이유 및 사용 방법

 

활성화 된 탭이 어떤것이지 알기위해서는 각 Tab 앨리먼트들의 인덱스값을 알아내야 했으므로 React.Children.map()을 통해 각 앨리먼트에 index를 props로 주입 해 주었고 리액트 앨리먼트에만 props를 넘겨줄 수 있기 때문에 (string 이나 number의 경우 props를 넘겨줄수 없다.) React.isValidElement()를 통해 대상 객체가 리액트 앨리먼트인지 검증할 수 있도록 구현 하였다.

TabPanels.tsx

const TabPanels = ({ children }: TapPanelsprops) => {
  return (
    <div>
      {React.Children.map(children, (child, index) => {
        if (React.isValidElement(child)) {
          return React.cloneElement(
            child as React.ReactElement<TapPanelProps>,
            {
              ...child.props,
              index,
            },
          );
        }
        return null;
      })}
    </div>
  );
};

export default TabPanels;

 

---

참조: https://ko.reactjs.org/docs/react-api.html#reactchildrenmap