✍🏻 [Code Camp_TIL] 34일차: Optimistic-UI

Optimistic-UI(옵티미스틱 UI)

우리가 어떤 게시글에 좋아요를 누르면 환경에 따라 좋아요 수가 올라가는 속도가 다르다. 왜 그럴까?

좋아요를 눌렀을 때 처리 과정
1. 백엔드에 api 요청, 백엔드는 DB에 요청
2. DB는 좋아요 수를 올려두고 올린 좋아요 수 응답
3. 백엔드는 해당 응답을 다시 브라우저에 응답

환경에 따라 위 과정을 수행하는데 시간이 오래 걸릴 수도 있다. 이럴 때 Optimistic UI를 사용할 수 있다.

Optimistic UI는 요청이 서버에 도달하기도 전에 화면의 값을 바꾸는 것이다. 그리고 요청이 성공하고 나면 응답으로 돌아온 값을 다시 화면에 업데이트한다. 이 과정에서 유저는 변화를 눈치채지 못한다.

만약 중간에 요청이 실패한다면 이전의 값을 응답으로 보내주고 이전의 값을 화면에 업데이트 해준다(롤백).

따라서 Optimistic-UI는 성공을 99% 확신하는 api에 사용해야 한다. 롤백(실패)되어도 큰 이슈가 없는 것에만 사용하자!

예를 들어, 결제 후 잔여 금액과 같은 중요한 api는 속도에 상관없이 제대로 절차를 거쳐서 동작해야 하지만, 좋아요와 같은 api는 속임수를 써서 빠르게 처리할 수 있다.

아래 그림은 좋아요를 눌렀을 때 데이터 처리 과정을 나타낸 것이다. (위: 기존 방식, 아래: Optimistic-UI)

좋아요를 올리는 api인, likeBoard 요청에 Optimistic-UI를 사용해봤다.

// import 부분 생략

// 게시글 조회 api에서 좋아요 갯수만 뽑아 오기
const FETCH_BOARD = gql`
	query fetchBoard($boardId: ID!){
		fetchBoard(boardId: $boardId){
			_id
			likeCount
		}
	}
`

//좋아요 카운트 올리는 api
const LIKE_BOARD = gql`
	mutation likeBoard($boardId:ID!){
		likeBoard(boardId:$boardId)
	}
`

export default function(){
	const [likeBoard] = useMutation<Pick<IMutation,"likeBoard">,IMutationLikeBoardArgs>(LIKE_BOARD)
	const { data } = useQuery(FETCH_BOARD,
		{variables :{boardId : "게시글 아이디 넣어주세요!"} })
	
	const onClickLike = ()=>{
		//likeBoard 뮤테이션 함수를 실행하겠습니다.
		void likeBoard({
			variables :{
				boardId : "게시글 아이디 넣어주세요!"
			},

// (기존 방식) 응답을 받고난 후 받아온 응답을 다시 fetch 해줌 -> 느리고 효율적이지 못함(백엔드에 요청을 한번더 해야 하고 받아올 때까지 기다려야 함)
		//refetchQueries: [
		//	{
		//		query: FETCH_BOARD,
		//		variables : {	boardId : "//게시글 아이디 넣어주세요!" }
		//	}
		// ]

// 옵티미스틱 UI -> 캐시를 바꾸고 캐시값을 받아오는걸 기다리지 않고 바로 바꿔줌
		optimisticResponse: {
			likeBoard : (data?.fetchBoard.likeCount || 0)+1
                         },
// apollo 캐시 직접 수정(백엔드 캐시 X) -> 느리지만 효율적(백엔드에 요청은 안하지만, 받아올 때까지 기다려줘야 함)
			update(cache,{data}){
// 이전 시간에는 modify를 사용했지만, 오늘은 writeQuery를 사용해보겠습니다.
				cache.writeQuery({
					query : FETCH_BOARD,
					variables : {boardId:'게시글 아이디 넣어주세요!'}
					//어떻게 수정할 것인지는 아래에 적어줌
					data: {
						// 기존값과 똑같이 받아와야 함
						fetchBoard: {
							_id : '게시글 아이디 넣어주세요!',
							__typename : "Board"
							likeCount: data?.likeBoard
						}
					}
				})
			}
		})
	}

	return(
		<div>
				<h1>옵티미스틱 UI</h1>
				<div>현재카운트(좋아요):{data.fetchBoard.likeCount}</div>
				<button onClick={onClickOptimisticUI}>좋아요 올리기!!</button>
		</div>
	)
} 

optimistic-ui를 적용하면 컴퓨터 환경에 상관없이 유저 모두가 빠른 서비스를 이용하는 것처럼 보일 수 있다. 상황에 따라 데이터가 중요하지 않고 실패 확률이 극히 낮을 경우 사용해주면 좋다!

정리) 성능 최적화를 위한 8가지 전략!

위의 8가지 전략은 반드시 사용해야 하는 것은 아니다. 상황과 환경에 맞게 장단점을 잘 고려해서 사용하면, 사용자의 만족도를 높이는 전략이 될 수 있다.

---