낙관적 업데이트 수동 구현

수동 낙관적 업데이트는 서버 데이터에서 초기화한 로컬 구성 요소 상태로 시작합니다. const [items, setItems] = useState(serverItems) 이 로컬 상태를 렌더링하고 낙관적으로 변경합니다. 서버에서 가져온 데이터를 직접 변경해서는 안 됩니다(NOT). 직접 관리할 수 있는 로컬 복사본을 유지하십시오.

사용자가 변경 작업을 실행하면("추가", "좋아요", "삭제" 클릭), API를 호출하기 전에 즉시 상태를 업데이트하십시오. setItems(prev => [...prev, newItem]) UI에 변경 사항이 즉시 반영됩니다. 실제 네트워크 요청은 이 업데이트를 수행한 후에 보내십시오.

낙관적 업데이트를 수행하기 전에 현재 상태를 저장하십시오. const previousItems = items 이 스냅샷이 롤백 대상입니다. API 호출이 실패하면 이 값을 복원합니다. 대기 중인 변경 작업이 처리되는 동안에만 필요하므로 상태가 아닌 변수에 저장하십시오.

낙관적 업데이트 후 API를 비동기적으로 호출하십시오. try/catch로 감싸십시오. 성공하면 서버 상태와 동기화하기 위해 선택적으로 데이터를 다시 가져오거나, 서버가 같은 데이터를 반환할 것이라면 낙관적 상태를 그대로 사용해도 됩니다. 실패하면 저장해 둔 이전 상태로 롤백하십시오.

변경 작업의 catch 블록에서 setItems(previousItems)를 실행하십시오. 이렇게 하면 낙관적 업데이트 전의 상태로 복원됩니다. 롤백 후에는 오류 알림을 표시하십시오. 사용자는 드문 실패가 발생할 수 있다는 점은 이해하지만, 조용히 불일치한 상태로 남는 것은 받아들이기 어렵습니다.

롤백한 후 오류 메시지 "변경 사항을 저장할 수 없습니다. 다시 시도하십시오."를 표시하고, 같은 변경 작업을 다시 실행하는 다시 시도 버튼을 제공하십시오. 이렇게 하면 사용자가 직접 다음 행동을 선택할 수 있습니다. 롤백, 오류 토스트, 다시 시도의 조합으로 전체 UI를 차단하지 않고 실패 상황을 우아하게 처리할 수 있습니다.

새 항목을 낙관적으로 추가할 때는 서버가 아직 실제 ID를 할당하지 않은 상태입니다. 낙관적 항목에 사용할 임시 ID를 생성하십시오. const tempId = crypto.randomUUID() 목록에서 이 값을 항목의 키로 사용합니다. API가 성공적으로 응답하면 임시 ID를 서버가 할당한 실제 ID로 바꾸십시오.

생성 변경 작업이 성공하면 서버가 실제 ID를 응답으로 보냅니다. 다음과 같이 상태를 업데이트하여 임시 항목을 바꾸십시오. setItems(prev => prev.map(item => item.id === tempId ? { ...item, id: serverResponse.id } : item)) 이렇게 조정하면 이후 작업에서 올바른 서버 ID를 사용할 수 있습니다.

사용자가 짧은 시간 안에 두 변경 작업을 실행하면 응답이 순서와 다르게 도착할 수 있습니다. 두 번째 변경 작업의 응답이 첫 번째 응답보다 먼저 도착하고, 첫 번째 작업의 롤백이 두 번째 작업으로 만들어진 올바른 상태를 덮어쓸 수 있습니다. 이는 낙관적 UI에서 발생하는 고유한 경쟁 상태입니다.

경쟁 상태에 대한 한 가지 해결책은 큐를 사용해 변경 작업을 직렬화하는 것입니다. 변경 작업이 진행 중인 동안 실행 버튼을 비활성화하고(isSubmitting 상태를 true로 설정합니다) 이전 작업이 완료된 후에만 다음 변경 작업을 허용합니다. 이렇게 하면 즉각적인 반응성은 다소 떨어지지만 상태 순서가 올바르게 유지됩니다.

삭제 작업에서는 이전 항목을 저장하고, 상태에서 삭제할 항목을 필터링해 제외한 다음 삭제 API를 호출하고 실패 시 롤백합니다. 삭제는 추가보다 간단하지만(ID 조정이 필요하지 않음) 동일한 원칙이 적용됩니다. API를 호출하기 전에 삭제 작업을 잠시 지연하면서 "실행 취소" 옵션을 표시하는 방법도 고려해 보십시오.

낙관적으로 추가한 항목에 임시 ID가 필요한 이유는 무엇일까요?

수동 패턴은 다음과 같습니다. previousItems를 저장하고, 새 상태로 setItems를 호출한 뒤 API를 호출하고, 실패하면 setItems(previousItems)로 롤백하면서 오류를 표시합니다. 항목을 추가할 때는 crypto.randomUUID()를 임시 ID로 사용하고 성공하면 서버의 ID로 조정합니다. 진행 중인 변경 작업 동안 실행을 비활성화하여 경쟁 상태를 방지합니다. 롤백 + 토스트 + 재시도는 표준적인 실패 사용자 경험입니다.