[React]state를 업데이트를 위한 두 가지 방법

이번 글에서는 리액트에서 state를 업데이트하는 두 가지 방법에 대해서 소개한다.

일단 첫 번째 방법이자 기본적인 state를 변경하는 방법은 아래와 같다.

import { useState } from 'react';

export default function Counter() {
	const [count, setCount] = useState(10);
	
	// 카운트 버튼을 클릭하면 count 값이 1 상승한다.
	const handleClick = () => {
		setCount(count + 1);
		setCount(count + 1);
	};
	
	return (
		<>
			<button onClick={handleClick}>카운트</button>
			<p>{count}</p>
		</>
	);
}

handleClick 함수에서 setCount 함수를 2번 호출하고 있기 때문에 카운트 버튼을 클릭할 때마다 count가 2씩 늘어날 것으로 기대하지만 실제로는 그렇지 않다.

setCount 함수의 호출 횟수와 상관없이 카운터는 1씩만 변한다. 그 이유는 리액트에서 state를 갱신하는 방식에 있다.

리액트에서 state는 비동기적으로 업데이트 되기 때문에 state에 새로운 값이 반영되는 것은 이벤트 핸들러가 끝난 후다(state 값이 다시 그려지기 전까지는 state 값이 변경되지 않는다.).

const handleClick = () => {
	setCount(count + 1); // state가 10을 참조
	setCount(count + 1); // state가 10을 참조
}; // 11로 업데이트

이런 현상을 피하기 위해서는 setCount 함수에 함수형 인수를 전달하면 된다.

const handleClick = () => {
	// count에 전달되는 state 값은 그때그때의 최신 값으로 보장된다. 따라서 위에서와 같은
	// 문제를 해결할 수 있다.
	setCount(count => count + 1);
	setCount(count => count + 1);
}; // 12로 업데이트

만약 이벤트 발생 시 현재 값을 기반으로 업데이트 하는 문맥에서는 함수형 구문을 사용하는 것이 바람직하다.