[React] Uncaught Typeerror: Cannot read properties of null (reading 'style')

---

 

#1. Uncaught Typeerror: Cannot read properties of null (reading 'style')

스크롤 진행에 따라 텍스트가 밑에서 서서히 올라오는 이벤트를 구현하려는데 에러가 발생했다..

라이브러리를 찾아보니 AOS(예전부터 유명)와 react-scroll-motion(최근 많이 사용하는 추세)등등, 이미 내가 원하는 기능을 갖춘 라이브러리들이 많이 있었다.

라이브러리들을 사용하면 금방 이벤트를 구현할 수 있지만, 나중에 사용하더라도 지금은 직접 구현하고 싶었다.

 

내가 구현하려 했던 방법은

useRef를 사용하여 원하는 DOM을 제어하고,

const receiveTextRef = useRef(null);

useEffect로 마운트 됨과 동시에 함수를 호출하여 파라미터로 useRef 값을 전달하는 방법이였다.

useEffect(() => {
    ScrollEvent(receiveTextRef);
  }, []);

 

아래는 호출 할 함수이다.

const ScrollEvent = (receiveTextRef) => {

  const scrollEvent = window.addEventListener('scroll', e => {
    if(window.scrollY > 250) {
      receiveTextRef.current.style.opacity = 1;
      receiveTextRef.current.style.transform = 'translateY(0)';
    } else {
      receiveTextRef.current.style.opacity = 0;
      receiveTextRef.current.style.transform = 'translateY(60px)';
    }
  });
  return scrollEvent;
};

export default ScrollEvent;

파라미터로 전달 받은 useRef 값에 스타일을 지정하는 방식.

 

한 번에 에러 없이 잘 적용 되었다.

그런데.. 잘 되는것 처럼 보였으나.. 페이지를 이동하면 아래와 같은 에러가 발생한다.. 대체 왜?

스크롤 이벤트라 그런지 조금만 내렸는데 에러가 74개나 발생했다.

문제는 함수를 호출한 페이지로 다시 돌아가면 에러가 발생하지 않아야 하는데, 이동 전에는 없던 에러가 똑같이 발생한다..

분노의 1126개 에러

함수를 호출한 페이지에서 새로고침 하면 에러가 안나는데 페이지 이동하면 또 에러가 발생한다..

뭐가 문제일까.

 

1. 첫 번째 해결 시도

const params = useParams();

useEffect(() => {
  if(params.페이지 === 페이지이름) {
    ScrollEvent(receiveTextRef);
  }
}, []);

useParams를 사용하여 해당 패스 파라미터(url)에만 동작하게 해보았다.

보기좋게 실패.

 

2. 두 번째 해결 시도

const [mount, setMount] = useState(false);

useEffect(() => {
  setMount(true);

  if(mount) {
    ScrollEvent(receiveTextRef);
  }
}, []);

해당 페이지가 마운트 될 때 실행되게 해보았다.

하지만 이것도 역시나 실패.

 

많은 구글링과 여러가지 해결 시도에도 불구하고 해결하지 못하고 있었는데,

혹시나 해서 시도해 본 방법이 해결되었다..

 

해결 방법

const ScrollEvent = (receiveTextRef) => {

  // 변수에 담아 사용
  const receiveText = receiveTextRef.current.style;

  const scrollEvent = window.addEventListener('scroll', e => {
    if(window.scrollY > 250) {
      receiveText.opacity = 1;
      receiveText.transform = 'translateY(0)';
    } else {
      receiveText.opacity = 0;
      receiveText.transform = 'translateY(60px)';
    }
  });
  return scrollEvent;
};

export default ScrollEvent;

해결 방법은 ref값.current.style 을 바로 사용하지 않고, 변수에 담아 사용하는 것이였다.

 

변수에 담아서 사용하는 것과 바로 사용하는것의 차이가 뭘까..

거의 4시간 넘게 오류 해결한다고 구글링 해보고 이것저것 시도해 봤는데 뭐랄까..

허무하게 해결되었다고 해야할까.. 아님 구글링 해도 나오지 않았는데 스스로 해결해서 좋다고 해야하나..

암튼 해결완료.