맡고 있던 프로젝트의 좋아요 기능에 성능개선할 일이 생겼다.
그러다가 알게된 낙관적 UI (Optimistic UI)
스켈레톤과 같은 로딩중에 발생하는 UI는 이미 사용중이었는데 옵티미스틱 UI는 이번에 알게 되었다.

👩🏻‍💻 Optimistic UI란?

낙관적 UI는 실패확률이 거의 없는, 성공이 확실한 요청에 대해 문제 없이 데이터를 받아오길 기대하고 유저들 에게 이미 성공한 것 처럼 화면에 미리 보여주는 것이다.
대표적인 예가 좋아요 클릭기능 같은 것이고, 결제기능등 성공이 확실하지 않는 것에 대한 요청은 사용하면 안된다.

1. 사용자가 좋아요 버튼을 누르면
2. 클릭 함수가 실행되고 mutation에 요청을 보낸다.
3. 요청이 완료될 때 까지 await로 기다린다.
4. 완료가 되었으면 refetch로 좋아요 갯수 데이터를 가져온다.
5. 가져온 데이터를 화면에 보여준다.

이 많은 과정을 기다릴때 까지 사용자의 인내심이 필요로 하고, 서버 최소 응답시간이 길어질 수록 페이지와 브랜드 이미지에 부정적인 영향을 줄 수 있다.

여기서 낙관적 UI가 하는 일은 이 많은 과정을 거치고 화면에 노출해주기 전에 좋아요 버튼을 클릭함과 동시에 성공했다고 판단하고 갯수를 추가해준다.
만약 실패한다면 원래 상태로 되돌린다.
그러기때문에 단순한 기능에서만 사용이 가능하다.

const [isLiked, setIsLiked] = useState(hasLiked);
// ... 로그인 체크 함수 ... 좋아요 업데이트 함수

const prevIsLiked = async () => {
  	// 로그인 체크 함수
	if (!checkLogin()) return;
	
  	const prevIsLiked = isLiked;
  	// Optimistic UI 활용한 상태 우선 변경
  	setIsLiked((prev) => !prev);
  	try {
      	// 좋아요 업데이트 함수
    	await updateLike(goodsNo, isLiked);
    } catch (error) {
    	// Optimistic UI 실패한 경우 원래 값으로 복원
      	SetIsLiked(PrevIsLiked);
    }
};

옵티미스틱 UI는 비활성화 상태를 통째로 건너뜀으로 통제 불가능한 상황을 배제하고 낙관적 결과로 소통한다.

이번 Optimistic UI를 알아가면서 유저와 인터렉션을 중요하게 생각해야하는 프론트엔드 개발자에 대해서 한번 더 알아가게 되었다.