리액트 애니메이션 구현

🎯 목표

      - y축 스크롤이 감지되면 이미지 자동 슬라이드 및 텍스트 노출 효과

---

html 구조 (jsx)

<article>
            <div>
                <div>
                    <img
                        src={VisionPro_item02}
                        alt='VisionPro'
                      ></img>
                </div>
                <div></div> //라인 선
                <div>
                    <p>Head bands</p>
                    <p>The Solo Knit Band provides cushioning, breathability, <br />and stretch,and a Fit Dial lets you adjust Apple Vision Pro<br />precisely to your head. </p>
                </div>
                <div></div>  //라인 선
                <div>
                    <p>Power</p>
                    <p>The external battery supports up to 2 hours of <br /> general use and up to 2.5 hours of video playback. </p>
                </div>
           </div>
</article >

 

 

🤔 자바스크립트에서  스크롤 동작을  감지해주는  속성 

window.pageYOffset , Window.scrollY : 스크롤의 수직 값을 픽셀단위로 반환 

 

처음 페이지가 렌더링되고 스크롤 동작이 없으면 디폴트값으로 0을 반환한다. 

MDN에서는 브라우저간 호환성을 위해 window.pageYOffset 사용을 권장한다.

 

 

스크롤 추적 및 관리 로직 생성

스크롤 위치를 감지하고 해당 위치를 상태로 관리해야한다.

    // 현재 스크롤 위치값 저장
    const [scrollPosition, setScrollPosition] = useState(0);

    useEffect(() => {
        // 현재 스크롤 위치값 상태값 업데이트 함수
        const handleScroll = () => {
            const position = window.pageYOffset;
            setScrollPosition(position);
        }

        // 스크롤 이벤트 리스너 등록
        window.addEventListener('scroll', handleScroll);

        // 컴포넌트 언마운트 시 이벤트 리스너 해제
        return () => {
            window.removeEventListener('scroll', handleScroll);
        }
    }, [])

 

1. 현재 스크롤 위치값을 저장하는 상태를 선언. 

    해당페이지에서 스크롤 값은 계속 변하기 때문에 변수가 아닌 상태에 저장함. 

 

2. 현재 스크롤 위치값을 상태에 업데이트 하는 함수.

 

3. 스크롤 이벤트 리스너 등록 

 

4. 컴포넌트 언마운트 시 이벤트 리스너 해제

 

5. 컴포넌트가 처음 마운트될 때만 실행됨