리액트 useState 와 useEffect 활용하여 Parallax Scroll 만들기

오늘은 Parallax Scroll에 대해서 만들어 볼겁니다.

특정위치에서 스크롤 할경우 애니메이션을 만들수있는 그런 방법입니다.

코드

const [currentx,movex]=useState(0);// 유즈 스테이트를 사용시 currentx 는 현재 위치=0 move스크롤 위치에따라 이벤트 사용함
    function Scroll(){
        movex(window.scrollY); //수직 방향의 크롤 값 
    }
    useEffect(()=>{
        window.addEventListener('scroll',Scroll);// Scroll 함수에 스크롤 이벤트 붙임
        return()=>{
            window.removeEventListener('scroll',Scroll);//사용안할시 이벤트 없앰
        };
    },[])// 한번만 실행하기위해 배열

설명

리액트 훅을 사용해서 코드를 짜보았습니다.

여기서 배열에있는 currentx, 와 movex는 현재 위치와 이동할 위치를 알려줍니다.

useState(0)은 currentX를 0으로 간주합니다.

그럼 여기서 state 값을 바꿀려면 useEffect를 사용해야겠죠?

그럼 useEffect(()->{},[]) 한번만 이벤트 발생하면되서 빈 배열을 넣어줍니다

자 이제 Scroll 함수에서 아까만든 movex는 스크롤값을 넣어주면되서

movex(window.scorllY) 해주시면됩니다.

그리고 밑에 리턴후에 제거된이벤틀 리스너를 넣어주는 이유는 저걸 안넣게되면

amount된후 계속 실행이 되기때문에 해줘야합니다. 그럼 저걸 넣게 되면

component 가 amount 되기 직전에 이벤트가 제거됩니다.

그럼 이제 스타일로 애니메이션을 만들어보죠

"style={{transform:`translateX(${(currentx-2800)/40}vw)`}}

스크롤되는 수치에서 위치가 -2800px 에있는 위치를 반환되도록 하게 되고 /40은 속도를 얘기해줍니다.

오늘 첫 포스팅은 react에서 Parallax 스크롤 대해서 배워 보았는되요 도움이 되셨으면 좋겠습니다