zustand 사용 하면서 생긴 일

현재 프로젝트에서 공통된 상태를 여러 컴포넌트에서 관리해야 하는 상황이 생겨서 zustand를 사용하게 되었습니다.

하지만 생각지도 못한 문제중 고민이 되는 부분이 생겼는데 아래코드로 설명해보겠습니다.
최대한 문제에 대한 이해를 위해 한글을 사용해보았습니다

const zusatndStore = create<...>()(
	...
    상태변경: async ({상태}) => {
        let result = {
          status: false,
        };
        try {
          const { result } = await axios.get("/test",{상태});
          if (result === "fail") throw Error(result);
          
          result.status = true;
        } catch (error) {
          console.log(error);
        }
        return result;
      });
	... 

//상태 : hi
const {상태, 상태변경} = zusatndStore(state => state);

const 호출 = () => {
  상태변경("bye")
  호출2()
}
const 호출2 = () =>{
  호출3()
}
const 호출3 = () => {
  console.log(상태); // hi
}
호출()

zustand 특성상 비동기로 상태가 변경되기 때문에 호출3에서 상태는 변경된 상태를 감지하지 못합니다

저는 변경된 상태를 감지하고 싶었기에 여러가지 방법을 고안하여 해결해보았습니다.

const {상태, 상태변경} = zusatndStore(state => state);

const 호출 = () => {
  const props = "bye"
  상태변경(props)
  호출2(props)
}
const 호출2 = (props) =>{
  호출3(props)
}
const 호출3 = () => {
  console.log(props); // bye
}
호출()

였지만 한눈에 봐도 불안한 상태관리가 보이고 가독성도 좋아보이지 않아요. zustand의 이점도 살리지 못하고 있는 것 같아서 두번째 방법도 생각해봤습니다

const {상태, 상태변경} = zusatndStore(state => state);
const [변경여부,변경여부변경] = useState(false)
const 호출 = () => {
 상태변경("bye")
 변경여부변경(true);
 호출2()
}
const 호출2 = () =>{
 호출3()
}
const 호출3 = () => {
  변경여부변경(false)
}
호출()
useEffect(()=>{
	if (변경여부){
   	console.log(상태) // bye
   }
},[변경여부])

해당 부분은 변경에 대한 단점이 생길 것 같았습니다(근데 useReducer를 활용해서 관리를 할 수도 있겠네요)
또 다른 방법으로 생각해봤습니다.

const {상태, 상태변경} = zusatndStore(state => state);
const [단계, 단계변경] = useState("")
const 호출 = () => {
 상태변경("bye")
 단계변경("호출2")
}
const 호출2 = () =>{
 단계변경("호출3")
}
const 호출3 = () => {}

호출()
useEffect(()=>{
	...
	if (단계 === "호출3"){
   	console.log(상태) // bye
   }
},[단계])

이런 식으로 상태에 대한 변경을 감지해서 사용하는게 명확하지만 가독성부분에서는 좋아보이는 지는 모르겠습니다. 이번엔 비동기 특성을 이용한 상태값 전달로 변경해보는 방법도 해보겠습니다

const {상태, 상태변경} = zusatndStore(state => state);
const 호출 = async () => {
  const { status } = await 상태변경("bye")
  if (status) {
  	호출2()
  }
}
const 호출2 = () => {
	호출3()
}
const 호출3 = () => {
	console.log(상태) // bye
}
호출()

해당 방식으로 문제를 해결하긴 했지만 Promise를 이용해서 변경해도 괜찮아 보입니다. 또 다른 방법이 뭐가 있을지는 생각해봐야겠습니다. 혹시 다른 방법을 아신다면 댓글로 알려주시면 감사하겠습니다.. 꾸벅