Javascript - Optimistic Update 개념 정리

 

🔔 서론

오늘 알아볼 키워드는 Optimistic Update 라는 개념이다. 데브코스에서 api와 통신하는 Todo App 실습을 진행하면서 알게 된 키워드인데, 데브코스를 진행하면서 모르고 있던 키워드들이 계속 있는 것을 보니 역시 공부해야할 개념이 아직도 너무 많다는 걱정 반, 그래도 데브코스덕에 하나 또 배워간다는 안도감 반 씩 들었다.😜 이번에는 가볍게 개념정리하는 포스팅이므로 편하게 보도록하자.

📌 낙관적 업데이트란?

사용자는 브라우저의 기능에 액션을 취했을 때, state의 값이 변하면 서버에게 알려야하고, 화면의 값 역시 바뀌어야한다. 이를 업데이트라고 표현하는데 이 업데이트는 낙관적 업데이트(Optimistic Update)와 비관적 업데이트(Pessimistic Update) 두 가지로 표현된다.

비관적 업데이트는 사용자가 입력을 하고 서버에 업데이트를 요청한 후, 요청 성공 시 화면이 갱신되는 방식으로 주로 흔히 사용되는 방법이고, 낙관적 업데이트는 사용자가 입력을 하면 바로 화면을 갱신하고, 서버에 수정을 요청하는 방식이다.

낙관적 업데이트를 얼핏봤을 때 어라? 그래도 되나? 라는 생각을 가질 수 있는데, 이 방식은 서버와의 통신시 발생하는 시간차를 최대한 줄이기 위해 사용되는 방식으로 페이스북의 좋아요 버튼에서 적용한 방식이기도 하다.

또한 sns의 게시글 작성에 쓰이기도 한다. 게시글을 입력하고 서버에 요청하는 시간을 기다리고 화면이 갱신되는 것을 기다리는 것보다는 우선 화면에 갱신 시켜놓고 서버의 요청을 기다리는 것이다. 페이스북, 트위터, 인스타에 피드를 올릴 때를 떠올려 보면 우선 UI에 표시는 되고 글이 등록되기를 기다리는 로딩 표시가 있었던 경험이 있을 것이다. 사용자의 경험을 우선시한 케이스이다.

다만 서버와의 통신이 실패 했을 시 이전 상태로 화면을 다시 수정하거나 상황에 따른 적절한 조치를 취해야 할 것이다.

강의에서 진행했던 실습코드를 보도록 하자.

new TodoForm({
    $target,
    onSubmit: async (content) => {
        const todo ={
            content,
            isCompleted: false
        };
        
        // 낙관적 업데이트
        this.setState({
            ...this.state,
            todos: [
                ...this.state.todos,
                todo
            ]
        });

        // ui상으로는 state가 업데이트 된 것처럼 보여주고 서버에 request중
        await request(`/${this.state.username}`, {
            method: 'POST',
            body: JSON.stringify(todo)
        });
        await fetchTodos();
    }
  });

코드에서 TodoForm에서 todo 값을 입력받아 submit을 하면 setState를 통해 state를 바로 갱신시키는 것을 통해 낙관적 업데이트를 하고 뒤에서는 request를 통해 서버에 POST 요청을 하는 것을 볼 수 있다.