react scroll 이벤트 정리

TOC

1. scroll 이벤트란?
2. hooks에서 scroll event를 받아 사용하는 법
3. 구현과 정리

1. scroll 이벤트란?

말 그대로 scroll 이벤트가 발생하면 특정 function을 행해주는 것을 말한다.

보통 scroll이 x에 왔을 경우 A이벤트를 실행한다. 이런 식의 이벤트가 보통이다.

2. hooks에서 scroll event를 받아 사용하는 법

event listening을 위해서 적합한 함수는 side effect를 일으킬 수 있는 useEffect 함수가 적절해 보인다.
render가 끝난 상태에서 scroll이 발생하기 때문에 별 문제는 없어보인다.

원하는 것과 흐름 속에서 필요한 것들을 정리해보자.

• 원하는 것 = scroll의 특정 값에 따라 함수를 실행시킴
• 흐름 = 사용자가 스크롤을 내리면 nav bar에 어떤 변화를 줌
• 필요한 것 = scroll 값을 입력 받을 변수, scroll 값에 따라 변화 될 토글 boolean 값을 저장 할 변수

원하는 것과 프로그램의 흐름, 필요한 것 까지 모두 준비되었다.

이를 통해 직접 구현해보자.

3. 구현과 정리

우선 현재 제작중인 포폴용 사이트에서 사용될 것이기 때문에 스크롤에 따른 window.pageYOffset의 값을 읽어와
콘솔에 찍어보자

const [scrollY, setScrollY] = useState(0);
  const [scrollToggle, setScrollToggle] = useState(false);
  useEffect(() => {
    (() => {
      window.addEventListener('scroll', () => setScrollY(window.pageYOffset));
      if (scrollY > 100) {
        setScrollToggle(true);
      } else if (scrollY < 100) {
        setScrollToggle(false);
      }
    })();
    return () => {
      window.removeEventListener('scroll', () =>
        setScrollY(window.pageYOffset)
      );
    };
  });

위에서 기술한 대로 scroll값을 받을 변수와 그에 따라 toggling 될 변수를 선언한다.

그 다음 useEffect를 통해 실행될 함수를 정의해준다.

window에 addEventListener를 걸어주고 값의 변화가 생기면 해당 함수가 실행된다.
위의 코드에서는 scrollY값은 scroll이벤트가 발생 될 때마다 계속 setScrollY를 실행시키고

이 값이 변하므로 scrollY값이 100이 넘어가는 경우 toggling한다.

return을 통해 event를 지워주며 빠져나온다.