데이터 라이프사이클(Data Lifecycle)은 한 번 요청된 데이터가
앱 안에서 어떻게 흘러가고, 어떻게 갱신되고, 언제 폐기되는지를 의미한다.
단순히 서버에서 데이터를 불러오는게 아니라,
그 이후의 여러 단계를 포함한다.
라이프사이클
Fetch(데이터 요청)
클라이언트(브라우저)가 서버로 요청,서버는 JSON, HTML 등 데이터를 응답한다.
이 시점에서는 데이터가 아직 없으므로 UI에서는 로딩 상태를 보여준다.
Cache(데이터 저장)
데이터를 받아왔다면, 매번 새로 요청하지 않기 위해 임시 저장이 필요하다.
브라우저 메모리, IndexedDB, SWR/ReactQuery의 내부 캐시 등 다양한 저장 위치에 가능하며,
캐싱된 데이터는 즉시 재사용 가능.
Render(UI 반영)
받은 데이터를 기반으로 화면(UI)을 그린다.
서버 응답 → 상태(state) → UI의 연결이 완성될 때, React에서는 useState, useSWR 등이
이 파트에 관여한다.
Revalidate(데이터 최신화)
시간이 지나면 데이터는 오래된(stale) 상태가 된다.
이때, SWR 같은 라이브러리는 자동으로 재요청을 보내 최신 데이터를 가져온다.
재검증이 발생하는 시점은 다양하다:
- 일정시간이 지난 경우(staleTime 이후)
- 브라우저 탭을 다시 활성화했을 때(focus event)
- 네트워크가 재연결됐을 때(reconnect event)
SWR는 이러한 재검증을 자동으로 처리한다.
Mutate(데이터 수정)
사용자가 데이터를 수정(e.g. 댓글 등록)할 때는
UI를 즉시 업데이트 하되, 서버 데이터도 나중에 동기화해야 한다.
이를 낙관적 업데이트(Optimistic UI)라고 한다.
사용자는 빠른 피드백을 받고, SWR은 이후 자동으로 서버 데이터를 다시 받아 동기화한다.
*낙관적 업데이트(Optimistic UI)
웹 애플리케이션에서 사용자 경험을 향상 시키기 위해, 사용자의 동작에 대한
응답을 기다리지 않고 미리 UI를 업데이트 하는 것.
Invalidate(데이터 폐기)
데이터가 오래되거나, 다른 요청으로 인해 무효화되어야 할 때는 캐시를 지운다.
e.g. 로그아웃 시 사용자 정보 캐시 삭제
답글 남기기