useEffect에서 이벤트를 바인딩할 때, return(클린 함수) 에 이벤트 바인딩을 다시 취소해야하는 이유

[p-iknow]

이슈

알림창을 만드는중에 infinite scroll을 구현중인대

 useEffect(()=>{
        window.addEventListener("scroll", inifiniteScroll,true)
        return()=>{
            window.removeEventListener("scroll", inifiniteScroll, true)
        }
    })

이렇게 return 해줘서 클린해주지 않으면 무한루프를 돌더라구요~ 음..콘솔을 찍어보면 add => remove 가 아니라 add=> remove => add 결국엔 add 가 남아있는데 결국 같다고 생각하는데 왜그런걸까요~ 마지막에 remove를 작동시킨다면 무한루프를 멈추는 이유라고 생각이 되는데 그것도 아니라서요..

해결

Functional Component는 그냥 하나의 function이라서 렌더링 될때마다 계속 호출되는 형태입니다. 따라서 함수 바디가 렌더링마다 계속 실행된다는 것이기 때문에 useEffect 안에서 event listener를 사용해야 한다면 최종적으로 하나의 리스너만 걸려야 하므로 useEffect 안에서 return 되는 함수에서 꼭 리스너를 해제해야 합니다.