window.removeEventListener("scroll",... - 인프런

안녕하세요 강사님🙇‍♀️
다름이 아니라, removeEventListener와 관련되어 질문이 있습니다.

1. window.removeEventListener("scroll", () => {});에서 함수 부분에 아무것도 적어주지 않았는데, 빈 함수를 전달한다면 어떤걸 의미하는건가요? addEventListener과 같은 함수를 적어줘야 하지 않나요?

처음 리액트를 공부하는 거라, 많이 부족합니다ㅠㅠ 바쁘시겠지만 도움주시면 감사하겠습니다!
(아래는 참고자료 겸 전체코드 첨부드립니다.)

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import "./Nav.css";

export default function Nav() {
  const [show, setShow] = useState(false);
  const [searchValue, setSearchValue] = useState("");
  const navigate = useNavigate();

  useEffect(() => {
    window.addEventListener("scroll", () => {
      console.log("window.scrollY", window.scrollY);
      if (window.scrollY > 50) {
        setShow(true);
      } else {
        setShow(false);
      }
    });

    return () => {
      window.removeEventListener("scroll", () => {});
    };
  }, []);

  const handleChange = (e) => {
    setSearchValue(e.target.value);
    navigate(`/search?q=${e.target.value}`);
  }; 

  return (
    <nav className={`nav ${show && "nav__black"} `}>
      <img
        alt="Netflix logo"
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/170px-Netflix_2015_logo.svg.png"
        className="nav__logo"
        onClick={() => (window.location.href = "/")}
      />

      <input
        value={searchValue}
        onChange={handleChange}
        className="nav__input"
        type="text"
        placeholder="영화를 검색해주세요."
      />

      <img
        alt="User logged"
        src="https://occ-0-4796-988.1.nflxso.net/dnm/api/v6/K6hjPJd6cR6FpVELC5Pd6ovHRSk/AAAABbme8JMz4rEKFJhtzpOKWFJ_6qX-0y5wwWyYvBhWS0VKFLa289dZ5zvRBggmFVWVPL2AAYE8xevD4jjLZjWumNo.png?r=a41"
        className="nav__avatar"
      />
    </nav>
  );
}

안녕하세요, 인프런 AI 인턴이에요. removeEventListener는 등록한 이벤트 리스너를 제거하는 함수입니다. 첫번째 인자로 이벤트 타입, 두번째 인자로 등록된 콜백 함수를 전달해야 합니다. removeEventListener에서 두번째 인자로 전달된 함수를 찾아서 삭제하는데, 이전에 등록한 함수와 동일한 함수를 전달해야 합니다. 하지만 이번 질문에서는 빈 함수를 전달하고 있습니다. 이는 등록한 이벤트 리스너를 제거할 때, 앞서 등록한 콜백 함수와 동일한 콜백 함수를 전달하지 않아도 된다는 것을 의미합니다. 따라서 removeEventListener(“scroll”, () => {});은 scroll 이벤트가 발생할 때 아무 일도 하지 않는 빈 콜백 함수가 등록되어 있던 것을 제거한다는 의미입니다. 이를 통해 효과적인 메모리 관리를 할 수 있습니다. 참고로, addEventListener 함수에 전달하는 콜백 함수와 removeEventListener 함수에 전달하는 콜백 함수는 동일한 함수 객체인 것이 좋습니다. 이는 removeEventListener가 정상적으로 동작하도록 보장하기 위해 이벤트 리스너를 등록할 때 정의된 함수와 같은 함수를 전달해야 함을 의미합니다. 다른 질문이 있으면 언제든지 물어봐주세요! :)

인프런 커뮤니티 질문&답변

window.removeEventListener("scroll", () => {});