[TIL] useLoaderData()를 사용했을 때 최신 상태 반영을 어떻게 할 수 있을까?

[Insung-Jo]

📌 배운 내용

• useRevalidator()를 통해서 useLoaderData()같은 한 번 밖에 불러올 수 없는 데이터라도 해당 데이터를 새로고침하여 최신화 되는 것처럼 보이게 할 수 있다는 것을 알게 되었습니다.

---

🔍 배경 / 문제 상황

  const {donations} = useLoaderData();

• 캐러셀과 후원 모달에서 데이터를 useLoaderData()를 통해 받아오고 있었는데, 해당 데이터는 loader에서 단 한 번만 불러오기 때문에 이후 갱신이 어려웠습니다.
• 하지만 시간 상의 문제와 CRUD 로직에 대한 이해 부족으로 인해 기존 데이터를 다시 불러오는 방식 대신 새로 고침 이용해 데이터 최신화를 할 수 있는 방향으로 변경했습니다.

---

✅ 핵심 정리 / 해결 방법

• 해당 코드는 후원 모달 코드의 일부분 입니다.

  const revalidator = useRevalidator();

//...
  const handleClick = async () => {
    const donateAmountNum = Number(donateAmount);
    setIsDonating(true);

    try {
      await requestPut(ENDPOINTS.CONTRIBUTE_DONATION(data.id), {
        amount: donateAmountNum,
      });
      const total = prevCredit - donateAmountNum;
      localStorage.setItem('selectedCredit', total);
      updateCredit(total);
      showAlert('후원 완료!', 'success');
      setTimeout(() => {
        onClose();
        revalidator.revalidate(); //revalidate()를 사용하여 해당 데이터를 다시 로드
      }, 700);
    } catch (e) {
      showAlert('투표에 실패했습니다.', 'warning');
      console.error('후원 처리 중 오류 발생', e);
    } finally {
      setIsDonating(false);
    }
  };

• 테스트를 해보니 새로고침을 하면 최신 상태로 반영되는 것을 확인했지만 처음에는 전체 페이지가 새로고침 되면 사용자 경험이 떨어지기 때문에 다른 대안을 좀 더 찾기 시작했습니다.
• 그러다 react-router에서 useRevalidator 라는 훅이 존재하였고 revalidator.revalidate();를 사용하여 loader에서 처리 되는 데이터를 다시 요청할 수 있는 것을 확인했습니다. 하지만 단점으로는 loader로 불러오는 데이터를 전부 다시 요청을 진행하는 단점이 있었다.
• 하지만 loader로 불러오는 데이터는 저만 사용하고 있었기 때문에 현재 상황을 해결할 수 있는 적합한 방법으로 판단했습니다.

---

🧠 느낀점 또는 생각 메모

• 시간이 부족하기도 했었고 CRUD에 대한 이해력이 부족해 발생한 문제라고 생각한다. 이 문제는 추후 리팩토링으로 스스로 해보고 싶다.
• 하지만 이러한 상황에서도 빠르게 처리할 수 있는 부분이 있었고 이런 여러 예외 상황을 대비하기 위해서 개발자들 분들이 굉장히 신경을 많이 쓰면서 개발한다는 점을 알게 되었다.

---

📚 래퍼런스

React Router – useRevalidator()