TypeScript 도입 검토 - 기존 React 프로젝트 마이그레이션 고민

배경

사내 프로젝트가 점점 커지면서 PropTypes만으로는 타입 안정성을 보장하기 어려워졌다. 특히 리팩토링 시 예상치 못한 런타임 에러가 자주 발생했고, 팀 내에서 TypeScript 도입 검토가 시작되었다.

장단점 검토

장점

• IDE 자동완성 지원 강화
• 컴파일 타임에 오류 발견 가능
• 리팩토링 시 영향 범위 파악 용이

우려사항

• 러닝커브 (팀원 대부분 JS만 사용)
• 빌드 설정 복잡도 증가
• 기존 코드 마이그레이션 리소스

점진적 마이그레이션 방법

// tsconfig.json 설정으로 JS와 혼용 가능
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "jsx": "react"
  }
}

.js 파일과 .ts 파일을 섞어 사용하면서 점진적으로 전환할 수 있다는 점이 긍정적이었다.

간단한 컴포넌트 변환 테스트

interface Props {
  username: string;
  age: number;
  onUpdate: (id: number) => void;
}

const UserCard: React.SFC<Props> = ({ username, age, onUpdate }) => {
  return (
    <div>
      <h3>{username}</h3>
      <p>{age}세</p>
    </div>
  );
};

PropTypes 대비 훨씬 명확하고 IDE에서 즉시 오류를 잡아냈다.

결론

일단 신규 모듈부터 TypeScript로 작성하고, 기존 코드는 수정 시점에 점진적으로 전환하기로 했다. 2~3개월 시범 운영 후 전체 도입 여부를 재검토할 예정이다.