setState의 파라미터에 반드시 함수를 넣어야 하는 경우

useState 훅을 이용하면 state와 setState 함수를 얻을 수 있다.

 

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

 

setState 함수에 값을 넣으면 리액트 컴포넌트가 리렌더링 되고 state 값을 바꾼다.

 

setState(1);

 

그러나 간혹 setState 함수에 함수를 넣는 경우가 있다.

 

setState((state) => state + 1);

 

이전의 state 값을 불러와서 1을 더한다는 뜻이다.

아래와 별반 다를 게 없을 것 같다.

 

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

/* ... */

setState(state + 1);

 

useState에서 받는 state 값도 이전의 값일 것이기 때문이다.

 

그러나 state가 여럿일 경우에 다른 state의 변화로 리렌더링이 거의 동시에 이루어지거나 하게 되면

useState 왼쪽의 state가 이전의 값임을 보장할 수 없을 때가 있다.

 

이는 state의 변화가 비동기적으로 일어나기 때문이다. (scheduler에 대해서 알아보기)

setState가 호출되면 바로 state가 바뀌는 게 아니라

리액트에게 변경해야할 state를 알려주는 것이고

리액트는 다른 state의 변경 요청까지를 다 받은 다음

한 번에 묶어서 state를 변경하여 리렌더링시킨다.

(promise나 setTimeout 등을 제외하고 그 안에 실행된 모든 state들을 하나로 묶는다.)

 

때문에 1을 더하는 것과 같이 state의 업데이트가 이전의 값에 의존하는 경우

반드시 setState 함수의 인자에 함수를 넣어야 한다.

그래야만 함수에서 받는 인자가 이전의 값임을 장담할 수 있다.

 

이전의 값에 의존할 필요가 없는 경우에는 쓸데없이 코드가 길어지니 불필요하다.