React ) useScroll / 노마드코더말고 직접 만든 스크롤 훅

섹션마다 스크롤 이벤트를 더해야해서 custom hook으로 만들어봤다!

노마드 코더와 다른 점은 element가 정해진 지점에 오게되면 true를 반환해서 해당 컴포넌트에서 스타일을 더하게된다. (이건 각자 css에서 정하면 된다 나같은 경우는 fade in)

useScroll

import React, { useState, useEffect } from 'react';

export const useScroll = (el) => { 
  const [isShow, setIsShow] = useState(false);

  useEffect(() => {
    window.addEventListener('scroll', onCheckScroll);
    return () => {
      window.removeEventListener('scroll', onCheckScroll);
    };
  });

  const onCheckScroll = () => {
    const ele = document.querySelector(el);
    const eleY = ele.getBoundingClientRect().y;
    const windowY = Math.ceil(window.innerHeight / 2); //기준은 여기서 고정값으로 넣어도 되고, 또다른 parameter로 받아도 된다.
    if (eleY <= windowY) {
      setIsShow(true);
    }
  };
  return { isShow };
};

사용예시

export const ScrollSection = ({ name, children }) => {
  const { isShow } = useScroll(`.${name}`);
  return <section className={classNames(name, isShow ? 'active' : '')}>{children}</section>;
};