[react] 리액트 hooks :: setInterval 사용시 문제점과 해결 방법 - ①

지금 다뤄볼 내용은 리액트에 대한 최소한의 지식이 있어야 이해가 가능 할 수 있는 부분이다.

 

setInterval 함수를 사용했을 때 리액트 내부에서 일어나는 현상과 그런 현상이 발생했을 때 어떻게 대처하는 것이 좋을지 예시를 통해서 알아보도록 하자.

 

우선 결론적으로 말해서 react와 setInterval 함수가 잘 어울리지 않는다.

 

그래서 아무생각 없이 자바스크립트 코드를 삽입하는 식으로 setInterval 함수를 사용했다면 이런저런 자잘한 버그가 생겼을 수 있다.

 

 

<setInterval 을 이용해서 1초마다 글씨 크기 키우기 예제>

아래 코드를 한번 보자.

 

아래 상황은 시간이 지남에 따라 '안녕'이라는 글씨의 폰트 사이즈가 점점 커지는 예시이다.

 

import React, { useState } from "react";

function App() {
  const [fontState, setFontState] = useState(5);

  setInterval(() => {
    setFontState(fontState + 1);
  }, 1000);
  return (
    <div>
      <div style={{ fontSize: fontState + "px" }}>안녕</div>
    </div>
  );
}

export default App;

 

 

 

그러나 위 코드는 잘못된 코드이다. 문법적으로 봤을 때 에러가 있는 것은 아니지만 저런식으로 코드를 작성하면 계속되는 렌더링때문에

원하는 결과를 나타낼 수 없다.

결과 보기

 

 

 

useEffect 훅을 이용해서 렌더링 방지하기

 

그래서 이에 대한 해결 방법으로 useEffect 훅을 사용해보도록 하자.

 

useEffect 에 대한 최소한의 이해가 필요하다.

 

 

 

import React, { useState, useEffect } from "react";

function App() {
  const [fontState, setFontState] = useState(5);

  useEffect(() => {
    setInterval(() => {
      setFontState(fontState + 1);
    }, 1000);
  }, []);

  return (
    <div>
      <div style={{ fontSize: fontState + "px" }}>안녕</div>
    </div>
  );
}

export default App;

 

위와 같이 사용하면 첫 렌더링때 한번만 적용되고 그 이후에는 렌더링이 되지 않는다.

 

그래서 이렇게 코드를 작성하면 첫번째 케이스처럼 계속해서 렌더링이 되어 적용되는 것은 막을 수 있지만 fontState는 첫 렌더링

 

당시의 값인 5가 유지된다. 그러므로 폰트 사이즈는 6px로 고정이 된다.

결과 보기

 

 

 

useRef 훅을 이용하기

 

그래서 위와같은 현상을 방지하기 위해서 useRef 훅을 이용할 수 있다.

 

useRef에 대한 지식이 필요하다.

 

import React, { useState, useEffect, useRef } from "react";

function App() {
  const [fontState, setFontState] = useState(5);
  const fontRef = useRef(5);

  useEffect(() => {
    setInterval(() => {
      setFontState((fontRef.current += 1));
    }, 1000);
  }, []);

  return (
    <div>
      <div style={{ fontSize: fontState + "px" }}>안녕</div>
    </div>
  );
}

export default App;

 

위와 같이 작성하면 원하는대로의 결과를 얻을 수 있다.

 

useRef를 이용해서 상태를 기억하고, useRef의 current 값을 이용해 계속 증가된 값을 적용시킬 수 있다.

결과 보기

 

 

딜레이가 위의 케이스처럼 1000으로 고정되도 되는 상황이라면 이렇게만 해도 문제는 없다. 그러나 만약 다른 페이지로 이동을 하거나 모드에 따라서 화면 렌더링을 변경해 주는 등의 작업을 해 줘야 할 때에는 상황이 조금 달라질 수도 있다.

 

2편에서는 그런 상황에 어떤 방법으로 대처하면 좋을 지 알아보도록 하겠다.