문제 상황

props 내용에 따라 컴포넌트 안의 내용을 다르게 하기 위한 코드를 작성하고 있는데, props 부분에서 문제가 발생했다.

문제 원인

검색했을 때 제일 쉽게 나오는 해결책은 바로 ESLint를 끄는 것이었다. 이 방법은 뭔가 그냥 눈 앞의 문제를 회피하는 느낌이 들어서 제대로 해결하는 방법을 알고 싶었다.

그리고 해결 방법은 에러에 나와있듯이, props의 타입을 체크하면서 해결할 수 있었다.

문제 해결

우선 컴포넌트의 props에서 타입을 체크해줄 prop-types를 설치했다.

npm i prop-types

이 안의 propTypes를 통해 받은 데이터가 유효한 지 확인하는 데 사용할 수 있다.

import PropTypes from 'prop-types';

function InputTextArea({ placeholder }) {
  return <Input placeholder={placeholder} />;
}

InputTextArea.defaultProps = {
  placeholder: '이름을 입력하세요',
};

InputTextArea.propTypes = {
  placeholder: PropTypes.string.isRequired,
};

그리고 컴포넌트 바깥에서 props의 타입과 기본값을 설정해줬다.

참고 자료

https://reactjs-kr.firebaseapp.com/docs/typechecking-with-proptypes.html

다음에 propTypes의 유효성 검사에 대해서 더 자세히 알아봐야겠다.