아미친 내가 잘못생각하였던 거였음.. component의 의미를 잊고있었다,,
하 기본을 잊고 있었다..

잊지말자 Component는 덩어리다. 나좋으라고 함수 분리해 놓는게 아니다.

나의 오류

• component를 잘못생각했다.
• scroll 이벤트의 this는 window이다. 이말은 곧 전역에서 쓰이는 이벤트이다.
• event를 최상위 부모 컴포넌트에 걸어야만 했다.

그래서 다시 시작된 코드짜기,.. 이거하고 집갈꺼임,, 흙흙
우선밥먹고옴 ㅎ

우동을 먹었다 ㅎㅎㅎㅎ
다시 돌아가서 하아,, 어디보자

어제 해결 못함 ㅜㅜ scroll 한번만 일어나는건 아직도 해결못함 ㅜㅜ 잉잉

근데 함수 props로 전달하는 함수는 씀 ㅎㅎㅎ

//App.js
import { useEffect, useRef } from "react";
import MainPage from "./components/MainPage";
import "./styles.css";

export default function App() {
  const useFadeIn = (duration, delay) => {
    if (typeof duration !== "number" && typeof delay !== "number") {
      alert("숫자를 입력하세요");
      return;
    }
    const element = useRef();
    const fadeAnimation = () => {
      const { current } = element;
      current.style.transition = `opacity ${duration}s ${delay}s`;
      current.style.opacity = 1;
      const animationHide = setTimeout(
        () => (current.style.opacity = 0),
        parseInt(`${duration}000`)
      );
      return animationHide;
    };

    useEffect(() => {
      const currentPosition = element.current.getBoundingClientRect().top - 250;
      window.addEventListener("scroll", () => {
        const currentScroll = window.scrollY;
        if (currentScroll >= currentPosition) {
          fadeAnimation();
        }
      });
      return () => {
        window.removeEventListener("scroll", () => {
          clearTimeout(fadeAnimation);
        });
      };
    });

    return {
      ref: element,
      style: { opacity: 0 }
    };
  };
  return (
    <div className="App">
      <MainPage useFadeIn={useFadeIn} />
    </div>
  );
}

//MainPage.jsx
export default function MainPage({ useFadeIn }) {
  const h2FadeIn = useFadeIn(2, 0);

  return (
    <div>
      <h2 {...h2FadeIn}>Testting Scroll Animation Using React</h2>
    </div>
  );
}

이따 리액트 읽는 순서, 코드 분석할꺼임