checkRequiredProp.md

prop 필수/옵션 설정

• 부모 컴포넌트로 부터 자식 컴포넌트로 전달된 prop가 필수인지 아닌지를 지정하고, 필수로 지정되었다면 prop으로 값이 전달되지 않았거나, 값이 전달되지 않더라도 디폴트 값이 세팅되지 않은 경우 prop에 할당되는 값이 없으므로 에러 로그를 남기도록 하는 기능이다.
• propTypes를 사용한다면 typescript를 사용하는 것이 일반적으로 추천되지만, 타입스크립트를 도입하지 않는 경우 propTypes으로 최소한의 타입 설정을 하는 방법을 사용할 수 있다.
• typescript를 사용한다고 해도 propTypes를 사용하는 경우도 있는데 propTypes는 실제 코드가 동작할 때 전달된 값이 propTypes으로 지정된 타입이 맞는지 확인할 수 있으므로 코드가 동작하기 전에 타입을 확인하는 typescript의 타입 체커가 놓친 부분을 확실하게 검증할 수 있다는 장점이 있다. 물론 대부분의 코드에 타입스크립트로 타입을 지정해 두어 다른 값이 전달될 가능성을 최대한 배제하였다면 굳이 실제 코드의 동작시점에 타입을 체크할 필요가 없을 수도 있다. 이에 대한 의견으로는 다음을 참고하자.

예제 코드

src/components/19-isRequired/Index.js

import ParentComponent from "./ParentComponent";

const Index = () => <ParentComponent />;

export default Index;

src/components/19-isRequired/ParentComponent.js

import IsRequired from './IsRequired';

const ParentComponent = () => {
  return (
    <div>
      <IsRequired favoriteNumber={20}>children</IsRequired>
    </div>
  );
};

export default ParentComponent;

src/components/19-isRequired/IsRequired.js

import PropTypes from 'prop-types';

const IsRequired = ({ name, children, favoriteNumber }) => {
  return (
    <div>
      Hi, my name is {name}.
      <br />
      children value is {children}.
      <br />
      my favorite number is {favoriteNumber}.
    </div>
  );
};

IsRequired.defaultProps = {
  name: 'default name',
};

IsRequired.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired,
};

export default IsRequired;

• 기본적으로 리액트의 컴포넌트는 defaultProps와 propTypes 속성을 가지고 있다.
• propTypes에는 리터럴 오브젝트를 할당하는데, 키 값으로 prop와 키에 대응하는 값으로 PropTypes라이브러리를 사용해 타입을 지정할 수 있다. 이 때 PropTypes 뒤에 .isRequired을 넣어주면 부모 컴포넌트로부터 자식 컴포넌트에 prop가 전달될 때 필수적으로 받아야 하는 prop를 전달하지 않으면 에러 메시지를 콘솔에 남긴다.

타입스크립트에서는 isRequired가 불필요한가?

• 기본적으로 타입스크립트로 타입을 지정할 때 undefined 타입을 지정해 주어야 값이 전달된다. 타입스크립트라면 컴포넌트의 첫 번째 파라메터에 { name: string?, children, favoriteNumber: number }에서 string?와 같이 ?를 타입에 추가를 해 줘야 값이 전달되지 않아서 디폴트 값이 undefined로 세팅되는 경우 값을 받을 수 있으며, favoriteNumber: number와 같이 수 타입만 허가하는 로직이라면 타입스크립트로 이미 isRequired의 역할을 한다고 볼 수 있다. 물론 타입스크립트는 실제 자바스크립트의 동작이 아니라 코드 간의 관계에서 전달되는 값의 타입을 추론하는 방식이기 때문에 완벽한 타입 체커가 되지 못할 수도 있으나 타입스크립트의 체크만으로도 충분할 수 있다.