[React] 화면 크기에 따른 함수제어

---

문제

스크롤 애니메이션이 적용되어 있는 사이트에 반응형을 적용시키며
화면 넓이가 1080px 이하 일 떄는 스크롤 애니메이션 함수가 필요가 없어졌기에 애니메이션 함수가 렌더링 안되게 해야했다.

---

해결

💡 수정 전 Code

이 코드가 화면에 넓이가 1080px 이하일때만 적용되게 만들면 된다.

useEffect(() => {
  const projectList = document.getElementById("projectList");

  gsap.to(".projectsBox", {
    xPercent: -100,
    scrollTrigger: {
      trigger: ".projectsBox",
      start: `${projectList.clientHeight + 150}px 99%`,
      end: `100%-=${projectList.clientHeight}px 10%`,
      scrub: 0.5,
    },
  });
}, []);

💡 수정 후 Code

useEffect(() => {
  // handleResize 함수 정의: 창 크기가 특정 조건을 충족할 때 애니메이션을 실행하는 역할
  const handleResize = () => {
    if (window.innerWidth > 1080) {
      // 창의 너비가 1080px보다 클 때
      const projectList = document.getElementById("projectList");

      gsap.to(".projectsBox", {
        xPercent: -100,
        scrollTrigger: {
          trigger: ".projectsBox",
          start: `${projectList.clientHeight + 150}px 99%`,
          end: `100%-=${projectList.clientHeight}px 10%`,
          scrub: 0.5,
        },
      });
    }
  };

  // 처음 컴포넌트가 마운트될 때 handleResize 함수를 한 번 실행
  handleResize();

  // 창 크기가 변경될 때마다 handleResize 함수를 실행
  window.addEventListener("resize", handleResize);
}, []);

💡 Code 설명

• handleResize()을 호출하는 이유는 사용자가 처음 웹 사이트를 실행했을때 handleResize() 함수를 실행해 애니메이션 적용 여부를 판단하기 위한 것

• window.addEventListener(“resize”, handleResize) 처음 웹 사이트를 실행했을때의 화면 크기가 아닌 사용자가 화면 크기를 조절했을때를 감지하여 애니메이션 적용 여부를 판단

---

마치며

혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요.
지적이나 피드백은 언제나 환영입니다.