[React] setState로 바꾼 state의 값을 코드 내부에서 바로 쓰는법

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleButtonClick = () => {
    setCount(prev + 1, () => {
      // 상태 업데이트가 완료된 후에 실행되는 콜백 함수
      console.log('Count after update:', count);
    });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleButtonClick}>Increment Count</button>
    </div>
  );
}

export default MyComponent;

setState로 값을 바꾼 후 바로 콜백함수를 넣어주면 된다.

UseEffect를 사용해서 console을 찍는 것과 이전 코드의 차이

첫 번째 코드 블록은 setState의 함수 인자로 이전 상태(prevData)를 사용하여 새로운 상태(newData)를 계산하고, 그 후에 console.log로 상태 업데이트를 로깅하는 코드이다.

두 번째 코드 블록은 useEffect를 사용하여 state 상태가 업데이트될 때마다 실행되는 콜백 함수를 등록하는 것이다.

두 코드 블록의 차이는 주로 실행 시기와 목적에 있다.

---

setState 콜백 내부의 console.log:

상태를 업데이트하는 코드 내부에서 바로 로깅이 이루어진다.

useEffect 콜백 내부의 console.log:

이 코드는 state의 상태가 변경될 때마다 실행된다.

---

useEffect는 컴포넌트의 렌더링이 끝난 이후 비동기적으로 실행되는 효과를 제어한다.

즉 state 상태가 업데이트될 때마다 실행되는 것을 목적으로 한다.

또한 렌더링과 상관없이 특정 상태가 업데이트될 때만 실행된다.

---

결론적으로 첫 번째 코드 블록은 setState 내부에서 상태 업데이트와 로깅을 동시에 수행하고,

두 번째 코드 블록은 useEffect를 사용하여 특정 상태가 업데이트될 때만 실행되는 콜백을 등록한다.

특히 비동기 작업이나 효과를 조절하려는 경우 useEffect를 사용하는 것이 더 적절할 수 있다.