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