사용자 입력을 언제 확인해야 할까?
-
Form이 완전하게 제출되었을 때, 유효성을 검증할 수 있다.
-
유저가 값을 입력하고 input 요소가 포커스를 잃었을 때, 유저가 무엇을 입력했는지 확인하고 유효성을 검증할 수 있다.
-
유저가 키보드를 한 번씩 타이핑 할 때마다 검증.
-
input요소가 변경될 때 마다 유효성을 검증.
Case 1 -
Form이 완전하게 제출되고, 유효성 검증을 한다면 사용자가 경고창을 보고난 후에 유효한 값을 입력하게 할 수 있다.
유저가 이메일 입력칸에 이메일을 전부 입력하지 않았지만, 이메일이 틀렸다고 곧바로 알려주지 않음
장점 : 유저의 입력이 모두 끝나고 나서 유효성을 검증하므로 불필요한 경고창을 줄일 수 있다.
단점 : 유저에게 피드백이 늦는다. Form을 제출하고 유저는 유효성 검증이 되지 않은 input으로 돌아가 다시 값을 입력해야한다.
Case 2 -
input 요소에서 포커스를 잃었을 때, 입력 값의 유효성을 검증하는 경우
장점 : 유저가 input에 값을 작성하고 포커스를 잃었을 시, 곧바로 피드백이 일어나서 수정이 가능하다.
단점 : 유저가 해당 Input에 포커싱 되어있을 때는 틀렸는지, 올바른지 알 수 없다.
Case 2 -
실시간 유효성 검증 (타이핑 할 때 마다)
장점 : 실시간으로 유효성 검증하여 유저에게 즉각적인 피드백 제공.
단점 : 유저가 다소 불필요한 피드백 메시지를 마주할 상황이 많음.
useState와 useRef로 input관리하기
어떤 차이가 있나요?
생각해보자.
input값이 Form으로 제출되었을 때, 한 번만 필요하다면 모든 키 입력마다 State값을 업데이트 하는 것은 불필요하다 생각이 들 수 있다.
이러한 경우에는 useRef로 input을 관리하는 것이 더 효율적일 것이다.
반면 즉각적인 유효성 검증을 위해 입력마다 입력값이 필요하다면, useState로 검증하는 것이 좋다.
왜냐하면 useRef로는 해당 작업이 불가하다.
useState로 input값을 관리하게되면, 타이핑마다 input value가 바뀌는 것을 확인 가능하다.
반면, useRef는 const nameValue = nameInputRef.current.value 이런식으로 최종 input값만 다룰 수 있기 때문에 실시간 input 검증이 불가능하다.
또한 입력값을 초기화하고 싶은 경우에 useState를 사용한다.
입력값을 초기화하는 경우에는 useRef를 사용해도 되지만, 권장하지 않는다.
nameInputRef.current.value = ""; // 입력값 초기화.
ref는 직접 DOM요소를 조작하므로 React에서 추구하는 방향과 다소 다름. 때문에 바람직한 방법이 아님.
입력값을 초기화하고자 한다면 useState로 입력값을 다루는 것이 여러 방면에서 좋겠다.
