[React] setInterval 함수 활용해서 랜덤 이미지 게임 만들기

만들게 된 배경

우리 백엔드 팀원 중 한 명이 코로나로 프로젝트 시작과 동시에 나올 수 없게 되었다... 그래서 메인과 footer를 만들고 난 뒤 할일이 없어 다른 페이지를 창조해서 만들려 했지만 남은 백엔드 팀원이 필수구현사항만 해도 일정이 빠듯할듯하다고 말했다. 그래서 프론트엔드만 할 수 있는 일이 뭘까 고민을 하다가 옛날에 버디버디에 있었던 esc 게임이 생각났다. esc 게임은 랜덤으로 이미지를 띄워주다가 esc를 누르면 정지하는 게임이다. 마침 제과영업점 업체 정보를 공유하는 사이트니깐 먹고픈 메뉴가 없을 때 이 랜덤 이미지 게임을 이용해서 사람들이 추천 받으면 좋겠다고 생각했다.

 

추억의 esc 게임

 

그렇다면 이미지를 어떻게 띄워줄 것인가? 이미지가 일정 시점마다 나타나야 하니 setTimeout()을 활용하고, random으로 이미지를 띄워주는 건 Math.random 매서드를 쓰면 될 것 같았다. 이미지를 멈추게 하는 건clearTimeout()을 쓰면 될 듯했다. 

 

작성한 코드

import React, { useState } from 'react';

const RandomImg = () => {
  const [currentImageNum, setCurrentImageNum] = useState(1);

  const changeBackground = () => {
    setCurrentImageNum(Math.floor(Math.random() * imgTitle.length));
  };

  const randomGame = setTimeout(() => {
    changeBackground();
  }, 100);

  const stopRandomGame = e => {
    clearTimeout(randomGame);
  };

  return (
    <>
      <RandomTitle>이거 어때?</RandomTitle>
      <Background className="background">
        <Wrapper
          src={`/images/bread${currentImageNum}.jpg`}
          alt="빵 랜덤 이미지"
          onClick={stopRandomGame}
        />
        <ImgTitle>{imgTitle[currentImageNum]}</ImgTitle>
      </Background>
    </>
  );
};

export default RandomImg;

1. useState를 이용해서 currentImageNum을 계속 바꾸고, 그때그때 currentImageNum에 해당되는 경로의 이미지를 화면에 보여주도록 만들었다.
2. Math.random() + imgTitle.length 를 이용해서 imgTitle의 길이 내에서 랜덤한 숫자가 만들어지도록 관리했다.
3. setTimeout()으로 100ms마다 이미지가 바뀌게 만들었다.
4. 화면을 클릭할 경우 clearTimeout()으로 이미지가 멈추게 만들었다.
5. 이미지 파일명을 bread1, bread2.. 이렇게 통일성 있게 만든 덕에 src 경로를 쉽게 활용할 수 있었다.

참고로 이미지 파일들은 컴포넌트 외부에 const imgTitle = [
'파이','잠봉뵈르','와플', .. , '동물쿠키'] 선언된 상태이다.

결과물

결과물

 

짜잔~~ 내 머릿속에 존재하던 것을 실제로 구현해내니 내가 많이 성장했다는 게 느껴져서 매우매우 뿌듯했다😛 코딩을 배우지 않았더라면 이런 간단한 결과물도 만들어내지 못했을 것이다. 한 번씩 페이지의 한 공간을 무엇으로 채울 수 있을지 고민해보고, 재밌는 기능이 없을까 생각해봐야겠다!