스크롤에 따른 이미지 회전시키기

내용

메인 페이지에서 스크롤을 내릴때마다 페이지 중앙에 있는 로고이미지가 조금씩 회전하며 아래로 내려감

결과

코드

import React, { Component } from 'react';
import './Scroll.scss';

class Scroll extends Component {
  constructor() {
    super();
    this.state = { scrollY: 0 };
  }

  detectScroll = () => {
    this.setState({
      scrollY: window.scrollY,
    });
  };

  componentDidMount() {
    window.addEventListener('scroll', this.detectScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.detectScroll);
  }

  render() {
    return (
      <section className="scrollSection">
        <img
          alt="rogoScroll"
          src="/images/LogoScroll.png"
          className="rogoScroll"
          style={{ transform: `rotate(${this.state.scrollY * 0.2}deg)` }}
        />
      </section>
    );
  }
}

export default Scroll;

설명

초기화

//state 에서 scrollY 초기화 (Y는 Y축을 나타냄)
constructor() {
    super();
    this.state = { scrollY: 0 };
  }

스크롤 mount

처음 썼던 코드

//eventListener에서 scroll이벤트가 발생할때 
//setState로 scrollY을 window의 scrollY값으로 변경하는 함수를 호출함
componentDidMount() {
  window.addEventListener('scroll', () => {
    this.setState({ scrollY: window.scrollY });
  });
}

• merge후 메인-> 로그인페이지, 메인-> 상품리스트 페이지로 이동시
  언마운트 하라는 에러발생
  

수정코드

//detectScroll 함수를 만들어서 setState를 시킨다(scrollY: 0 -> scrollY: window.scrollY)
  detectScroll = () => {
    this.setState({
      scrollY: window.scrollY,
    });
  };
//mount될때  add이벤트리스너
  componentDidMount() {
    window.addEventListener('scroll', this.detectScroll);
  }
//unmount될때 remove이벤트리스너 
  componentWillUnmount() {
    window.removeEventListener('scroll', this.detectScroll);
  }

render() {
    return (
      <section className="scrollSection">
        <img
          alt="rogoScroll"
          src="/images/LogoScroll.png"
          className="rogoScroll"
      //동적인 스타일 주기
      //transform의 rotate로 {js{state의 scrollY의 값을 0.2초동안 움직이기 deg는 단위}}
          style={{ transform: `rotate(${this.state.scrollY * 0.2}deg)` }}
        />
      </section>
    );
  }

.scss
.scrollSection {
  //가운데정렬
  display: flex;
  justify-content: center;

  .rogoScroll {
    object-fit: cover;
    max-width: 60vw; //vw, vh뷰포트에 맞게
    max-height: 60vh;
    position: fixed;
    top: 0;
    z-index: 10;
  }
}

transform

요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.
transform은 CSS 시각적 서식 모델의 좌표 공간을 변경한다