리액트 자바스크립트 -> 타입스크립트로 마이그레이션 하기!

1. 컴포넌트 선언 방식

// 기존 JS
const Dashboard = () => {
  // ...
}

// 변환된 TSX
const Dashboard: React.FC = () => {
  // ...
}

• React.FC (Function Component) 타입을 명시적으로 선언하여 TypeScript에게 이 컴포넌트가 React 컴포넌트임을 알려준다
• 이렇게 하면 컴포넌트의 props 타입을 자동으로 추론할 수 있으며, React 관련 타입 체크도 가능하다
• 최신 React에서는 React.FC 대신 React.ComponentType을 사용하는 경우도 있다

 

2. Props 타입 정의

// 기존 JS
const CategoryEditor = ({ onClose }) => {
  // ...
}

// 변환된 TSX
interface CategoryEditorProps {
  onClose: (value: boolean) => void;
}

const CategoryEditor: React.FC<CategoryEditorProps> = ({ onClose }) => {
  // ...
}

• interface를 사용하여 컴포넌트의 props 타입을 명시적으로 정의한다
• onClose 함수의 매개변수와 반환 타입을 명확하게 지정할 수 있다
• 이렇게 하면 컴포넌트 사용 시 필요한 props를 누락하거나 잘못된 타입을 전달하는 것을 방지할 수 있다 

 

3. 상태(State) 타입 정의

// 기존 JS
const [course, setCourse] = useState(null);

// 변환된 TSX
const [course, setCourse] = useState<Course | null>(null);

• useState 훅에 제네릭 타입을 사용하여 상태의 타입을 명시한다
• Course | null은 course가 Course 타입이거나 null일 수 있음을 나타낸다
• 이렇게 하면 상태를 사용할 때 타입 안전성이 보장되며, IDE의 자동완성 기능도 활용할 수 있다 

 

4. 이벤트 핸들러 타입

// 기존 JS
const handleSubmit = (e) => {
  e.preventDefault();
  // ...
}

// 변환된 TSX
const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  // ...
}

• 이벤트 핸들러의 매개변수에 React.FormEvent 타입을 지정한다
• 이는 폼 제출 이벤트의 타입을 명확히 하여, 이벤트 객체의 속성에 안전하게 접근할 수 있게 한다
• 다른 이벤트 타입으로는 React.MouseEvent, React.ChangeEvent 등이 있다

 

5. styled-components 타입

// 기존 JS
const Chip = styled.button`
  background-color: ${props => props.active ? "#007bff" : "white"};
`

// 변환된 TSX
const Chip = styled.button<{ active: boolean }>`
  background-color: ${props => props.active ? "#007bff" : "white"};
`

• styled-components에서 props의 타입을 제네릭으로 정의한다
• active prop이 boolean 타입임을 명시하여, 컴포넌트 사용 시 타입 체크가 가능하다
• 이렇게 하면 스타일 컴포넌트의 props에 대한 타입 안전성이 보장된다 

 

6. Redux 관련 타입 정의

// 기존 JS
const dispatch = useDispatch();
const { categories } = useSelector(state => state.category);

// 변환된 TSX
const dispatch = useAppDispatch();
const { categories } = useAppSelector((state: RootState) => state.category);

• Redux의 dispatch와 useSelector에 타입을 추가하여 타입 안전성을 보장한다
• RootState 타입을 사용하여 전체 Redux 상태의 구조를 명확히 한다
• 커스텀 훅인 useAppDispatch와 useAppSelector를 사용하여 타입이 지정된 dispatch와 selector를 제공한다 

 

7. Firebase 데이터 타입 정의

// 기존 JS
const coursesData = coursesSnapshot.docs.map(doc => ({
  id: doc.id,
  ...doc.data()
}));

// 변환된 TSX
const coursesData = coursesSnapshot.docs.map(doc => ({
  id: doc.id,
  ...doc.data()
})) as Course[];

• Firebase에서 가져온 데이터에 Course 타입을 명시적으로 지정한다
• as Course[]를 사용하여 타입 단언(type assertion)을 수행한다
• 이렇게 하면 Firebase 데이터를 사용할 때 타입 안전성이 보장된다 

 

8. 타입 가드 추가

// 기존 JS
filtered = selectedCat.courseDetails.filter(course => course != null);

// 변환된 TSX
filtered = (selectedCat.courseDetails || []).filter((course): course is Course => course !== null);

• 타입 가드를 사용하여 null이 아닌 Course 객체만 필터링한다
• course is Course는 타입 가드로, 필터링된 배열이 Course[] 타입임을 보장한다
• 이렇게 하면 null 값을 안전하게 처리할 수 있다 

 

9. 인터페이스 정의 추가

export interface Course {
  id: string;
  courseName: string;
  courseLength: number;
  description: string;
  locationInfo?: {
    latitude: number;
    longitude: number;
  };
}

export interface Category {
  id: string;
  title: string;
  courseIdList: string[];
  courseDetails?: (Course | null)[];
}

• 애플리케이션에서 사용되는 주요 데이터 구조를 인터페이스로 정의한다
• ?를 사용하여 선택적 속성을 표시한다
• 인터페이스를 export하여 다른 파일에서 재사용할 수 있게 한다 

 

10. 환경 변수 타입 정의

// 기존 JS
process.env.REACT_APP_FIREBASE_API_KEY

// 변환된 TSX
declare global {
  namespace NodeJS {
    interface ProcessEnv {
      REACT_APP_FIREBASE_API_KEY: string;
      // ... 다른 환경 변수들
    }
  }
}

• ProcessEnv 인터페이스를 확장하여 환경 변수의 타입을 정의한다
• 이렇게 하면 환경 변수를 사용할 때 타입 체크가 가능하다
• 필수 환경 변수가 누락되었을 때 컴파일 시점에 오류를 발견할 수 있다 

 

주요 개선 효과

1. 타입 안전성 향상
   • 컴파일 시점에 타입 관련 오류를 발견할 수 있다
   • 런타임 에러를 줄일 수 있다 
2. 코드 자동완성 지원
   • IDE에서 더 정확한 자동완성을 제공한다
   • 코드 작성 속도가 향상된다 
3. 실수 방지
   • 필수 props 누락을 방지한다
   • 잘못된 타입의 데이터를 전달하는 것을 방지한다 
4. 코드 가독성 향상
   • 타입 정의를 통해 코드의 의도를 명확히 할 수 있다
   • 다른 개발자가 코드를 이해하기 쉬워진다 
5. 리팩토링 시 안정성 향상
   • 타입 시스템을 통해 리팩토링 시 발생할 수 있는 오류를 미리 발견할 수 있다
   • 코드 변경 시 영향 범위를 파악하기 쉬워진다 
6. 런타임 에러 사전 방지
   • 타입 체크를 통해 런타임에 발생할 수 있는 오류를 미리 방지할 수 있다
   • 디버깅 시간을 줄일 수 있다 

이러한 변경사항들로 인해 코드의 품질과 유지보수성이 크게 향상된다!