[JavaScript] setTimeout() 을 활용한 렌더링 지연

slight-snow·2023년 4월 20일

목록 보기

2/6

setTimeout()의 구성 요소

setTimeout()은 function, code, delay를 매개변수로 받는다.

setTimeout(() => { //function
	console.log('Hello World!'); //code
}, 1000) //delay

위와 같은 형태로 작성할 수 있는데,
delay에 해당하는 시간이 만료되면 function이나 code를 실행하는 메서드다.

여기서 delay는 밀리초 단위로, 위의 예시의 경우 1000ms = 1s
즉, 1초의 지연 이후에 console.log('Hello World!')를 실행하게 된다.

개인 포트폴리오 페이지를 제작하면서 특정 엘리먼트나 컴포넌트가 몇 초의 시간지연 이후에 렌더링 되면 좋겠다고 생각했고, 다음과 같이 코드를 작성했었다.

function Example() {
  return (
    <>
    {setTimeout(() => {
      	<div>Hello World!</div>
    }, 1000)}
    </>
  )
};

export default Example;

Compiled Successfully! 라는 문구가 등장하며 컴파일 에러를 마주하진 않았으나,
1초 뒤에 등장하길 바랬던 Hello World! 는 어디가고 delay에 작성해둔 숫자만 표시됐다.

setTimeout()이 작동하지 않는 이유

setTimeout()은 JavaScript 함수로, 콜백 되는 함수 역시 일반적인 JavaScript 함수이어야한다. 내가 작성한 코드는 일반적인 함수가 아니라 JSX 태그를 반환하는 코드이기 때문에 정상적으로 작동하지 않는 것이었다.

setTimeout()을 활용한 렌더링 지연

그렇다면 렌더링되는 코드 안에 직접적으로 setTimeout()을 사용하여 렌더링을 지연할 수는 없다는 얘긴데, 방법이 없을까? 생각하던 중 setTimeout()을 렌더링 바깥에 지정해주고, useState와 useEffect를 사용하여 상태의 변환을 간접적으로 활용해보는건 어떨까하는 생각이 들었다.

//01
import React, { useState, useEffect } from 'react';

function Example() {
  //02
  const [show, setShow] = useState(false);
  
  //03
  useEffect(() => {
    setTimeout(() => {
      setShow(true);
    }, 1000)
  }, [])
  
  return (
    <>
    //04
    {show && (
     <div>Hello World!</div>
     )}
    </>
  )
}

export default Example;

차근차근 코드를 살펴보도록 하자!

01

useState와 useEffect를 사용하기 위해 react로부터 가져와 import 해준다.

02

초기의 상태가 false인 show라는 변수와 해당 변수의 상태를 변경하는 상태변경함수 setShow를 useState를 사용하여 선언해준다.

03

useEffect를 사용하여 setTimeout()을 설정해준다. 위의 예시에서는 1000ms, 즉 1초 뒤에 show의 상태가 setShow 상태변경함수를 통해 true가 된다. show가 조건에 따라 true가 됐다가 false가 되는 것을 원한다면, 다음과 같이 작성하면 된다.

useEffect(() => {
  if (조건) {
  	setTimeout(() => {
      상태변경함수(true);
    }, delay)
  } else {
    상태변경함수(false);
}, [])

이렇게 작성해주면 조건에 따라 true와 false를 넘나드는 show를 만들 수 있고,
이를 통해 사용자의 상호작용에 의해 렌더링될 때마다 시간지연을 줄 수 있다.

04

&& 연산자를 통해 둘 다 참인 경우에 렌더링 되도록 한다.
JSX 태그의 경우, 빈 태그를 포함하여 모든 태그는 기본적으로 true값을 지닌다.
즉, {show && <div>Hello World!</div>}에서 JSX 태그에 해당하는 <div>Hello World!</div>는 항상 true이다.
1) show가 true이면 ‣ true && true가 되어
&& 연산의 결과가 true이므로 Hello World! 가 정상적으로 출력되고,
2) show가 false이면 ‣ false && true가 되어
&& 연산의 결과가 false이므로 Hello World! 가 출력되지 않는 것이다.