useState에 대해 알아보자-2

state를 사용하는 이유는?

count = 0;

const [countState, setCountState] = useState(0);
return(
	<button onClick = {() => state += 1}>plus</button>
  	<button onClick = {() => setState(state + 1)}>plus</button>
  	<h2>{count}</h2>
  <h2>{countState}</h2>
)

위와 같은 코드는 state의 값을 적절히 변경시킬 수 있다. 하지만 변경된 값은 화면상에 나타나지 않는다. useState의 상태값은 브라우저가 변경을 감지해서 화면에 적용된다.

상태가 변경될 여지가 있는 값은 state를 이용해서 관리하자!

state는 const로 선언한다

const [state, setState] = useState();

useState는 const로 선언해야한다. 상태값은 setState 함수를 통해서만 업데이트를 하는 것이 원칙인데 이를 let으로 선언하게 될 경우

state = 100;

과 같은 방식으로 state를 업데이트 할 수 있게 된다. 이를 방지하여 setState 함수로만 업데이트하기 위해 const를 사용하여 업데이트를 한다.

setState는 비동기적으로 작동한다

setState는 이벤트 핸들러 안에서 state 값의 변화를 요청하기만 하고, 이벤트 핸들러가 종료되고 바뀐 상태값을 다시 페인트하기를 기다려야한다.

이벤트 핸들러가 종료되는 시점에 setState를 종합하여 한번에 업데이트를하고 중복된 키값이 있다면 맨 마지막 실행값으로 덮어씌워진다.

그렇다면 setState는 왜 비동기적으로 동작할까?

state가 변경되면 이를 화면에 나타내기 위해서 브라우저는 랜더링을 다시 실행하는데 변경되는 state가 많아질수록 리랜더링이 많이 일어나게 되고 이는 복잡한 웹사이트에서 성능 저하를 일으킬 수 있다. 따라서 리액트는 16ms동안의 변경된 상태값을 한번에 모아서 리랜더링하는데 이를 batch update 즉 일괄 업데이트라고 부른다.