Optimistic UI Update란?
프론트엔드에서 request 를 백엔드로 보낸후, UI가 변경되는 것을 백엔드의 response 를 기다리지 않고 업데이트 하는 것을 말합니다.
유튜브 라이브에서 채팅을 입력했을때, 자신의 화면에서는 분명 자신의 채팅이 가장 빨랐는데, 다른 사람들은 느렸다고 하는 경험이 분명 있을 것입니다.
이러한 현상이 Optimistic UI Update 에 의해서 일어납니다. 내가 채팅을 보내면 채팅창에 바로 내가 입력한 채팅을 추가해서 보여주지만, 실제로는 아직 서버에서 입력받지 못한 상태이고, 자신의 프론트엔드만 미리 변경해서 보여준 것 입니다.
useState 를 사용한 구현
const [state,setState]=useState(true)
const handleClick=()=>{
setState(!state)
axios.post("url",body)
}예를 들어 인스타그램 like 라고 생각을 하면 다음과 같이 작성 할 수 있습니다. 인스타그램 like를 직접 눌러보면 누른 순간 아무런 로딩없이 변화하는 것 을 알 수 있습니다. 먼저 UI를 업데이트 하고, request는 다음에 보낸 후 response를 신경쓰지 않는 방법입니다.
bound mutate
const { data, mutate } = useSWR<ItemDetailResponse>("url");
const onFavClick = () => {
axios.post("url",body)
mutate((prev) => ({ ...prev!, isLiked: !prev!.isLiked }), false);
};SWR 혹은 react-query 와 같이 cache를 이용하는 경우에는, state가 아닌 cache를 변경해 주어야 합니다.
useSWR 은 mutate 함수를 return 하는데, 이를 사용해서 cache 를 변경해 줄 수 있습니다. 또한 mutate 함수는 이전의 cache 값을 prev를 통해 가져올 수 있습니다. 위와 같은 작업을 cache를 통해 사용하려면 위와 같은 방식으로 할 수 있습니다.
현재 페이지의 data 의 값을 mutate 하는 경우를 bound mutate 라고 합니다.
unbound mutate
// unbound mutate는 `useSWRConfig()`에서 가져온다.
const { mutate: unboundMutate } = useSWRConfig();
// data: 변경하고자 하는 새로운 데이터 key 는 변경하고자 하는 url값
unboundMutate(key, data, revalidateBoolean)
위와는 다르게, 어떠한 액션이 있을 때, 현제 페이지의 캐시가 아닌, 다른 페이지의 캐시를 변경 해 주고 싶은 경우도 있습니다. 이런 것을 unbound mutate 라고 합니다.
