TypeScript 타입 정의로 안전한 리액트 코드 만들기

리액트 프로젝트를 하다 보면, 파일을 열 때마다 TypeScript 타입 에러가 자주 보이곤 합니다.
저도 오늘 이런 문제를 겪었고, 타입 정의를 꼼꼼히 추가해 한 번에 해결했습니다!

🔍 문제 상황

• 컴포넌트 파일을 열 때마다 타입 에러가 계속 발생
• 대부분의 원인은
  • 데이터 구조에 타입이 없음
  • useState나 함수 파라미터에 타입이 빠짐

🛠️ 해결 방법

1. 데이터 구조를 interface로 명확하게 정의

   interface PageStats {
     pathname: string
     totalVisits: number
     uniqueVisitors: number
   }
   

2. useState, 함수 파라미터 등에 타입 적용

   const [stats, setStats] = useState<StatsResponse>({ data: [], totalVisits: 0, uniqueVisitors: 0 })
   const formatDate = (dateStr: string) => { ... }
   

3. 타입스크립트 오류 사전 방지
   • 타입이 명확해지니, 에디터에서 빨간줄(에러)이 사라지고, 코드가 더 안전해짐

✨ 느낀 점

타입을 꼼꼼히 지정하니

• 코드가 더 읽기 쉽고
• 일단 빨간줄은 참을 수 없으니 깔끔해지고
• 협업시에도 매우 중요!

TypeScript의 타입 정의, 귀찮아 보여도 한 번만 제대로 잡아두면 개발이 훨씬 편해집니다.