Optimistic UI/UX 관련 자료 정리. 실험들 정리

[JaeYeopHan]

Optimistic UI

'낙관적인 상황을 가정하여 설계한 사용자 인터페이스'이라는 뜻

What?

API를 호출하고 응답이 오기 전까지 기다렸다가 상태를 바꾸면 delay를 주는 느낌이 발생한다. 우선 상태값을 변경한 후 api 호출을 보낸다. api 호출이 실패할 경우 상태를 원복한다.

this.setState({
  // Change state
})
// api call
try {
  await api.post('...')
} catch {
  this.setState({
    // Rollback state
  })
}

When?

• 어떠한 값의 상태를 바꾸는 기능 중 요청이 실패할 확률이 적은 API 일 경우
• 변화시키고자 하는 상태값이 response와 상관없이 (혹은 response를 몰라도) 결정되는 경우

ex) 즐겨찾기 추가 버튼

Problems

(TBD)

Reference

https://uxdesign.cc/the-optimistic-ui-with-react-f1420e317d54

[JaeYeopHan]

redux-saga에서는 간단히 순서를 바꾸고 reducer들을 만들어두면 금방 적용해볼 수 있다.

function* sagaFunction(action: Action<IRequest>) {
  // api call이 성공했다는 낙관적인 가정하에 success action을 dispatch 한다.
  // 이렇게 되면 api response를 기다리지 않고 UI 상태를 바로 바꿔줄 수 있다.
  yield put(asyncAction.success(action.payload))
  try {
    yield call(apiRequestFunction, action.payload)
  } catch (e) {
    // 에러 발생 시, 미리 바꿨던 UI 상태를 롤백한다.
    yield put(asyncAction.failure(action.payload))
  } finally {
  }
}