useState( ) + useEffect( ) 사용 예시

선택한 테마(light/dark)를 브라우저에 저장(localStorage)하고, 사이트 전체에 해당 테마를 적용하기 위함

  import { useEffect, useState } from "react";
  

  const [theme, setTheme] = useState(
    localStorage.getItem("theme") ? localStorage.getItem("theme") : "light"
  );
  const element = document.documentElement;
  // 렌더링될 때 실행
  useEffect(() => {
    if (theme === "dark") {
      element.classList.add("dark");
      // 페이지 새로고침해도 테마 기억
      localStorage.setItem("theme", "dark");
      document.body.classList.add("dark");
    } else {
      element.classList.remove("dark");
      localStorage.setItem("theme", "light");
      document.body.classList.remove("dark");
    }
  }, [theme]);

스크롤 시 Navbar 상단에 고정(sticky)시키거나 스타일을 변화시키기 위함

window.scrollY > 0

• 페이지가 맨 위(0) 를 벗어나는 순간 → 스크롤했다고 판단
• setSticky(true) 실행 → Navbar에 sticky 스타일 추가

window.addEventListener("scroll", handleScroll)

• 이벤트 발생(스크롤 감지) 시 handleScroll 실행 → Navbar 상태 업데이트

Cleanup (return 문)

• 컴포넌트가 사라질 때 이벤트를 제거해 메모리 누수를 방지

import { useEffect, useState } from "react";
  
    /*   배열 구조 분해 할당(array destructuring)
  useState()는 배열 반환
  sticky 초기값: false, setSticky 초기값: function
  useState() 시 React가 자동으로 렌더링(바뀐 값 화면에 다시 적용) */
  const [sticky, setSticky] = useState(false);
  /*  useEffect({}, [])
  {함수(콜백): 실행할 코드}, [ 비었음: 한 번만 실행/없음: 렌더링될 때마다 실행/
  n:n값이 바뀔 때마다 실행 => useState(0); 0++ 됨 ] 
  useEffect는 렌더링 후 callback(실행할 *함수)를 받아야 하므로 () => {}, []) 이용
  */
  useEffect(() => {
    const handleScroll = () => {
      // 스크롤 내려가면 true, 아니면 false
      if (window.scrollY > 0) {
        setSticky(true);
      } else setSticky(false);
    };
    // 이벤트 발생(스크롤 감지) 시 handelscroll 실행
    window.addEventListener("scroll", handleScroll);
    // return () => {}: 컴포넌트가 사라질 때 이벤트 직접 제거(cleanup)
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);