[PropTypes] 리액트에서 타입 검사를 해보자!

타입스크립트를 배우기 전에는 타입 명시에 대해서 크게 신경쓰지 않았다. 

물론 타입 명시는 프로젝트를 만들 때 매우 중요했지만 나 혼자 작은 프로젝트를 만들었기 때문에 초기에는 타입을 명시해주지 않았다. 

그리고 타입을 신경써서 만들어봐야 겠다고 생각한 뒤로는 외부 라이브러리를 사용하지 않고 약간의 꼼수를 사용해서 타입을 명시해주었다. 

const obj = Object.freeze ({
  coffeBeans : 24,
  coffeShots : 2,
});

이렇게 Object.freeze를 사용하여 객체를 동결한 뒤 동결된 객체는 더이상 변경될 수 없다는 점을 이용해 불변성을 유지해주었다. 

하지만 이렇게 하는 것도 한계가 있다는 것을 알고있었다.

그러다 React의 공식 문서중 PropTypes에 대하여 읽게 되었고 이를 사용해보고자 시도하였다.

PropTypes란?

특정 애플리케이션에서는 전체 애플리케이션의 타입 검사를 위해 Flow 또는 TypeScript와 같은 JavaScript 도구를 사용할 수 있다.
이러한 것들을 사용하지 않더라도 React는 내장된 타입 검사 기능들을 가지고 있다. 
컴포넌트의 props에 타입 검사를 하려면 다음과 같이 특별한 propTypes를 선언할 수 있다. 

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};​

출처: React 공식 문서

이처럼 PropTypes가 다양한 타입을 지원을 한다. 

그중에서도 내가 사용해본 것들에 대해서 적어보고자 한다. 

MyComponent.propTypes = {
  // 타입 명시 방법
  // 변수 명:PropTypes.타입
  children:PropTypes.node.isRequired, 
  id:PropTypes.string.isRequired,
  info:PropTypes.shape({
    name:PropTypes.string,
    age:PropTypes.number,
    images:PropTypes.arrayOf(PropTypes.object)
  }).isRequired
}

공식문서와 몇몇 사이트를 참고해 공부를 하다 나는 .isRequired와 shape라는 것을 알게되었다. 

먼저 isRequired는 나의 실수로 인해 찾아보게 되었다. 

코드를 작성하다 prop로 받은 변수에서 아래와 같은 경고가 발생하였다. 

'변수명' missing in props validation

구글링 결과 위의 경고는 isRequired를 사용했을 때 부모 컴포넌트로부터 받지 않은 prop을 하위 컴포넌트에서 사용했을 경우 경고가 발생하게 된다는 것을 알고 변수명을 잘못 받아왔다고 생각한 뒤 오타를 찾는 것에 열중하였더니 진짜 나의 오타로 인해 위의 경고가 발생한 것이였다.

그 뒤 오브젝트의 타입을 명시해줄 때 오브젝트 속 데이터의 값은 어떻게 명시해줄수 있을까 라는 의문점이 들어 이를 찾아보게 되었다. 

그래서 나온 것이 shape이다. 

shpae는 오브젝트의 타입을 명시할 때 더욱 구체적으로 타입을 명시해줄 수 있는 역할을 해준다.

 

후기

타입을 계속 붙이면서 프로젝트를 하다보니 타입을 안붙이는 것이 더욱 어색해졌다. 

물론 타입을 명확하게 명시해줘야 하기 때문에 가끔식 이게 어떤 타입이지? 또는 이걸 어떻게 명시해줘야 하지? 와 같은 고민을 계속 하게 되지만 이렇게 고민하게 됨으로 써 변수 또는 함수가  해당 컴포넌트에서 어떤 역할을 하는지를 계속 되내이면서 코드를 작성하기 때문에 확실히 실수가 더 줄어드는 효과가 있었다.