안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱입니다.
오늘도! 리액트 작업 중 해당 에러가 발생했습니다.
프론트엔드.. 매일 에러를 만나는 직업...^^
에러 내용
자, 이제 에러를 한번 봐볼게요.
빨간색 글씨로 '객체가 아니다'라고 적혀 있네요.
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