[React] useState 통해 변화된 값이 바로 반영되지 않을 때

state와 useState에 대해서는 이전 글에서 이미 다룬 적이 있다.

https://joylee-developer.tistory.com/144

React Native - State

 

그런데 분명히 지정한 함수를 통해 state를 변경시켰음에도 변화가 바로 반영되지 않는 경우가 있다.

 

import React, { useState } from 'react';
 
const [count, setCount] = useState(0);
 
// 누르면 count가 2씩 증가하는 
setCount(count + 1);
setCount(count + 1);
console.log(count);

누르면 카운트가 하나씩 올라가는 버튼을 만들고 누르면 setCount(count + 1)이 두 번 실행되도록 작성한다.

실제로 버튼을 실행시켜보면 count는 제대로 올라가지 않는다.

 

state를 변화시키는 setter함수(setCount)가 비동기처럼 동작해 바로 상태변수의 변화를 반영하지 못하기 때문에 일어나는 현상이다.

이런 경우에는 setter함수에 함수를 전달해 상태변수의 현재값을 바탕으로 변화하도록 작성해야 한다.

 

setCount(count => count + 1);

위의 코드를 두 번 작성해 버튼을 눌러보면 count가 2씩 증가하는 것을 확인할 수 있다.

 

* 특정 값으로 변화하는 경우는 바로 지정해도 괜찮은데(count(5);)

기존 값을 바탕으로 변화하는 경우는 함수를 전달하는 것이 더 안전하다.