[React] 리액트의 useState

useState는 리액트에서 가장 기본적이면서도 강력한 Hook입니다.
이번 글에서는 리액트의 useState에 대해서 살펴보도록 하겠습니다.

useState

useState는 리액트의 Hook 중 하나로, 컴포넌트에서 상태를 관리할 수 있게 해줍니다.

const [count, setCount] = useState(0);

위 예시는 useState의 기본 형태입니다.

이처럼 useState를 사용하면 다양한 타입의 상태관리가 가능하고 여러 상태를 개별적으로 관리할 수 있습니다.

setState

리액트의 상태 업데이트는 비동기적으로 동작합니다.

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

예시 코드의 count 값은 1만 증가합니다.
컴포넌트 내부에서 선언한 handleClick 함수는 count를 참조하는 클로저입니다.
이 함수는 렌더링 될 때마다 생성되기 때문에 참조하는 값은 0으로 고정되어 있습니다.

const handleClick = () => {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
}

예시처럼 콜백을 사용해서 문제를 해결할 수 있습니다.
setState 콜백은 최신 상태를 전달받기 때문입니다.

글을 끝까지 읽어주셔서 감사합니다.
틀린 내용이 있다면 댓글로 지적 부탁드립니다.

Subinggrae