πŸ’» 낙관적 μ—…λ°μ΄νŠΈ(Feat.TodoApp)

hsk10271Β·2022λ…„ 4μ›” 9일
0

TIL

λͺ©λ‘ 보기
17/50
post-thumbnail

이번 μ±•ν„°λŠ” 낙관적 μ—…λ°μ΄νŠΈμ— λŒ€ν•΄ λ‹€λ£¨μ—ˆμŠ΅λ‹ˆλ‹€.
⚠️ μ •λ¦¬ν•œ λ‚΄μš©μ€ μ˜€νƒ€λ‚˜ 잘λͺ»λœ 정보가 μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. λŒ“κΈ€λ‘œ μ•Œλ €μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€

πŸ“ƒ 였늘 κ³΅λΆ€ν•œ 것

낙관적 μ—…λ°μ΄νŠΈ

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

profile
맀 μˆœκ°„ μ„±μž₯ν•˜λŠ” κ°œλ°œμžκ°€ 되렀고 λ…Έλ ₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

0개의 λŒ“κΈ€