useState에서 이전 값을 참조하여 state값 변경하기

버튼을 클릭하여 이전 state 값을 2로 업데이트 하는 방법

---

• 올바른 방법
  • 정상적으로 2씩 state가 증가됨.

function App() {
    const [state, setState] = useState(0);

    const onClick = () => {
        useState((prev) => prev + 1);
        useState((prev) => prev + 1);
    };
    
    <h1>{state}</h1>
    <button onClick={onClick}>Count Up</button>
}

• 올바르지 않은 방법
  • 1씩 증가됨.

function App() {
    const [state, setState] = useState(0);

    const onClick = () => {
        useState(state + 1);
        useState(state + 1);
    };
    
    <h1>{state}</h1>
    <button onClick={onClick}>Count Up</button>
}

 

왜 1씩 증가되는가?

---

React에서는 보다 나은 성능을 위하여 상태 업데이트는 비동기로 동작하기 때문에 setState()의 여러 호출이 한 번만 실행될 수 있다.

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

State and Lifecycle – React

 

따라서 setState()를 이용하여 값을 초기화하는 것이 아닌 이전 값을 기반으로 값을 변경하는 경우 첫 번째 인수를 함수로 받고 그 함수의 첫 번째 인수를 통해 값을 변경한다.

https://reactjs.org/docs/hooks-reference.html#functional-updates

Hooks API Reference – React