본문 바로가기

코딩도 합니다/React

[리액트 에러 React Error] TypeError: undefined is not an object (evaluating ...addEventListener)



안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱입니다.

오늘도! 리액트 작업 중 해당 에러가 발생했습니다.
프론트엔드.. 매일 에러를 만나는 직업...^^

 

에러 내용

자, 이제 에러를 한번 봐볼게요.
빨간색 글씨로 '객체가 아니다'라고 적혀 있네요.
wheel을 사용할 때 wheelHandler라는 이벤트를 호출 했을뿐인데.. 뭐가 문제일까요?



문제 원인 파악

위 에러에 보여지는 코드와는 다르지만,
이 글을 보시는 분들이 이해하기 편하게끔 간략하게 적어봤어요.
위 코드와 다르다고 혼동하지 마시고, 위에서는 에러 내용만 체크해 주세요!

하단의 코드를 보면 아시겠지만, myValue라는 state가 바뀔 때마다 이벤트를 추가 및 삭제 하려고 했으나 실패했어요.
에러 원인을 파악해 보니 state가 바뀔 때마다 wheelHandler 이벤트가 재생성 되어,
컴포넌트 업데이트 전과 동일하지 않은 함수 혹은 객체로 인식 되어 해당 에러가 발생하는 듯 했습니다.

import React, { useState, useEffect } from "react";
.
.
.
function myComponent() {
    const [ myValue, setMyValue ] = useState(true)
    const wheelHandler = (e) => {
        ...
    };

    useEffect(() => {
        if (myVlaue == true) {
            document.addEventListner('wheel', wheelHandler};
        } else {
            document.removeEventListner('wheel', wheelHandler};
        }
    }, [myValue]);


	return(
	)
}

export default myComponent;



문제 해결

전달되는 wheelHandler 함수에 useCallback()을 사용하여, 함수가 재생성 되는 것을 방지하여 해결했습니다.
주석으로 적혀 있는 부분 코드의 앞쪽을 봐주세요. 위에 코드에는 없는 useCallback을 체크!
리액트 개발 중 eventListner 사용할 때마다 굉장히 잘 쓸 것 같아요.

import React, { useState, useEffect, useCallback } from "react";
.
.
.
function myComponent() {
    const [ myValue, setMyValue ] = useState(true)
    const wheelHandler = useCallback((e) => {
        ...
    }; ////////// 여기 useCallback 사용 체크!

    useEffect(() => {
        if (myVlaue == true) {
            document.addEventListner('wheel', wheelHandler};
        } else {
            document.removeEventListner('wheel', wheelHandler};
        }
    }, [myValue]);


	return(
	)
}

export default myComponent;
728x90