[트러블 슈팅] 데이터 업데이트 후 바로 업데이트된 데이터 불러오기

'수정'을 거친 후 데이터베이스가 업데이트 되고,

그 후 업데이트된 데이터를 다시 브라우저에 불러와야 한다. 

 

이 방법을 수행할 수 있는 몇 가지 방법

 

1. tanstack query (권장)

tanstack query는 클라이언트에서 서버 데이터를 쉽게 관리하고 갱신하는데 유용한 라이브러리.

이를 사용하면 데이터가 변경된 후 자동으로 데이터를 새로 불러오거나, 수정된 데이터를 서버에서 가져와 UI 갱신 가능

주요 장점 :

- refetching : 데이터가 수정되면 해당 데이터를 자동으로 다시 불러오거나, 수동으로 refetch 트리거하여 최신 데이터 반영

- optimistic updates : 데이터 수정 요청이 서버에 성공하기 전에 UI에서 미리 예상 결과를 보여주어, UX 개선

- 캐시 관리 : 요청 결과는 캐시에 저장되어, 동일한 요청에 대해 불필요한 네트워크 요청을 줄일 수 있다

 

2. window.reload() (비권장)

페이지를 새로 고침하여 모든 상태를 초기화하는 방법

데이터를 수정 후 서버에서 변경된 데이터를 반영한 뒤, 페이지를 새로 고침하여 데이터를 다시 로드하는 방식

즉, html,css, javascript 렌더 트리를 만드는 것부터 처음부터 다시 한다는 것이다..

const handleSave = async () => {
  // 데이터 수정 로직
  await axios.put('/url', data);

  // 수정 후 페이지 새로 고침
  window.location.reload();
};

 

3. 상태관리 라이브러리 사용

데이터를 중앙에서 관리하여 상태변경을 통해 UI 자동으로 갱신

 

4. polling (주기적 요청)

주기적으로 서버에 요청을 보내 데이터 변경 여부를 확인

과정 : 

- setInterval을 사용해 일정 간격으로 API 호출

- 새로운 데이터가 있으면 상태 업데이트

useEffect(() => {
  const interval = setInterval(async () => {
    const response = await fetch("/api/data");
    const updatedData = await response.json();
    setData(updatedData); // 상태 업데이트
  }, 5000); // 5초 간격

  return () => clearInterval(interval); // 컴포넌트 unmount 시 정리
}, []);

다만 이런 방식이면 사용자가 이 페이지에 있을 때 n초 마다 계속 API 호출을 보내기 때문에 서버 터질듯..

5. websocket 사용

실시간으로 서버에서 변경 사항을 클라이언트로 푸시하기 위해 Websocket 사용

과정 : 

- 클라이언트가 서버와 WebSocket 연결 생성

- 서버에서 데이터 변경이 발생하면 WebSocket을 통해 클라이언트에 알림

- 클라이언트는 알림을 받고 데이터를 다시 fetch하거나 UI를 업데이트

 

6. SSE(Server-Sent Events) 사용

SSE는 서버가 클라이언트로 단방향 스트림 데이터를 보낼 수 있는 기술로, WebSocket보다 구현 간단

과정 :

- 클라이언트가 서버로 SSE 연결 요청

- 서버에서 데이터가 변경될 때 이벤트를 푸시

- 클라이언트는 이벤트를 받고 UI 갱신

const eventSource = new EventSource("/api/updates");

eventSource.onmessage = (event) => {
  const updatedData = JSON.parse(event.data);
  setData(updatedData); // 상태 업데이트
};

 

7. mutation callback 사용

데이터를 업데이트할 때, 업데이트 요청을 보낸 후 성공 시 클라이언트에서 상태를 직접 갱신하는 방식

과정 :

- 데이터 수정 API 호출 후, 성공 콜백에서 상태 업데이트

const handleUpdate = async (newData) => {
  const response = await fetch("/api/update", {
    method: "POST",
    body: JSON.stringify(newData),
  });

  if (response.ok) {
    setData((prevData) => ({
      ...prevData,
      ...newData,
    }));
  }
};

 

 

조사하면서 드는 생각은 웬만하면 tanstack query나 상태관리 라이브러리를 쓰는게 낫고, 이 둘다 사용하지 않는 프로젝트에선 props drilling으로 즉 7. mutation callback 을 사용하는 방법 밖에 없을 것 같다.

 

본인은 socket으로도 가능하다는 것을 이번 블로그 포스팅을 하면서 처음 알게되었다.

주말에 websocket도 좀 공부해봐야 할 것 같다.