PropTypes element vs elementType

■ 리액트에 PropTypes가 존재하는 이유

얼마전까지만 해도 타입스크립트가 있는데,

왜 굳이 PropTypes를 또 써줘야하는지 이유를 알지 못했다.

하지만 둘 사이에는 명백한 차이점이 존재한다.

사실, '타입을 체크해준다'라는 기능만 동일하고 아예 다르다.

 

타입스크립트는 컴파일 타임에 정적으로 타입을 검사하기 때문에,

코드 작성 시에 발생하는 타입 에러를 잡아주는 반면

PropTypes는 동적으로 타입을 검사해주기 때문에 사용자의 동적인 입력에 따른 타입 체크가 가능하다.

외부 API로부터 데이터를 받아오거나 할 때 발생하는 타입 에러같은 것들을 체크할 수도 있다.

즉, 런타임에서 발생하는 타입 에러를 체크할 수 있다는 것.

 

타입스크립트에 PropTypes를 자동으로 지정해주는 기능도 있다고 함.

 

■ element vs elementType

PropTypes로 체크할 수 있는 타입 종류중에 element도 있고, elementType도 있다.

둘 다 컴포넌트를 받을 때 사용하는 기능같은데, 무슨 차이점이 있는걸까.

 

element는 아래와 같이, 말 그대로 props로 element 그 자체가 전달될 때를 의미한다.

즉, 컴포넌트를 상위에서 미리 만들어서 그 컴포넌트 자체를 props로 집어넣을 때

이 'element' 라는 타입을 사용해주면 된다.

// 선언부
const Header = ({ logo }) => {
  return (
    <Styled.Header>
      {logo}
    </Styled.Header>
  );
};

Header.propTypes = {
  logo: PropTypes.element,
};

export default Header;

// 사용부(props 주입)
import ShoppingCart from '../ShoppingCart.js';
<Header logo={<ShoppingCart />} />

반면, elementType은 props로 컴포넌트의 이름만 집어넣을 때 사용한다.

그리고 사용할 때 해당 props의 이름으로 컴포넌트를 생성해서 사용해주면 된다.

참고로, 이 때는 elementType을 넘겨받는 props의 이름도 컴포넌트의 이름처럼 대문자로 시작해야 한다.

// 선언부
const Header = ({ Logo }) => {
  return (
    <Styled.Header>
      <Logo />
    </Styled.Header>
  );
};

Header.propTypes = {
  logo: PropTypes.elementType,
};

export default Header;

// 사용부(props 주입)
import ShoppingCart from '../ShoppingCart.js';
<Header Logo={ShoppingCart} />

 

■ 그 밖의 타입들

- PropTypes.node

렌더링이 가능한 모든 것들을 의미한다.

숫자(number), 문자열(string), 엘리먼트(element) 또는 이들을 포함하고 있는 배열(array)/Fragment

 

- PropTypes.instanceOf(ClassName)

자바스크립트에서 instanceof 연산자로 정의할 수 있는, 특정 클래스의 인스턴스(instance)

 

- PropTypes.oneOf([value1, value2, ...])

배열에 포함된 여러 값들 중 하나.

 

- PropTypes.oneOfType([PropTypes1, PropTypes2, ...])

배열에 포함된 여러 타입(PropTypes로 정의)들 중 하나.

 

- PropTypes.arrayOf(PropTypes)

특정 타입(PropTypes로 정의)의 값들로 이루어진 배열.

 

- PropTypes.objectOf(PropTypes)

특정 타입의 값들로 이루어진 객체.

 

- PropTypes.shape({ key: PropTypes })

특정 형태를 가지는 객체의 모양을 명시하면 된다.

여기서 '가진다'라는 의미는, 정확히 일치하지 않더라도 해당 스키마들을 포함하고 있으면 된다.

 

- PropTypes.exact({ key: PropTypes })

정확하게 해당 스키마들만 가지는 객체여야 한다.

즉, 명시한 모양과 정확히 일치하는 객체만 받을 수 있다.

 

 

 

참고

PropTypes와 함께 하는 타입 확인 – React