[React]useState

useState란🤔

가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 갖음

const [state, setState] = useState(initialState);

state는 변수, setState는 state값을 수정하는 함수

 

state를 업데이트 하는 방법은 두가지가 있음

// 기존에 사용하던 방식
setState(number + 1);
setState(number + 1);
setState(number + 1); // + 3이 아니라 +1만 처리됨

// 함수형 업데이트 
setState((previousState) => previousState + 1);
setState((previousState) => previousState + 1);
setState((previousState) => previousState + 1); // +3으로 처리됨

 

근데 다르게 동작함!

∵ 리액트는 성능을 위해 단일 데이터로 한번에 처리(일반 업데이트 방식) , 함수형 업데이트는 순차적으로 각각 실행