TIL - 왜 새 정보를 보여주지 않는거야 (async → await)

Problem

---

요청도 들어갔고 성공적으로 해냈다는 콘솔은 받아보지만 데이터가 새로고침하기 전까지는 state에 반영되지 않는다.

const Main = () => {
  const data = useSelector((state) => state.board);

  const dispatch = useDispatch();

  useEffect(() => {
    // Fetch data when the component mounts
    dispatch(loadData());
  }, [dispatch]);
  
  {...}
  
  // 삭제 함수
  const onDeleteButtonClickHandler = (id) => {
    if (window.confirm(`정말 삭제하시겠습니까?`)) {
      dispatch(deleteData(id));
      dispatch(loadData());
    }
  };

 

 

Solve: aync → await

---

'loadData'액션을 dispatch한 후 아직 redux store에 삭제된 데이터가 반영되기도 전에 불러오기 때문이다.

→ 'loadData' 액션의 실행이 완료된 후에 다시 데이터를 불러오도록 수정이 필요!
→ 'loadData' 액션을 dispatch할 때 Promise를 반환하도록 수정한 후, 해당 Promise가 resolve되는 시점에 데이터를 다시 불러오도록 수정! 해결!

const onDeleteButtonClickHandler = async (id) => {
  if (window.confirm("정말 삭제하시겠습니까?")) {
    await dispatch(deleteData(id));
    await dispatch(loadData()); // 삭제 후 데이터를 다시 불러올 때까지 기다린다는 뜻
  }
};

 

 

Async, Await

---

Async/await은 JavaScript에서 비동기적인 작업을 처리하는 데 사용되는 기능으로,
비동기 작업은 시간이 걸리는 작업(예: 파일 로딩, API 호출 등)을 처리할 때 사용된다!

그러므로 위의 케이스에서도 데이터를 불러오는 과정에서 await를 통해 dispatch가 완료된 후 loadData를 해줄 수 있게 async, await로 처리해준다!