React의 useState 훅은 함수 컴포넌트에서 상태 관리의 핵심이다. 이 글에서는 useState의 기본 사용법, 그것이 어떻게 동작하는지 간단하게 알아보려 한다.
useState의 형태
상태 값과 그 값을 업데이트하는 함수를 제공한다.
const [state, setState] = useState(initialState); state는 상태 값을 저장하고, setState는 이 상태를 업데이트하는 함수이다. initialState는 상태의 초기값으로, 문자열, 숫자, 객체, 배열 등 어떤 타입의 값도 될 수 있다.
상태 업데이트의 비동기적 특성
useState의 상태 설정 함수를 호출한 후, 즉시 상태 값에 접근하면 아직 업데이트되지 않은 이전 상태 값을 얻게 된다. 이는 상태 설정 함수가 비동기적으로 작동하며, 상태 변경을 즉시 수행하는 것이 아니라 다음 렌더링 사이클에서 처리되기 때문이다. 새 상태 값이나 업데이트 함수는 React의 "업데이트 큐"에 예약되며, 렌더링 시점에 적용된다.
setState 호출은 즉시 상태를 업데이트하지 않는다. React는 성능 최적화를 위해 상태 변경을 배치 처리하기 때문이다. 이 비동기적 처리는 때때로 예상치 못한 결과를 초래할 수 있다. 이를 방지하기 위해 정확이 알아두는 것이 필요하다.
useState는 React에서 가장 기본적이면서도 강력한 상태 관리 도구이다. 그것의 특성을 이해하고, 상태를 효과적으로 관리하는 방법을 숙지하는 것은 모든 React 개발자에게 필수적이라 생각한다.
