Optimistic-UI
우리가 웹사이트 게시판에서 👍 "따봉" 버튼을 누를 때의 동작을 생각해보자.
사용자가 👍 버튼을 누르면 onClick 함수가 실행되고 서버에 mutation 요청을 보낸다.
서버에 보낸 요청이 완료될 때까지 await으로 기다리고,
완료됐다는 응답이 오면 refetch를 수행해 좋아요 갯수 데이터를 업데이트한다.
고작 좋아요 버튼인데 서버에 요청하고 화면에 렌더링하기까지 기다려야 한다.
여기서 Optimistic UI를 사용하면 사용자의 체감속도를 올릴 수 있다.
Optimistic UI는 단어 그대로 낙관적으로 생각하는 UI로
서버로부터 받는 응답이 대부분 오류없이 성곡적일거라는 가정하에
사용자에게 성공했을 때의 결과를 바로 보여준다.
여기서 예기치 못하게 오류가 발생하면 어떻게 될까?
Optimistic-UI는 똑똑한 친구이다.
만약 성공할거라고 예상하고 화면에 성공한 결과를 보여주다가
예기치 못하게 서버에서 에러를 응답 받으면
조용히 원래 상태로 되돌린다.
이렇게되면 사용자는 갑작스레 에러창을 볼 일도 없고,
좋아요를 눌렀다가 다시 원상복귀 되면 아~ 뭔가 잘못됬구나 다시눌러야지ㅋ
과 같이 자연스레 Optimisti-UI처럼 낙관적으로 생각하게된다.
Developer