React 폼 타입 리팩터링할 때 실수하지 않으려면

React에서 폼을 다루다가 타입 에러가 늘어나면, 한 번에 싹 고쳐야 한다고 생각하기 쉽다. 하지만 그럴수록 버그가 숨겨진다.

문제 상황을 먼저 기록하기

에러 문구를 정상 상태와 함께 남겨 두면, 나중에 같은 실수를 반복하지 않는다. 특히 렌더링이 조건부로 이뤄질 때는 어떤 케이스가 깨졌는지 분명히 해 두자.

이벤트 흐름을 체크하기

정상 상태를 먼저 정해 두는 게 중요하다. 그래야 바뀐 부분이 정말 맞는지 아닌지를 빠르게 판단할 수 있다.

• 먼저 볼 값: 이벤트 흐름이 제대로 실행되는가?
• 같이 비교할 값: 정상 상태에서는 어떻게 동작했는가?
• 남겨둘 기록: 명령어 출력, 에러 코드, 수정한 설정

빌드하고 실제로 보기

타입 체크만 통과한다고 끝이 아니다. 브라우저에서 직접 동작을 확인해 봐야 한다.

npm run build
# 브라우저에서 모바일 화면도 확인하고, 키보드 입력 흐름도 테스트한다

특히 모바일 화면에서 레이아웃이 깨지거나 입력이 제대로 안 되는 경우가 있다. 각 환경에서 한 번씩 확인해 두자.

작은 변경의 힘

한 번에 여러 파일을 고치면 뭐가 뭔지 알 수 없다. 한 부분씩 수정하고 테스트하면, 어디서 문제가 나는지 명확해진다.

1. 원래 증상이 같은 조건에서 다시 나는지 확인한다.
2. 로그나 응답에서 바뀐 부분을 한 줄로 설명해 본다.
3. 공개 화면, 빌드 결과, 실제 요청 중 하나로 마지막 확인을 한다.

다음 검토를 쉽게 하려면

수정할 때마다 왜 이렇게 했는지 기록해 두자. 일주일 뒤에도 이해할 수 있도록.