🚨 낙관적 업데이트 — 이모지 반응 UI 미반영 트러블슈팅

🔗 프로젝트 - 롤링

1. 🚨 Tailwind + cva + clsx + twMerge 조합에서 커스텀 유틸리티가 적용되지 않을 때

2. 🚨 PropTypes에서 JSDoc으로 — React 19 타입 관리 트러블슈팅

3. 🚨 낙관적 업데이트 — 이모지 반응 UI 미반영 트러블슈팅

4. [코드잇 스프린트 FE 19기] 기초 프로젝트 - 롤링 회고

---

1️⃣ 문제 상황

이모지 등록 기능을 구현하던 중,

사용자가 새로운 이모지를 등록(Post 요청)해도 화면에 즉시 반영되지 않는 문제가 발생했다.

요청이 성공적으로 완료되고 새로고침을 해야 UI가 갱신되는 불편한 상황이었다.

 

2️⃣ 원인 분석

문제의 원인은 클라이언트가 이전 상태를 바라보고 있어 서버 상태와 불일치하고 있었기 때문이다.

POST 요청 후 서버의 응답을 받을 때까지 클라이언트의 상태(state)는 이전 상태를 유지하고 있어서

화면에 즉각적인 변화가 보이지 않았다.

 

3️⃣ 해결 방법

이 문제를 해결하기 위해 낙관적 업데이트(Optimistic Update) 방식을 적용했다.

서버 응답을 기다리지 않고, 요청이 발생한 시점에 setState를 사용해

클라이언트 상태를 먼저 변경하여 화면을 즉시 업데이트하도록 구현했다.

 

사용자가 이모지를 등록하면 곧바로 화면에 반영되었고 사용자 경험이 한층 자연스러워졌다.

 

4️⃣ 정리

낙관적 업데이트는 즉각적인 UI 반응을 제공한다는 장점이 있지만,

서버 요청이 실패하거나 다른 클라이언트에서 동시에 변경이 발생할 경우 데이터 불일치 문제가 생길 수 있다는 한계가 있다.

 

만약 이번 프로젝트에서 React Query나 TanStack Query 같은 서버 상태 관리 라이브러리를 사용했다면,

낙관적 업데이트뿐만 아니라 자동 리페칭, 에러 롤백 처리 등을 더 간단하고 안정적으로 구현해볼 수 있었을 것 같다.