useEffect에서 Ref.Event

useEffect에서 특정 target에 blur Event를 걸었는데, 적용되지않았던 경험을 적어보자

문제

• useEffect는 실행이 되는데 pwRef에서 blur시 이벤트가 일어나지않는다.

export default function Signin() {
	const pwRef = useRef<HTMLInputElement>(null);
    
    useEffect(() => {
      const fn = () => {
        setSignValid(undefined);
      };
      pwRef.current?.addEventListener("blur", fn);
      return () => pwRef.current?.removeEventListener("blur", fn);
  }, []);
  
  
  return <InputComponent ref={pwRef} />
}

해결

• useEffect의 의존배열을 비워두면 InputComponent가 mount되기전에 이벤트가 붙기문에 이때 Ref는 null값이다.
• 따라서 의존배열에 pwRef.current를 넣어주어 Ref가 mount된 이후에 이벤트를 붙여주면 해결된다.
• useEffect의 return부분도 불필요한 return을 삭제처리하였다.

export default function Signin() {
	const pwRef = useRef<HTMLInputElement>(null);
    
    useEffect(() => {
    const fn = () => {
      setSignValid(undefined);
    };
    pwRef.current?.addEventListener("blur", fn);
    return () => { // return로직 변경
      pwRef.current?.removeEventListener("blur", fn); 
    };
  }, [pwRef, pwRef.current]); //의존배열추가
  
  return <InputComponent ref={pwRef} />
}