React 폼 props 타입이 복잡해졌을 때

폼 props가 커지면 타입 에러도 늘어난다. 이런 때는 화면만 보지 말고 로그와 에러를 함께 봐야 한다.

문제를 한 번에 해결하려고 하면 오히려 더 복잡해진다. 상황을 먼저 요약하자.

상황 요약

지금 어떤 props들이 추가되었는가? 그로 인해 어떤 타입 에러가 나는가?

• 새로 추가된 props 목록
• TypeScript 에러 메시지
• 어느 컴포넌트에서 문제가 나는가

증거 모으기

에러 메시지를 정확히 읽자. "expected X, got Y" 형태의 메시지에서 차이를 찾자.

• 에러 메시지 전문
• 실제 props 값이 뭔가
• 기대되는 타입이 뭔가

이벤트 흐름과 가능한 원인

npm run build
# 브라우저에서 모바일 폭과 키보드 입력 흐름을 확인한다

polyfill이 필요한 건 아닌가? 타입 충돌이 정말 이 위치에서만 나는가?

가장 작은 실험부터

props 타입을 수정하기 전에, 지금 이 컴포넌트에 어떤 값이 들어가는지 로그로 확인해보자.

모바일 환경에서도 확인

PC에서는 문제가 안 보이지만 모바일에서 문제가 생기는 경우도 있다. 렌더링 조건을 다시 확인해보자.

결과가 바뀐 이유를 로그와 타입 에러로 설명할 수 있으면, 문제가 정리된 것이다.