state의 비동기 처리, re-rendering 개념

앞에서 썼던 React components와 state(https://velog.io/@dev_lynn/FE-React-Component%EC%99%80-StateHooks)는 state에 대한 개념과 setState,useState 사용하는 방법에 대해서만 간략하게 작성했다.

여기서는 state에서 발생할 수 있는 문제점과 해결 방법에 대해 이해한 대로 써보려고 한다.

먼저 state를 변경할 수 있는 setState의 특징은 state 값이 비동기로 처리된다는 점이다.
즉, setState를 호출하자마자 바로 실행되는 것이 아니라 해당 코드의 함수가 모두 실행된 후에 처리된다고 볼 수 있다.

버튼을 누를 때마다 카운터 변수가 0부터 시작해서 하나씩 증가하는 페이지를 예시로 작성해보았다.

일단 count+1을 하기 전에 숫자를 직접 넣어 하드코딩을 한 모습이다.
setCount(1),setCount(2),setCount(3)을 그때그때 렌더링하는 것이 아니라 setCount(1)을 실행하고, setCount(2) 실행한 다음, setCount(3)을 실행한 뒤에야 최종적으로 3만 화면에 렌더링하는 것을 알 수 있다.

import { useState } from "react";

export default function counterStatePage() {
  const [count, setCount] = useState(0);

  function counter() {
    setCount(1);
    setCount(2);
    setCount(3);
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={counter}>count up</button>
    </div>
  );
}

이제 원래 만드려고 했던 count 변수에 1씩 증가하는 페이지의 코드이다.

export default function counterStatePage() {
  const [count, setCount] = useState(0);

  function counter() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={counter}>count up</button>
    </div>
  );
}

동기적으로 만약에 작동한다면 counter 함수 안에 있던 setCount가 3개 있기 때문에 이를 순차적으로 실행해서 바로 3을 더하는 모습이 나왔을 것이다. 하지만 비동기로 처리되어 한 번에 1만 더할 수 있게 된다.

이렇게 비동기적으로 실행된 state를 가지고 변경된 사항에 대해 다시 렌더링하게 된다. (rerendering)

state가 변할 때마다 리렌더링되는 것은 매우 비효율적이라서 해결할 수 있는 방법이 있는데 공부하고 숙지하는 대로 글을 올려보려 한다.