[0]react 스크롤시 해당 위치(id)로 이동하기 : <a href = "#tagname"> ,scrollEvent

1. #n (아이디값으로 해당 페이지 내 위치 도달, html에 전체 스크롤시 부드럽게 적용)

import React from "react";

export const AtagId = () => {
  const content =
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. ";

  return (
    <div className="padding10 scrollbehavior">
      <div className="tab flexcenter padding10 cursorpointer">
        <div className="border padding10 hoveryellow ">
          <a href="#Title1">Title1</a>
        </div>
        <div className="border padding10 hoveryellow">
          <a href="#Title2">Title2</a>
        </div>
        <div className="border padding10 hoveryellow">
          <a href="#Title3">Title3</a>
        </div>
      </div>
      <div className="card padding10 heightfull" id="Title1">
        <h1>Title1</h1>
        <p>{content}</p>
      </div>
      <div className="card padding10 heightfull marginTop40" id="Title2">
        <h1>Title2</h1>
        <p>{content}</p>
      </div>
      <div className="card padding10 heightfull marginTop40" id="Title3">
        <h1>Title3</h1>
        <p>{content}</p>
      </div>
    </div>
  );
};

html smooth scroll

html {
  scroll-behavior: smooth;
}

2.스크롤시 스크롤값 반영하여 액션,css 취하기

import React, { useEffect, useState } from "react";
  
  const [isScroll, setIsScroll] = useState(false);
  
    const onScroll = () => {
    setIsScroll(window.scrollY || window.pageYOffset > 0 ? true : false);
  };
  
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, [isScroll]);
  
  return(
  <>
  {isScroll?
  "스크롤이 시작"
  :
  "스크롤 미실행"
  }
  </>
  )