[React] useState는 비동기적

useEffect

JavaScript에서 useState 함수는 비동기적으로 작동한다.
예시로, setProductName 함수가 호출되어도 해당 상태(productName)의 값이 즉시 업데이트되지 않을 수 있다. 이러한 비동기 작동 때문에 console.log("productName", productName);에서의 출력은 이전 값이 표시될 수 있다.

만약 실제 업데이트된 productName 값을 확인하고 싶다면, useEffect 함수의 콜백 함수 내에서 로그를 남기면 된다. setProductName 함수 호출 이후에 실행되는 useEffect 블록에서 productName 값을 출력하면, 업데이트된 값이 정확하게 나타날 것이다.

계속 업데이트되지 않은 값이 나와서 이유를 몰랐는데 간단한 거였다. useEffect를 사용하면 된다.

import React, {useEffect} from 'react';

useEffect(() => {
  console.log("deps 위치에 빈 배열을 넣으면 mount 시에만 실행된다");
}, []);

useEffect(() => {
  console.log("아니라면 리렌더링 될때마다 실행된다");
});

useEffect(() => {
  console.log("마운트 + 배열 안의 컴포넌트가 없데이트될때마다 실행된다");
}, [productName]);

useEffect(() => {
  if (!mounted.current) {
    mounted.current = true;
  } else {
    //ajax
  }
  console.log("배열 안의 컴포넌트가 없데이트될때마다 실행된다 (마운트 시는 x)");
}, [productName]);

deps에 특정 값을 넣게 되면
마운트 + 컴포넌트 업데이트 + 업데이트 직전 + 언마운트
시에 모두 호출된다.

참고: https://xiubindev.tistory.com/100