리액트 공부하기 - hook-form 훅폼 사용시 disabled 지정해야할까? 고민

음.. 리액트 훅폼이 여러모로 장점이 많은 것 같다.

 

멘토님께서도 버튼에 disabled 속성을 거는 것이 좋겠다고 생각했는데..

 

생각해보니까, 굳이 disabled 속성을 걸진 않아도..

 

저기 있는 "아이디 찾기" 버튼 타입이 submit으로 설정 되어,

 

리액트 훅폼의 버튼이 submit 타입으로 지정되면,

handleSubmit으로 유효성 검사 + submit함수 실행까지 

두 기능을 동시에 해주는 장점이 있는데,

 

생각해보면.. 유효하지 않다면, 이렇게 submit을 아예 실행을 안시킨다.

그렇다면 그게 결국 disabled랑 같은 느낌이 아닐까~

기본 동작 (버튼 type="submit"일 때)

1. 폼 제출 시(handleSubmit(onSubmit)) → 내부적으로 유효성 검사 먼저 실행
2.  유효성 검사 통과하면 → onSubmit 실행
3.  통과하지 못하면 → onSubmit 실행 안 됨, 에러 상태 갱신됨

즉, 유효성 검사가 실패하면 onSubmit 함수는 아예 호출되지 않기 때문에, 기능적으로만 보면 버튼이 disabled된 것과 같은 효과를 갖습니다.

그럼 disabled는 왜 걸까?

그럼에도 불구하고 disabled 속성을 추가하는 이유는 크게 두 가지예요.

1. UX(사용자 경험) 측면

• 사용자가 "아직 입력이 다 안 됐구나"라는 것을 시각적으로 알 수 있음
• 회색 처리하거나 클릭 못 하게 하면 사용자가 헷갈리지 않음
• 즉, 기능적으로는 필요 없지만, 사용자에게 피드백을 주는 역할

2. 불필요한 클릭 방지

• 버튼을 계속 클릭할 때 에러 메시지가 반복 갱신되는 등의 "깜빡임" 현상을 줄일 수 있음
• 모바일 환경에서 의도치 않게 버튼을 누르는 걸 막는 용도

 

UX, UI 적 측면이라면.. 회색으로 비활성화된 듯한 느낌만 줘도 될 것 같았댜 

디자인적 피드백만 원한다면?

말씀하신 대로, 굳이 disabled 속성을 실제로 걸 필요는 없고,
단순히 스타일(예: 회색으로 보이게) 만 처리해도 됩니다.

예를 들어

<button
  type="submit"
  className={isValid ? "bg-purple-600 text-white" : "bg-gray-300 text-gray-500"}
>
  제출
</button>

• 여기서는 버튼이 실제로는 항상 활성화 상태지만,
• isValid 값에 따라 시각적으로만 "비활성화된 듯" 보이도록 처리

차이점

클릭 가능 여부	여전히 클릭 가능	클릭 자체가 불가능
시각적 피드백	✅	✅
onSubmit 실행 여부	유효성 실패 시 실행 X (react-hook-form 내부에서 자동 막음)	유효성 실패 시 실행 X (버튼 자체 클릭 불가)

줄 요약

"디자인만 신경 쓴다면 회색 처리만 해도 되고, 아예 못 누르게 하고 싶다면 disabled까지 같이!"