PropTypes 작동 원리

PropTypes 작동 원리

처음 PropTypes을 공부 했을 때, 속성의 타입을 검사해주는 프로그램인 줄 알았다. import 해서 불러올 수 있다는 것은 함수가 있고, 네임스페이스 객체로 볼 수 있다는 것인데 이해가 부족했던 것 같다.

PropTypes 구문을 암기 하는 것이 아닌 한 번 원리를 이해하며 직접 속성의 타입을 검사해주는 유틸리티 함수를 만들어보자!

먼저 간단히 속성을 전달 받는 컴포넌트를 만들어보자

• App 컴포넌트에 props.x는 number를 전달 받고, props.y boolean 값을 전달 받는다.

import { StrictMode } from "react";
import ReactDOM from "react-dom";

function App(props) {
  const { x, y } = props;
  return (
    <div className="App">
      <h1>PropTypes 작동 원리 {x}</h1>
      <h2>{y ? "PropTypes는 네임스페이스 객체" : null}</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App x="10" y="true" />
  </StrictMode>,
  rootElement
);

자 이제 컴포넌드의 props 속성을 확인 하기 위해 propTypes를 선언해서 확인한다. 이 때, x(...argt)로 나머지 연산자를 사용해서 해당 속성이 받는 객체를 전부 확인해보자.

App.propTypes = {
  x(...argt) {
    console.log(argt);
  }
};

아래 이미지는 console.log(argt)의 출력 결과이다.

• 0 → props : Object

• 1 → propName: "x"

• 2 → componentName: "App"

각 0-2번은 props, propName, componentName 속성의 데이터이다. 이를 통해 알 수 있는 것은 속성에 접근하는 방법을 유추할 수 있다.

유틸리티 함수

위의 속성의 데이터 타입 데이터를 통해서 아래와 같이 속성의 데이터를 확인하는 유틸리티 함수를 만들 수 있다.

App.propTypes = {
  x(props, propName, componentName) {
    // App 컴포넌트에 전달된 속성 'x'는 'number' 타입이어야 합니다.
    const value = props[propName]; 
    const valueType = typeof value;
    if (valueType !== "number") {
      throw new Error(
        `${componentName} 컴포넌트에 전달된 속성 '${propName}'는 'number' 타입이어야 하지만, 전달 속성 타입은 '${valueType}' 입니다.`
      );
    }
  }
};

네임 스페이스 만들기

위의 유틸리티 함수에 네임 스페이스를 사용할 수 있다.

const PropTypes = {
  number(props, propName, componentName) {
    // App 컴포넌트에 전달된 속성 'x'는 'number' 타입이어야 합니다.
    const value = props[propName];
    console.log(value);
    const valueType = typeof value;
    console.log(valueType);
    if (valueType !== "number") {
      throw new Error(
        `${componentName} 컴포넌트에 전달된 속성 '${propName}'는 'number' 타입이어야 하지만, 전달 속성 타입은 '${valueType}' 입니다.`
      );
    }
  },
  bool(props, propName, componentName) {
    const value = props[propName];
    const valueType = typeof value;
    if (valueType !== "boolean") {
      throw new Error(
        `${componentName} 컴포넌트에 전달된 속성 '${propName}'는 'boolean' 타입이어야 하지만, 전달 속성 타입은 '${valueType}' 입니다.`
      );
    }
  }
};

위의 네임스페이스 객체는 아래와 같이 사용할 수 있다. 어디서 많이 본 느낌이 든다. 바로 앞서 공부한 Prop 검사 패키지인 PropTypes와 매우 유사하다.

App.propTypes = {
  x: PropTypes.number,
  y: PropTypes.bool
};

더 나아가서 생각하면 해당 PropTypes 기능을 나도 만들어서 오픈 소스로 배포할 수 있지 않을까 생각해본다.

참고