react-hook-form 에서 watch로 등록 버튼 활성화 하기

solsolsol·2022년 6월 25일
2

useform 을 쓰면서 필수로 입력해야 하는 인풋값에 따라 등록 버튼을 활성화/비활성화 시키고자 한다면 react-hook-form에서 제공하는 watch 를 사용하면 된다.

watch

watch() : 모든 입력을 검증
watch(["name"]) : 여러 입력을 확인
watch("name") : 지정한 name 에 대한 입력 검증

useform 을 쓰면서 onChange 함수를 따로 만들지 않았기 때문에 useEffect 를 사용해서 값이 변함에 따라 렌더링을 시켜줬다.

useEffect(() => {
    if (
      watch("name") !== "" &&
      watch("remarks") !== "" &&
      watch("contents") !== "" &&
      watch("price") !== "" &&
      watch("tags") !== "" &&
      watch("address") !== "" &&
      watch("postcode") !== "" &&
      watch("addrDetail") !== "" &&
    ) {
      setIsActive(true);
    } else {
      setIsActive(false);
    }
  }, [watch()]);

처음엔 if문 안에 watch() 를 넣어줬었는데 생각과는 다르게 isActive 가 true 상태에서 변하지 않았다. watch()가 객체를 반환하기 때문이었다.

그래서 form에 사용한 요소를 모두 watch 로 검증했다. 의존성 배열도 저렇게 다 써줘야 하나 했는데 watch() 만 써줘도 각 값의 변화를 캐치해서 다행이었다.

근데 이렇게 쓰고 나니까 watch() 의 결과를 변수에 담아서 value 값을 검증했어도 될 것 같다는 생각이 들었다.

  const watchAll = Object.values(watch());

  useEffect(() => {
    if (watchAll.every((el) => el)) {
      setIsActive(true);
    } else {
      setIsActive(false);
    }
  }, [watchAll]);

로 바꿔줬다. 코드가 훨씬 짧아져서 만족~

0개의 댓글