[React] react-hook-form useRef 사용

보통 javascript 에서는 getElementById , querySelector 같은 DOM Selector 함수 사용해서 DOM 선택 

 

리액트는 ref 이용해서 DOM 선택 특히 자주 쓰이는 함수형 컴포넌트는 useRef 사용 

 

DOM을 직접 선택해야 할 경우들 

1. 엘리먼트 크기를 가져와야 할 때

2. 스크롤바 위치를 가져와야 할때

3. 엘리먼트에 포커스 설정 해줘야 할때 등등 

 

 

 

** useRef를 이용해서 어떻게 password와 password confirm이 같은지 알 수 있는걸까? 

흐름은 이렇게 됨 

1. ref 생성 

2. watch를 이용해서 password 필드 값 가져오기 

const password = useRef();
password.current = watch("password");

 

3. 가져온 password 값을 ref.current에 넣어주기

value에는 password_confirm 을 입력한 값이고 password.current는 현재 password에 입력된 값이니 같은지 아닌지 둘을 비교할 수 있는 것 

  <input
        name="password_confirm"
        type="password"
        {...register("password_confirm", {
          required: true,
          validate: (value) => value === password.current || "비밀번호가 일치하지 않습니다."
        })}
      />