낙관적 업데이트

낙관적인 업데이트

투두리스트 앱같이 폼을 입력하고 데이터 요청으로 서버에 폼데이터를 저장하고 다시 불러오는 과정으로 동작할 때 네트워크 요청이 오래걸린다면 사용자 입장에서는 입력이 된건가? 하고 몇번이고 폼 입력하고 요청을 할 수 도있다.

낙관적인 업데이트는 서버요청이 무조건 성공한다는 가정하게 폼에서 입력한 정보를 즉시 바로 렌더링해주고 서버요청으로 보내는식으로 진행한다.

페이스북에서 커멘트 작성할 때 이 기법을 사용한다고 한다.

const todoForm = new TodoForm({
    $target,
    onSubmit: async (content) => {
      const todo = {
        content,
        isCompleted: false
      }
      // 낙관적인 업데이트
      this.setState({
        ...this.state,
        todos: [
          ...this.state.todos,
          todo
        ]
      })
      await request(`/${this.state.username}`, {
        method: 'POST',
        body: JSON.stringify(todo)
      })

      await fetchTodos()
    }
  });