💻 낙관적 업데이트(Feat.TodoApp)

이번 챕터는 낙관적 업데이트에 대해 다루었습니다.
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다

📃 오늘 공부한 것

낙관적 업데이트

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()
    }
  });

위에서 request 요청을 하기 전에 setState를 먼저 갱신(렌더링)하는 부분처럼 사용자가 입력하면 화면(UI)을 먼저 갱신하고 서버에 요청하는 것이다.

즉, 서버 요청이 무조건 성공한다는 가정하에 폼에서 입력한 정보를 즉시 바로 렌더링해주고 서버요청을 보내는 것이다. 서버와의 통신 시 발생하는 시간차를 줄이기 위해 사용하는 방법이다.
(혼자 생각하기에 "아~ 무조건 성공하니까 우선 반영해~"라고 해서 낙관적인가보다..)

리액트 쿼리에서 사용된다.
React Query - Optimistic Updates

🔥 오늘의 느낀점

드디어 밀린 강의를 다 들었고 TodoApp 실습이 끝났다. 이번주 내내 배운 비동기처리, fetch, history, 낙관적 업데이트, 컴포넌트 분리 등등 모든 내용이 Todo App에 들어있다. 분명 하루하루 개념을 배울 때에는 조금 벅차더라도 따라갈 수 있었는데 한번에 모든 내용이 쏟아지니까 실습 따라가기에 급급하였다.
실습이 끝나고 다시 코드를 살펴보는데 각 컴포넌트(api, storage, parse 등) 자신의 파일에서만 데이터가 변하고 다른 파일에는 영향을 끼치지 않는 것 등이 눈에 보였다. 아 이런게 컴포넌트 구조구나~ 싶었다. 이 코드를 다음주 노션 클로닝을 하기 전에 2-3번은 더 봐야겠다..(가능,,?)

분명 클로즈 미팅 때 일요일에 많이 쉬어두라고 하셨는데... 가능한게 맞나요ㅜㅜ😭
내일 다른 개인 일정도 있는데 다 할 수 있을 지 모르겠다.. 월요일에도 할 일이 많아 시간이 없는데ㅜㅠ 할 수 있는 최대한 해보자!

🗣 오늘의 TMI

그렇게 7연승.. 슼 왜이래 무섭게ㅋㅋㅋㅋㅎㅎ

Refer

프로그래머스 데브코스

오늘의 내용 정리

데브코스 Day15