[에러] [리액트] 조건부 렌더링에서 useEffect와 useRef

 

문제상황 : 

조건부 렌더링이 아닌 페이지의 경우 useRef 에 DOM 요소가 담긴 이후에 useEffect 가 실행되기 때문에 문제가 되지 않는다.

그러나!

조건부 렌더링에서 useEffect 안에 useRef가 있으면 useRef가 아직 초기화가 되지 않아서 undefined가 될 수 있다.

  useEffect(() => {
    userRef.current.focus();
  }, []);

 

해결방법 : null check 를 추가해준다

  useEffect(() => {
    if (userRef.current) {
      userRef.current.focus();
    }
  }, []);