React 여러 이미지 랜덤으로 바꾸기

Today

인스타그램 웹사이트를 클론코딩 하면서 로그인 화면을 실제 인스타그램 로그인 화면처럼 보이도록 해보고 싶었다. 그리고 실제 인스타그램 웹사이트에서는 Login화면에서 핸드폰 속 사진 이미지가 랜덤으로 돌아가며 바뀌는 부분이 있어서 이 부분을 구현해 보려고 하였다.

Login화면

Try

• 이미지태그를 만들어 핸드폰 사이즈속에 들어갈 사이즈크기와 위치값을 잡아서 틀을 만들어 준 후, 여러 이미지를 가져오기 위해 useState를 사용해 변경된 값도 가져올 수 있게 지정해주었다.

Login.js

• 가져오고 싶은 여러 사진을 하나의 배열을 만들어 담아두었다.
• showImage()라는 함수를 만들어 준 뒤, 이미지가 랜덤으로 바뀌도록 이미지 배열의 길이만큼의 랜덤함수를 만들어 주고, useState를 활용해 바뀌는 값에 설정해주었다.
• setTimeout()을 활용해 5초마다 함수가 재실행 되도록 해주었다.
• 마지막으로 window.onload를 사용하여 프로그램 실행시 자동실행이 되도록 만들어 주었다.

Login.js

Error

그런데, 실행을 시키니 아래와 같이 리렌더링이 너무 많다는 글과 함께, React는 무한반복 상태를 방지하기 위해 렌더 가능한 숫자를 제한한다는 내용이었다.  코드를 보니 showImage함수가 5초마다 발생하며 window.onload로 여러번 페이지가 렌더링되어 일어난 문제라고 생각이 들었다. 

완성 후 실행했을때의 에러

Solution

그래서, window.onload부분을 React.useEffect()로 감싸주어 한번만 실행이 되도록 하였고, 5초마다 showImage가 실행되어도 window.onload는 한번만 실행되고 showImage()함수만 5초마다 실행되게 되어, 에러는 더이상 나타나지 않고 아래의 그림과 같이 지정해준 시간마다 랜덤으로 이미지가 나오도록 되었다.

Login.js 수정

완성된 화면