inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 리액트 A-Z[19버전 반영]

네비게이션 바 컴포넌트 생성하기

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

582

yaejingo

작성한 질문수 1

0

안녕하세요 강사님🙇‍♀️
다름이 아니라, 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>
  );
}

react redux tdd typescript next.js 소프트웨어-테스트

답변 1

0

인프런 AI 인턴

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

강의 소스 코드 압축 풀기 오류

0

70

1

런타임 에러 ㅠㅠ

0

84

1

강의대로 따라갔는데 에러보다 api키로 들어간 넷플릭스? 그런게 렌더링 되지 않습니다 ㅠ

0

100

1

안녕하세요 개발과 상관없는 질문입니다만

0

111

1

리액트 라우터 관련

0

101

1

react-beatiful-dnd에서 문제가 발생합니다.

0

103

1

react19에서는 react-beautiful-dnd가 설치되지 않습니다.

0

806

1

useEffect로 사용을 해도 되나요?

0

198

1

넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.

0

195

1

react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다

0

279

2

리액트 dockderfile 작성 시 COPY 질문

0

145

1

next.js에서부터는 react query 필요없는지

0

320

1

기능

0

193

1

오류가 안보여요

0

193

1

CSS

0

217

1

local storage

0

208

1

list컴포넌트 생성하기

0

223

1

검색어 입력 후 초기화하는 방법 궁금합니다!

0

331

1

Banner.css에 대해서

0

444

1

플러그인이 추천을 안해줍니다

0

320

1

마이너스버튼 테스트

0

279

2

리액트 서버 실행 오류

0

1156

2

오류메세지는 확인했는데 어떻게 고쳐야 할지 모르겠습니다 ㅠ

0

298

1

creactStore질문이요

1

284

2