useState로 최신값을 저장하고, 최신값을 반환하는 법

import { useState, useEffect, useCallback } from 'react';

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

  const logCount = useCallback(() => {
    console.log('Count:', count);
  }, [count]);

  useEffect(() => {
    logCount();
  }, [logCount]);

  function handleClick() {
    setCount((prevCount) => prevCount + 1);
  }

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

1.useCallback으로 함수를 래핑함

const logCount = useCallback(() => {
    console.log('Count:', count);
  }, [count]);

2. 의존성 값(logCount)이 변경될 때만, 함수가 호출되도록 useEffect에 추가

useEffect(() => {
    logCount();
  }, [logCount]);

3. 이전 값(prevState)이 반영된 최신값으로 저장되도록, 함수형태로 set함수로 정의

 function handleClick() {
    setCount((prevCount) => prevCount + 1);
  }