카테고리 없음

React + JavaScript 프로젝트를 TypeScript로 마이그레이션 하기

Ben777 2025. 4. 28. 13:25
반응형

 

🚀 TypeScript 마이그레이션 실전 팁

1. TypeScript 설치부터 시작

  • 프로젝트에 TypeScript를 설치합니다.
npm install --save-dev typescript @types/react @types/react-dom
  • 그리고 tsconfig.json을 생성합니다.
npx tsc --init

팁: React용 설정을 추가로 해주면 좋아요:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "allowJs": true,
    "checkJs": false,
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "moduleResolution": "node",
    "target": "ES6"
  },
  "include": ["src"]
}
  • allowJs: true 덕분에 .js 파일과 .tsx 파일을 같이 쓸 수 있어, 점진적 전환이 가능합니다.

2. 파일 확장자 변경

  • 점진적으로 파일 확장자를 변경하세요.
    • 컴포넌트 파일부터 .tsx로 변경합니다.
      • 예: Button.js → Button.tsx
    • 로직 파일은 .ts로 변경합니다.
      • 예: utils.js → utils.ts

처음부터 모든 파일을 한 번에 바꾸지 마세요. → 에러 폭탄 맞을 수 있습니다. 😅

3. any를 적극 활용해도 괜찮다

  • 처음부터 모든 타입을 완벽하게 작성하려고 하면 마이그레이션이 느려집니다.
  • 일단 막히는 부분은 any로 처리하고, 나중에 점차 구체적인 타입으로 고쳐나가는 방식이 효율적입니다.
function myFunction(value: any) {
  console.log(value);
}

Tip: TODO 주석을 남겨서 추후에 리팩터링 대상 표시하면 좋아요.

4. Props와 State에 타입 지정

컴포넌트에 props나 state를 사용할 때는 바로 타입을 명시해주는 습관을 들이세요.

JavaScript 버전

function Button(props) {
  return <button>{props.label}</button>;
}

TypeScript 버전

interface ButtonProps {
  label: string;
}

function Button({ label }: ButtonProps) {
  return <button>{label}</button>;
}

5. 유틸리티 타입 활용

TypeScript는 Partial, Pick, Omit, Record 같은 유틸리티 타입을 제공합니다.
이걸 잘 쓰면 마이그레이션이 훨씬 쉬워집니다.

예시:

type User = {
  id: number;
  name: string;
  email: string;
};

// 일부만 필요할 때
type UserPreview = Pick<User, 'id' | 'name'>;

6. 타입 추론을 믿어라

TypeScript는 의외로 타입을 잘 추론합니다.

  • 꼭 필요한 곳만 명시하고
  • 나머지는 타입스크립트의 자동 추론을 최대한 활용하는 것도 좋은 방법입니다.
const count = 5; // 자동으로 number로 추론

🔥 추가 보너스: 마이그레이션 순서 추천

  1. 공통 유틸 파일 (ex. helpers, utils)
  2. 작은 컴포넌트 (버튼, 카드 같은 소형)
  3. 큰 페이지 컴포넌트
  4. 상태 관리 파일 (Redux, Zustand 등)
  5. API 통신 로직

작은 단위부터 하나하나 고쳐나가면 마이그레이션 스트레스를 줄일 수 있습니다.

📌 정리

초반 전략 후반 전략

allowJs로 JS+TS 공존 완전히 TS로 이주
any 적극 활용 타입을 점진적으로 구체화
컴포넌트부터 변경 공통 로직까지 모두 타입화

 

✅ React TypeScript 마이그레이션 체크리스트

1. 준비

  • typescript, @types/react, @types/react-dom 설치
  • tsconfig.json 생성 및 설정 (allowJs: true, strict: true)
  • 빌드/테스트가 잘 되는지 확인

2. 기본 설정

  • eslint, prettier에 TypeScript 지원 추가
  • IDE(VSCode 등)에서 TypeScript 플러그인 활성화

3. 점진적 파일 변환

  • .js → .tsx 또는 .ts 확장자 변경
  • 작은 컴포넌트부터 변환 시작 (ex. Button, Input)
  • 공통 유틸 함수 파일 변환
  • API 통신 모듈 변환
  • Context/Redux/Zustand 상태 관리 코드 변환
  • Page 컴포넌트 변환

4. 타입 정의

  • Props 인터페이스 작성
  • State 타입 지정
  • Event 타입 지정 (ex. React.ChangeEvent<HTMLInputElement>)
  • API 응답 타입 지정
  • 공통 타입 정의 파일 생성 (types/ 폴더 등)

5. 타입 안정성 강화

  • any를 사용한 곳 TODO 주석 추가
  • 점차 any를 구체적 타입으로 변경
  • Partial, Pick, Omit, Record 등 유틸리티 타입 적극 사용
  • 타입 추론 가능한 부분은 명시하지 않고 자동 추론에 맡기기

6. 최종 점검

  • allowJs: true를 false로 변경 (완전히 TypeScript 전환됐을 때)
  • 빌드 오류 없는지 확인
  • 테스트 코드 (있다면) 타입 수정 완료
  • 코드 리팩토링 및 정리
  • Pull Request + 코드 리뷰 진행

🗂️ 추가로 추천하는 폴더 구조 예시

src/
  components/
    Button/
      Button.tsx
      Button.types.ts
  hooks/
    useAuth.ts
  pages/
    Home/
      Home.tsx
  types/
    api.d.ts
    common.d.ts
  utils/
    formatDate.ts

🏁 최종 목표

  • 모든 파일 .tsx 또는 .ts
  • tsconfig strict 모드 활성화
  • 타입 안정성 95% 이상
  • 컴파일 에러 0건
  • 협업 가능한 타입 환경 완성

 

반응형