[TypeScript] JS에서 TS로 변환하며 생긴 오류

문제발생

JS에서 TS로 변환하면서 input에 입력한 첫 번째 값이 지워지지 않는 에러가 생겼다. console.log로 확인했을 때 useForm의 handleChange 함수의 value는 지워진 빈 값을 반환하고 있는데 반해, input 태그의 value에서는 첫번째 텍스트가 지워지지 않고 있었다.

const handleChange = (e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>) => {
  const target = e.target 
  	as HTMLInputElement | HTMLButtonElement;
  const name = target.name;
  const value = 
  	(target as HTMLButtonElement).dataset.value || 
    (target as HTMLInputElement).value;

  if (name && value) {
    setInputValue((prev) => ({ ...prev, [name]: value }));
  }
};

해결

기존의 코드는 e.target.value를 가져올 때, 버튼 요소의 dataset.value가 빈 문자열이거나 falsy 값일때 문제가 발생한다. falsy일 경우 ||연산자에 의해 input의 value가 선택된다. 그리고 if (name && value) {} 조건문에서 input 태그에 빈 문자열이 입력되는 경우, 리스너에서 이를 처리하지 못해 첫 번째 텍스트가 지워지지 않는 상태에 영향을 주게 된 것 같다.

(1) input과 button 요소의 값을 조건에 따라 구분

const value =
      target.type === "text"
		? (target as HTMLInputElement).value
		: (target as HTMLButtonElement).dataset.value;

target의 value 속성을 가져올 때, HTMLButtonElement를 먼저 시도 하기 때문에 HTMLInputElement의 값을 제대로 가져오지 못했다. 그래서 input의 태그인지를 확인하여 타입 오류가 발생하지 않도록 수정했다.

(2) 빈 문자열도 유효한 값으로 취급

if (name && (value || value === "")) {
	setInputValue((prev) => ({ ...prev, [name]: value }));
	setError("");
}

name을 확인하고 value가 falsy한 경우에도 빈 문자열이 유효한 값으로 취급될 수 있도록 수정했다. 그래서 name이 있고 value가 유효한 경우에만 setInputValue 함수를 호출하여 상태를 업데이트하고, 에러 메세지를 초기화한다.

---

자바스크립트로 했을 때는 잘 되었던 코드가 type을 잘못 지정하자마자 에러가 발생했다.. 정확한 타입을 지정하지 않고 어영부영 코드를 작성해도 돌아갔다는 것이 정말 신기하면서 관대하다고 느꼈다. 이런 상황이 혼자 공부하는 개인 프로젝트여서 괜찮지 실제 사용자가 있는 프로덕트였다면, 컴포넌트의 양도 많아지고 코드도 방대해져서 에러 잡기 정말 힘들고 어려운 작업이 되었을 것 같다는 생각이 들었다. 내가 작성한 코드의 결과 값이 어떤 식으로 오는지 명확하게 알고 구현하는 것에 중요함을 더 느끼게 되었다.