React 컴포넌트 props 타입 체크를 PropTypes에서 Flow로 전환

문제 상황

사내 어드민 대시보드 프로젝트가 50개 이상의 컴포넌트를 포함하게 되면서 PropTypes만으로는 한계가 보였다. 런타임에만 오류를 잡을 수 있고, 함수 내부 변수나 반환값은 체크할 수 없었다.

특히 API 응답 데이터를 여러 컴포넌트에서 공유하는 상황에서 실수가 잦았다.

Flow 도입 결정

TypeScript와 Flow를 비교했지만, 2017년 초 기준으로 Flow가 React 공식 문서에서도 언급되고 있고 Create React App에서도 쉽게 설정 가능해서 Flow를 선택했다.

// Before: PropTypes
import PropTypes from 'prop-types';

const UserCard = ({ user }) => (
  <div>
    <h3>{user.name}</h3>
    <p>{user.email}</p>
  </div>
);

UserCard.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
  }).isRequired,
};

// After: Flow
// @flow
type User = {
  name: string,
  email: string,
};

type Props = {
  user: User,
};

const UserCard = ({ user }: Props) => (
  <div>
    <h3>{user.name}</h3>
    <p>{user.email}</p>
  </div>
);

마이그레이션 과정

.flowconfig 파일 생성 및 flow-bin 설치
공통 타입 정의 파일 작성 (types/index.js)
API 레이어부터 점진적으로 // @flow 주석 추가
기존 PropTypes는 당분간 유지 (이중 체크)

결과

빌드 전에 VSCode에서 타입 오류를 잡을 수 있게 되었다. 특히 객체 속성명 오타나 null 체크 누락을 사전에 방지할 수 있어서 만족스럽다.

다만 써드파티 라이브러리 타입 정의가 부족한 경우가 많아 any로 우회하는 경우도 있다. 이 부분은 점진적으로 개선할 예정이다.