useState, KAKAO MAP

useState를 사용하면서 이전 값을 보장받을 수 있는 방법이 있다.

useState의 snap shot을 이용 하는 방법이다.

 

const [number, setNumber] = useState(0)

<button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>+3</button>

이렇게 사용한다면 기대했던 3이 나오지 않는다. 3번의 setNumber가 모두 0에 1을 더하는 방식으로 동작하기 때문이다.

 

batch: 일괄 처리 떄문이다.

GPT 짱

그렇기 때문에 코드에 명시적으로 이전 값을 사용하도록 하여야 원하는대로 동작할 것이다.

 <button onClick={() => {
        setNumber(n => n + 1);
        setNumber(n => n + 1);
        setNumber(n => n + 1);
      }}>+3</button>

 

setCityDustInfoMarkers([...CityDustInfoMarkers, marker]);

위의 코드 처럼 사용하면서 snapShot을 사용했는데 왜 안될까 하고 생각하고 있었다.

 

 그리고 컴포넌트안에 배열을 정의해도 컴포넌트가 재랜더링 될 때마다 배열도 같이 재정의 될텐데 왜 state를 사용하지 않고 썻었는지 모르겠다.