[TIL #29 WECODE] setInterval 함수 활용

Whoyoung90·2021년 3월 27일
1
post-thumbnail

210326 WECODE #29 1차 프로젝트 LUSH

setInterval() 함수 활용

메인화면 feed에 이미지 여러장이 주기적으로 돌아갈 수 있도록
하기위해 setInterval함수를 사용하였다.

const IMAGE = [
  "/Images/trans1.jpg",
  "/Images/trans2.jpg",
  "/Images/trans3.jpg",
];
  • 이미지 파일을 상수화 시켜 class밖에 위치 시켰다.
  • class안에 넣어두면 렌더링시 계속 불러오게되어 오류가 생기는 원인이 될 수 있기 때문이다.
<img className="realImg" src={IMAGE[this.state.index]} alt="mainFeed"/>

img파일의 src에 IMAGE배열의 index값을 넣어주고

  constructor() {
    super();
    this.state = {
      index: 0,
      intervalID: "",
    };
  • state 초기 값으로 index: 0을 줌으로써 0번째 인덱스 값을 가진 이미지파일을 초기 설정으로 띄운다.
  • src={IMAGE[this.state.index]}src={IMAGE[0]}이렇게 된다는 것!!
  change = () => {
    const { index } = this.state;
   
    if (index === IMAGE.length - 1) {
      this.setState({
        index: 0,
      });
    } else {
      this.setState({
        index: index + 1,
      });
    }
  };
  • setInterval함수를 구현하기 위해 index값을 활용하였다.
  • 함수의 로직처럼 이미지 파일을 index 순으로([0],[1],[2]) 불러오게 되고
  • index === IMAGE.length - 1이 되면 index: 0으로 다시 돌아가는 방식으로, 이미지 파일이 순서대로 반복이 된다
  componentDidMount() {
    const ID = setInterval(() => this.change(), 1500);
    this.setState({ intervalID: ID });
  }

  componentWillUnmount() {
    clearInterval(this.state.intervalID);
  }
  • 이벤트 배너나 타이머 기능을 가진 컴포넌트가 끝이 나면 해당 컴포넌트를 종료시켜야 하는데, 이때 사용하는 메서드가 componentWillUnmount다.
  • 해당 컴포넌트를 종료 시키지 않으면 그대로 메모리 상에서 돌아가게 되어 성능적으로 좋지 못하기 때문에 사용한다.
  • setInterval함수의 첫 인자로 change함수를 넣고, 두번째 인자로 1.5초마다 돌아갈 수 있도록 설정 해주었다.
  • setInterval함수를 다시 ID로 상수화시켜 setState값으로 설정해준다.

setInterval함수를 사용하려면
componentWillUnmount와 같은 이유로 해당 컴포넌트를 종료시키기 위해, clearInterval함수도 같이 사용해야 하는 것을 알게 되었다!

profile
비전공으로 일식 쉐프가 되었듯, 배움에 겸손한 프론트엔드 개발자가 되겠습니다 :)

0개의 댓글