validate 부분과 관련하여…

• validate:(value) => value === password.current

• useRef를 사용하여 받아줬는데 왜 이렇게 받았는가? password.current는 어디서 나온것인가?에 관하여

• 원래는 state를 이용하는 것이 맞으나…

  • 예시)

    const [input,setInput] = useState("");
    
    const handleChange = (e) => {
    	setInput(e.target.value);
    }
    
    return (<label>Email</label>
    <input
    			value={input}
    			onChange={handleChange}
          name="email" 
          type="email"  
          {...register("email", { required: true,pattern:/^\\S+@\\S+$/i})}/>
          {errors.email && <p>This field is required</p>}
    )
    

• react-hook-form을 사용하고 있기 때문에 useRef()를 사용하는 것이다.

useRef()

• 원래는 특정 DOM을 선택할 때 사용한다.
• 보통 JavaScript의 경우 getElementById(),querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택
• 일반적으로 React에서는 ref라는 것을 이용해서 DOM을 선택한다.
• 클래스 컴포넌트 → React.createRef
• 함수형 컴포넌트 → useRef

DOM을 직접 선택해야 할 경우

1. 엘리먼트 크기를 가져와야 할 경우
2. 스크롤바 위치를 가져와야 할 경우
3. 엘리먼트에 포커스를 설정해줘야 할 때

… 등등

UseRef를 이용해서 어떻게 Password와 Password Confirm이 같은지 알 수 있는가?

const password = useRef();  // 1.ref 생성
password.current = watch("password"); // 2. watch 를 이용하여 password 필드값 가져오기

<input
		name="password_confirm"
		ref={register({
				required : true,
				validate : (value) =>
						value === password.current //가져온 password 값을 ref.current에 넣어주기
		})}
/>