react 스크롤 감지하여 Nav 고정하기

js
const [isVisible, setIsVisible] = useState(false); // Nav가 보일지말지 정하는 setter

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll); //clean up
    };
  }, []);
  
  // useEffect를 사용하여 scroll을 상태를 감지.

  const handleScroll = () => {
    if (window.scrollY > 30) {
      setIsVisible(true);
    } else {
      setIsVisible(false);
    }
  };
  
  // 스크롤 값이 움직였을때 true 또는 false를 반환

css
.scrollheaderWrap {
  visibility: visible; // 실질적으로 보이게 할지 말지 정하는 요소
  z-index: 100;
  background-color: white;
  position: fixed; // fixed로 고정하여 마우스를 아무리 스크롤해도 고정되게 함.
  width: 100vw;
  height: 50px;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

<div
      style={
        isVisible === true
          ? { visibility: 'visible' }
          : { visibility: 'hidden' }
      }

정리
useEffect로 addEventListener를 사용하여 스크롤 했을때
handleScroll() 이 작동하게 만들어 30이상 움직이면 true를 아니면 false를 set하고
직접적인 css 값을 div에 stlye{}로 접근하여 값을 바꿈.