[TIL][24.01.25] Project - 전역 상태 비동기 업데이트

전역 상태 즉각 업데이트에서 문제를 겪었다가 짧은 코드인데, 나중에 또 까먹을 때 활용하기 좋아 기록한다.
zustand나 useState가 즉시 업데이트되지 않는 이유는 React의 업데이트는 비동기적으로 처리되기 때문이다.

useState 함수 호출은 컴포넌트의 상태를 변경하는 것을 예약(reserving)하는데,

이 예약된 상태 변경은 나중에 React가 업데이트를 수행할 때 일어난다.
React는 성능을 향상시키기 위해 여러 상태 변경을 일괄 처리하고, 일괄 처리된 결과를 화면에 반영한다.

이 과정에서 비동기 처리가 사용되며, 업데이트는 다음 렌더링 사이클에서 반영된다고 한다.

 

setMenuOptions([...menuOptions, { menu_id: addData[0].id }] as MenuOptionWithDetail[]);

 

배열로 이뤄진 상태에서 키값이 menu_id인 애들만 찾아서 변경하고 싶었다. 근데 값이 변경되지 않을 뿐더러,

자꾸 새로운 객체로 들어가서 코드를 수십번 바꿨다. 사용하는 곳과 전역상태 관리하는 곳에서... 새로운 객체로 들어가기에 코드가 잘못된거라고 생각들어서.

그치만 아무리봐도 알맞게 한거 같아서 짜증나서 menuOptions를 map 돌려서 강제로 바꾸고 다시 집어넣어야지 했다.

근데...

const newMenuOptions = menuOptions.map(option => (option.menu_id = addData[0].id));
setMenuOptions([...menuOptions, newMenuOptions] as MenuOptionWithDetail[]);

 

위의 코드와 내가 볼땐 너무 기능적으로 똑같다고 생각했다.

근데 왠걸. 너무 잘 구현된다..

이거 한 줄 때문에 몇시간을 날린건지...

 

담부턴 짜증나서 아무거나 해보도록 해야겠다