[Trouble Shootings #1] React - 콜백 함수 내부에서 여러 setState 함수 호출 시 업데이트 순서 에러

얼마 전 회사에서 작업을 하다가 onClick 같은 이벤트 핸들러 (콜백 함수) 내부에서

 

두 가지의 setState (setter) 함수를 호출시키는 작업을 했던 적이 있습니다.

 

사실 함수는 하나의 일만 수행하는 것이 기본적인 원칙이라 많이 들어서 제가 올바르게 코딩을 한 것 같지는 않았습니다.

 

하지만 의식의 흐름대로 하다 보니깐 그런 작업이 일어났는데

 

업데이트 순서에 대한 에러가 발생하였습니다.

 

아무래도 당연한 것이 useState 훅으로부터 반환되는 setter 함수는 비동기적으로 발생하는 것으로 알고 있습니다.

 

그래서 업데이트 순서가 제 생각대로 올바르게 동기식으로 이뤄지지 않는 것입니다.

 

구글링 해본 결과 즉시 실행 함수를 이용해서 각각 호출하면 된다 라고 하였지만 제 경우는 해결이 안되었습니다.

 

계속 찾아본 결과 끝내 setter 함수 내부에서 또 다른 setter 함수를 호출하여 함수 실행 컨텍스트의 순서에 따라

 

동기적으로 처리해서 작업을 원활히 해결하였지만 (마치 콜백 헬 같은 느낌도 들긴 하였습니다.)

 

애초에 이런 트러블 이슈가 발생한 부분이 제가 코드를 잘못 설계하고 작성한 것 같다는 생각이 들었습니다.

 

좀 더 나은 코드를 작성하는 방법이 분명 존재할 것 같은데 조금 더 고민이 필요할 것 같습니다.

 

추가적으로 useState 기본 내장 훅 내부에서 디바운스 및 쓰로틀링 개념이 이용된다는 사실을 최근에

 

시니어코딩 영상을 보고 알게 되었는데 기본적인 내장 훅이나 다른 라이브러리를 이용할 때

 

좀 더 깊이 있게 이해하고 학습이 필요하겠다는 생각도 많이 했습니다.

---

p.s 1) 역시 문제가 발생하였습니다.
setter 함수 하나 안에 context API 등 몇 가지 함수를 2~3개 넣으니 순서가 꼬여버리고 이상해졌습니다.

결국 useEffect 훅을 이용하여 해결하였습니다.

의존성이 높도록 함수나 기능을 구현하면 문제가 발생하는 것 같습니다.

최대한 함수나 그 내부에서는 한 가지 일만 하도록 해야 side-effect 발생이 줄어드는 것 같습니다. (22.09.20 updated)