[멋쟁이 사자처럼 프론트엔드 스쿨] 63일차 TIL - 컴포넌트 속성 검사

🍰 요즘 진짜 뭘 복습하려고 해도 뭐부터 손 대야 할지도 모르겠고, 막 저번 주 수업도 이해 안 간 게 있는데 그게 쌓이고 쌓이다 보니 그냥 체념하고 새로 배우는 내용들이나 이해하기로 했다. 일단은 하자.

🍴 컴포넌트 속성 매뉴얼 검사

• 왜 필요한가? => 컴포넌트는 외부로부터 전달 받은 데이터인 속성(props)에 따라 마크업을 생성해 반환함.
• 컴포넌트 제작자는 정확히 요구되는 마크업을 생성하기 위해 속성 타입을 지정해야 함.
• 리액트 컴포넌트 제작 시 컴포넌트 속성 타입 지정하는 방법은? => propTypes 선언

지난 시간에는 주어진 데이터의 자료형을 문자열로 반환하는 함수를 작성했었다.

export function typeOf(data) {
  return Object.prototype.toString.call(data).slice(8, -1).toLowerCase();
}

그리고 저 함수를 사용해서 검사했다.

DataBinding.propTypes = {
	statusMessages(props, propName, componentName) {
    	const propValue = props[propName]; // 컴포넌트 속성 값은?
        const propType = typeOf(propValue); // 컴포넌트 속성 값의 타입은?
        const allowedType = 'array'; // 허용할 데이터 타입 이름은?
        
        if (propType !== allowedType) {
        throw new Error(
        `${componentName} 컴포넌트 ${propName} 속성 타입은 "${allowedType}" 타입이 요구되나, 실제 전달된 타입은 "${propType}"입니다.`
      );
    }
   },
};