react-form-hook으로 깔끔하게 form 만들기

react-form-hook이라는 아주 편리한 훅을 사용 중이다.

지금까지 느낀 점 중 베스트였던 것은 state를 장황하게 만들 필요가 없다는 점!

import { useForm } from "react-hook-form";

export const EditForm = () => {
const methods = useForm<{
        orgName: string;
        orgCode: string;
  }>({
    defaultValues: {
        orgName: currentItem.name,
        orgCode: currentItem.code,
    },
  });
  
	const { register, setValue, getValues, watch } = methods;

	return (
    	<Form>
        	<input 
                {...register("orgName")}
                onChange={(e) => setValue("orgName", e.target.value)}
                onBlur={() =>
                watch("orgName").length < 1 &&
                setValue("orgName", currentItem.name)
              }
            />
        </Form>
    )
}

onChange함수는 input박스에서 typing할때마다 값을 setValue해준다.

그리고 그 value는 watch() 메서드로 확인해 볼 수 있다.

watch("orgName").length를 기존의 수정 전 값(currentItem)과 비교해준 이유는 해당 값이 필수값이기때문에 아무 입력이 없다면 input box가 focus out되었을때, 즉 input박스에 커서가 더 이상 없을때 기존 값(currentItem)을 넣어주기 위함이었다.

참고로 여기서 watch가 아닌 getValue를 사용해도 됐을거같다.(watch와 getValue의 차이점은 뭘까)

 

이렇게 수정 해준 데이터를 상위 컴포넌트로 보내줘야한다.

현재 상위 컴포넌트에서 수정모드 컴포넌트를 불러와주고있고 수정모드에서 업데이트 된 데이터는 저장 시 상위 컴포넌트로 보내주어야한다. 이런 경우야 수없이 겪었던 상황이지만 '저장'버튼이 수정모드(하위) 컴포넌트가아닌 상위 컴포넌트에 있다는 점에서 약간 당황하였었다.

  useEffect(() => {
    return () => setUpdateData(getValues());
  }, []);

상위 컴포넌트에서 updateData, setUpdateData state를 생성해 하위로 setUpdateData를 보내주고있고, 하위 컴포넌트가 언마운트 될때 setUpdateData에 react-form-hook의 메서드인 getValues를 사용하여 수정된 데이터를 보내준다.

setState없이도 이렇게 간단하게 되다니!!!! 정말 setState를 남발했던 기존의 코드보다 훨씬 깔끔해졌다.