React에서 useState는 상태를 추가하고 관리할 수 있게 해주는 hook입니다. 상태란 시간이 지남에 따라 변경될 수 있는 값으로 이 값을 저장하고 관리하는 데 useState를 사용합니다.
useState 사용법
먼저 useState의 사용법은 다음과 같습니다.
const [상태 변수, 상태 변경 함수] = useState(초기값);
useState함수에 초기 상태 값을 매개변수로 호출하면 배열이 반환됩니다. 이 배열에는 현재 값을 나타내는 상태 변수와 상태 값을 변경하는데 사용하는 함수가 들어가 있습니다. 예를 들면 다음과 같습니다.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const addCount = () => {
setCount(1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={addCount}>Add</button>
</div>
);
}
위에서 예시로 작성한 코드를 한줄씩 살펴보겠습니다.
먼저 useState hook를 사용하기 위해 react로부터 useState를 import 해주어야 합니다.
import React, { useState } from 'react';
useState를 사용하여 초기 상태 값이 0인 count라는 상태 변수를 생성합니다.
const [count, setCount] = useState(0);
상태 변수를 수정해주는 setCount 함수를 사용하여 버튼을 클릭하면 count 상태 변수 값이 1이 됩니다.
const addCount = () => {
setCount(1);
}React에서 구성 요소 또한 리렌더링되어 count값이 1로 UI에 업데이트됩니다.
<p>Count: {count}</p>
상태를 업데이트 하는 방법
상태 변경 함수를 사용하여 상태를 업데이트하는 방법에는 두 가지가 있습니다.
1. 값 업데이트
먼저 값을 전달해 업데이트하는 방법으로 위 예시를 통해 살펴보았습니다.
const addCount = () => {
setCount(1);
}2. 함수형 업데이트
다음 함수형 업데이트 방식입니다. 만약 상태 변수 값을 계속해서 최신 값으로 유지시켜야 한다면 이 방식을 사용해야 합니다. 함수형 업데이트에서는 이전 상태를 인수로 받고 새 상태를 반환하는 함수를 인자로 사용합니다.
const addCount = () => {
setCount(prevCount => prevCount + 1);
}
여기서 궁금한 점이 생길 수 있습니다. count에 바로 1을 더해주면 안되나요라고 말이죠.
아래와 같이 setCount 함수를 연속해서 2번 호출해보면 그 이유를 알 수 있습니다. count 상태 변수 값이 최종적으로 2가 증가하겠구나 예상했지만 실제 count 상태 변수는 1만 증가합니다.
const addCount = () => {
setCount(count + 1);
setCount(count + 1);
}
이는 setCount 함수를 호출하는 시간과 상태가 실제로 업데이트되는 사이에 지연이 있을 수 있기 때문입니다. 결국 첫번째와 두번째 setCount 함수가 호출되는 시점 모두 count 값은 업데이트 지연으로 0인 상태가 되고 최종 1만 더해지는 것입니다. React의 상태 변경 함수는 비동기적으로 동작한다는 걸 기억해야 합니다.
따라서 상태 변경 함수에 함수형 업데이트 방식을 사용하는 것은 버그를 방지하고 성능을 개선하는 데 도움이 될 수 있으므로 React에서 useState로 작업할 때 권장합니다.