[포트폴리오] 스크롤 이벤트

스크롤 이벤트!

시작하며

프로젝트 진행중에 화면에서 스크롤을 내리면 왼쪽 사이드바에 리스트항목에 맞게 스크롤위치를 감지하여 색상이 변하게 하고싶었다.
그래서 이번엔 스크롤 이벤트를 활용해보려한다.

웹페이지에서 일어나는 모든 사건을 이벤트라고 한다.
이벤트는 특정 동작이 벌어지는 사건이 일어난 것이다.
예시 - 키를 눌렀다 뗄때, 스크롤이 움직이는 순간 등

이번에는 스크롤 이벤트라하여 스크롤이 움직이는 순간을 이용해서 내가 만들고 싶어하는 액션을 구현할 것이다.

useState, useEffect, addEventListener 활용

React 라이브러리를 사용하는 프로젝트이기에
useState ,useEffect를 사용할 것이다.
useState를 사용하는 이유는 스크롤값을 받아와서 상태에 저장 시키고 props로 내려주는 작업을 할 것 이기 때문이다.

const [position, setPosition] = useState(0); // 가장 상단의 스크롤위치는 0이므로

const onScroll = () => {
  setPosition(window.scrollY); // scrollY 는 상하 스크롤 위치 나타냄 
}

useEffect(() => {
  window.addEventListener('scroll', onScroll); // 스크롤 이벤트 등록
  return () => {
    window.removeEventListener('scroll', onScroll) // 스크롤 이벤트 제거
  }
})

위 처럼 작성하고 console.log(position)을 해보면 스크롤을 움직일 때마다 계속해서 콘솔에 스크롤 위치가 출력된다.

이 값을 가지고 원하던 화면을 완성시켰다.