함수형 업데이트

프로젝트를 진행하면서 다양한 useState를 사용하게 되었는데 코드 리뷰에서 함수형 업데이트를 사용해달라는 피드백이 왔다.
함수형 업데이트는 앞으로도 매우 중요한 개념이기 때문에 이것이 무엇이고 왜 사용해야하는지 알고 지나가도록 하겠다.

아래 보이는 코드의 콘솔값은 어떻게 나올거라고 생각하는가?

const [isLoginMode, setreplace] = useState(0);

  const popSignup = () => {
    setreplace(isLoginMode + 1);
    setreplace(isLoginMode + 1);
    setreplace(isLoginMode + 1);
  };
  console.log(isLoginMode);

정답은 1이다.
이유는 state의 비동기적 특성 때문이다. 즉 리액트는 효율적인 렌더링을 위해 여러가지의 변경 요청을 일괄적으로 처리하기 때문에 정확한 순서를 파악하기 어렵다.

그러므로 State의 값을 의도대로 명확히 업데이트를 해주기 위해선 아래와 같은 함수형 업데이트가 필요하다.

  const [isLoginMode, setreplace] = useState(0);

  const popSignup = () => {
    setreplace(isLoginMode => isLoginMode + 1);
    setreplace(isLoginMode => isLoginMode + 1);
    setreplace(isLoginMode => isLoginMode + 1);
  };

콘솔을 찍어보면 3이 나오는 것을 알수 있다.

함수형 업데이트를 사용하지 않아도 되는 상황이 있는데 아래와 같이 현재 state값에 상관없이 지정해야할 값이 명확한 경우에는 함수형 업데이트가 필요 없다.

  const [isLoginMode, setreplace] = useState(false);

  const popSignup = () => {
    setreplace(true);
  };