기본적인 hook 사용법은 알기 때문에 좀더 깊게 알아 보려고 한다

useState

함수형 컴포넌트에서 state값을 관리하기 위해 사용하는 hook

배치

리액트는 상태값 변경을 거의 배치로 처리한다
📌 리액트 내부에서 관리하는 이벤트 처리 함수에 대해서만 배치로 처리한다
배치는 일을 한번에 모아서 하는거라고 생각하면 된다

setCount(count + 1);
setCount(count + 1);

예를 들어 아래의 결과를 예측해 보면
당연히 count가 2가 증가했을 것이다.
하지만 배치로 처리하기 때문에 비동기로 작업해서 1만 증가한다
2를 증가시키기 위해선 아래 처럼 함수로 작업해야 한다

setCount(prev => prev + 1);
setCount(prev => prev + 1);

이건 함수가 호출 될때 직전의 상태값을 받아 오기 때문에 2가 증가한다.

순서

상태값 변경 함수는 비동기로 처리되지만 순서가 보장된다.

값 덮어쓰기

useState의 상태값 변경 함수는 이전 상태값을 덮어 쓴다.
그렇기 때문에 아래처럼 ...을 사용해야 한다.

setState({...state, name : e.target.value})

📌 상태값을 하나의 객체로 관리할 때는 useReducer를 사용하는게 좋다