문제 상황(ISSUE)

1. 로그인 폼에서 비밀번호를 입력하고 엔터를 누르면 "비밀번호를 입력해달라"는 에러가 발생
2. 다른 곳에 focus를 뒀다가 다시 비밀번호 입력창에 focus를 두고 엔터를 누르면 그때서야 로그인이 되는 현상 발생

폼에 입력하는 값이 실시간으로 반영되지 않는 문제 확인

원인 분석(Root Cause)

1. 콘솔 로그를 통해 사용자 입력값이 실시간으로 반영되지 않는 것을 확인

console.log('현재 폼 데이터:', watch());
console.log('제출된 데이터:', data);

2. 로그 분석

• value prop이 react-hook-form의 기본 동작을 덮어씌우는 현상 발견
• value prop이 controlled input처럼 동작하여 실시간 입력을 막고 있었음

3. 코드 구조 문제

• FormInput 컴포넌트가 항상 controlled input으로 동작
• FormInput 컴포넌트에서 value prop을 무조건적으로 사용하고 있어 react-hook-form의 기본 동작을 방해

해결 방안(Solution)

1. FormInput 컴포넌트 리팩토링

const inputProps = {
  maxLength,
  minLength,
  type: isPassword ? (showPassword ? 'text' : 'password') : type,
  id: id as string,
  className: "mt-2 form-input",
  onChange,
  placeholder,
  disabled: isDisabled,
  ...(value !== undefined && { value }), // value가 undefined가 아닐 때만 포함
};

• value prop이 존재할 때만 value 속성을 포함하도록 조건부 처리
• value prop이 없는 경우 react-hook-form의 기본 동작을 사용하도록 수정

2. 개선 사항

• 이를 통해 로그인 폼에서는 자유로운 입력이 가능하고, value prop이 필요한 다른 컴포넌트에서는 controlled input으로 동작하도록 함

결과 및 검증(Result)

1. 기능적 개선

• 로그인 폼 입력값 실시간 반영 정상화
• 엔터 키를 통한 폼 제출 정상 작동

2. 코드 품질 개선

• 재사용 가능한 FormInput 컴포넌트의 유연성 확보
• 기존에 value prop을 사용하던 다른 컴포넌트들의 기능도 정상 동작

학습 포인트(Lessons Learned)

1. React 폼 핸들링 시 controlled/uncontrolled 컴포넌트의 특성 이해 중요
2. 재사용 가능한 컴포넌트 설계 시 다양한 사용 케이스 고려 필요
3. 문제 해결을 위한 단계적 디버깅 방법의 중요성