Daily #2, react - setState

평소 Vanlia나 Vue 정도만 조금 다루어봐서인지 React의 Hook은 약간 이해하기 어려웠습니다. Vanila는 뭐 그렇다 해도, Vue는 무언가 내가 신경쓰지 않아도 알아서 해주는 매지컬한 부분이 많았던 것 같아서 편하게 사용했었죠.

 

무튼, setState는 state의 상태를 업데이트하는 비동기 메소드입니다. setState의 신기한 점은, 상태를 변경해도 곧바로 상태값이 바뀌지 않는다는 것이죠. 어떤 원리인지는 아직 확인이 안되지만. 한 번에 여러 번의 setState를 사용해 state를 변경하려 한다면 이걸 한 번에 합쳐서, 그리고 가장 마지막의 변경내용만을 적용하게 됩니다.

const [val, setVal] = useState(0);

setVal(val+1);
setVal(val+1);
setVal(val+1);

위 코드의 결과값은, 3이 아니라 1이 됩니다. 가장 마지막의 내용만 반영하기 때문이죠. 나름 React 자체적으로 효율적으로 사용하기 위해 강제해놓은건지는 모르겠습니다. 그렇다면, 여러 번 반영하기 위해서는 어떻게 해야할까요. 시간 차이를 두어야할까요? setTimeout을 걸어 시간을 두어도 결국엔 같은 계층에 있는 setState를 묶어서 처리하는 것은 변함이 없습니다.

 

그래서 이전 상태에 기반해 상태를 변경하기 위해서는 updater 함수를 사용해야합니다. setState(updater, [callback])을 사용하면 되는데, 하단 코드를 실행해본다면 결과값이 3이 출력되어 하단 각각의 setVal들이 적용된 뒤 실행되는 것을 보장할 수 있죠. 또 다른 방법은, useEffect를 사용하는 것인데, setState를 통해 값이 변경되고 다시 렌더링되면 useEffect는 변화를 감지하고 실행되는 함수이기에 한 번에 여러 번 상태를 변경할 수 있게 됩니다. 요지는, 렌더링되고 나서 상태값을 변화시키기에 가능한 것이죠. 

const [val, setVal] = useState(0);

setVal((val) => {val+1});
setVal((val) => {val+1});
setVal((val) => {val+1});