🚀 새로운 React 챌린지: useOptimistic으로 즉시 UI 구현

출처: Dev.to

좋아요 버튼을 클릭했을 때 서버가 생각하는 사이에 1초 정도 멈추는 걸 본 적 있나요? 그 작은 지연 때문에 앱이 느릿느릿하게 느껴집니다. React 19는 바로 그 문제를 해결하기 위해 useOptimistic를 도입했습니다 — 서버 응답 전에 UI가 먼저 변하고, 문제가 발생하면 자동으로 원래대로 되돌아갑니다.
🔥 지금 도전 시작하기

React의 useOptimistic 훅을 사용해 즉시 반응하는 하트 토글을 만들어 보세요. 하트를 클릭하면 바로 빨간색으로 바뀌고, React가 백그라운드에서 서버를 처리합니다. 요청이 실패하면 하트가 자동으로 원래 상태로 돌아갑니다 — 수동 롤백 코드를 작성할 필요가 없습니다.

두 개의 카드를 나란히 렌더링하세요: 하나는 “Successful toggle”(성공 토글)이라고 라벨링하고, 다른 하나는 “Error toggle”(오류 토글)이라고 라벨링합니다. 두 카드 모두 하트가 중립 상태(좋아요 안 된 상태)에서 시작합니다.

성공 토글 카드의 하트를 클릭했을 때는 다음을 수행해야 합니다:

• 서버 응답 전에 하트를 즉시 빨간색으로 바꿉니다.
• 서버가 변경을 확인한 후에도 하트를 빨간색 상태로 유지합니다.

오류 토글 카드의 하트를 클릭했을 때는 다음을 수행해야 합니다:

• 서버 응답 전에 하트를 즉시 빨간색으로 바꿉니다.

• 서버가 오류를 반환하면 하트를 중립 상태로 되돌립니다.

• useOptimistic 훅을 startTransition과 함께 사용해 낙관적 상태를 관리하세요.

• addOptimistic는 반드시 startTransition 내부에서 호출해야 합니다 — 그렇지 않으면 UI는 업데이트되지만 React가 경고를 표시합니다.

• passthrough 상태는 불리언(좋아요 여부)만 있으면 됩니다. 나머지 데이터는 그대로 정적 상태로 유지해도 됩니다.

• toggleFavoriteError는 항상 예외를 발생시킵니다. try/catch와 console.error를 사용하면 개발 환경에서 빨간 오류 오버레이가 나타나는 것을 방지하면서 낙관적 되돌림에는 영향을 주지 않습니다.

• 시작 파일에 있는 data-testid 속성은 이미 테스트와 연결되어 있으니 이름을 바꾸거나 삭제하지 마세요.

• 앱 제목을 렌더링합니다.

• 두 카드와 라벨을 렌더링합니다.

• 하트가 좋아요 상태가 아닌 상태로 시작합니다.

• 낙관적으로 하트를 즉시 토글하고 성공 시 유지합니다.

• 서버 오류 시 하트를 되돌립니다.

만약 setState(optimisticValue)와 try/catch를 사용해 수동 롤백 코드를 작성해 왔다면, useOptimistic를 사용하면 그런 보일