완벽한 사용자 경험: 중복 제출 방지와 낙관적 업데이트

대참사를 막는 기본: 중복 제출(Duplicate Submit) 방지

데이터베이스에 새로운 글을 등록하거나, 결제를 요청할 때는 절대 같은 요청이 여러 번 연속으로 들어가서는 안 됩니다. 네트워크 지연으로 서버의 응답이 1~2초 늦어질 때, 불안해진 사용자가 버튼을 여러 번 누르는 일은 너무나도 흔하게 일어납니다.

이런 상황을 중복 제출(Duplicate Submit)이라고 부르며, 프론트엔드에서 이를 반드시 막아주어야 합니다. 해결책은 의외로 간단합니다. 상태(State)를 사용하여 "현재 작업이 진행 중인가?"를 체크하는 것입니다.

import { useState } from 'react';

export default function SubmitForm() {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // 이미 제출 중이라면 함수 실행을 막습니다.
    if (isSubmitting) return;

    // 제출 시작: 로딩 상태를 켭니다.
    setIsSubmitting(true);

    try {
      await fetch('/api/posts', { method: 'POST' });
      alert('성공적으로 등록되었습니다!');
    } catch (error) {
      alert('등록에 실패했습니다.');
    } finally {
      // 성공/실패 여부와 관계없이 로딩 상태를 끕니다.
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 로딩 중일 때는 버튼 클릭을 막고 텍스트를 바꿉니다 */}
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '등록하는 중...' : '게시글 등록'}
      </button>
    </form>
  );
}

마법 같은 속도감: 낙관적 업데이트 (Optimistic Update)

중복 제출 방지가 '안전'을 위한 것이라면, 낙관적 업데이트는 '경험'을 위한 것입니다.

보통 서버에 좋아요를 요청하면 [클릭 -> 서버 요청 -> 성공 응답 수신 -> 화면에 하트 표시]의 과정을 거칩니다. 아무리 빨라도 0.1초~0.5초의 딜레이가 발생하여 약간 버벅거리는 느낌을 줍니다.

하지만 낙관적 업데이트는 "서버 통신은 무조건 성공할 거야"라고 낙관적으로 가정합니다. [클릭 -> 즉시 화면에 하트 표시 -> 뒤에서 서버 요청] 순서로 동작합니다. 사용자는 버튼을 누르자마자 0초 만에 시각적 피드백을 받으므로 앱이 엄청나게 빠르다고 느끼게 됩니다.

실패했을 때의 롤백(Rollback)

낙관적 업데이트의 핵심은 "만약 통신이 실패하면 어떻게 할 것인가?"에 있습니다. 하트를 빨갛게 칠해놨는데 뒤늦게 서버에서 에러가 났다면? 조용히 하트를 다시 빈 하트로 되돌리고(Rollback), 사용자에게 짧게 안내해야 합니다.

```typescript
const handleLike = async () => {
  // 1. 현재 상태 기억
  const previousState = isLiked;
  
  // 2. 낙관적으로 화면 즉시 업데이트
  setIsLiked(!isLiked);

  try {
    // 3. 백그라운드 서버 통신
    const res = await fetch('/api/like', { method: 'POST' });
    if (!res.ok) throw new Error('서버 에러');
  } catch (error) {
    // 4. 에러 시 상태 원상 복구 (롤백)
    setIsLiked(previousState);
    alert('좋아요 처리에 실패했습니다.');
  }
};
```

예외 처리는 디테일의 차이입니다

로딩 스피너를 넣고, 에러 화면을 만들고, 중복 클릭을 막고, 낙관적 업데이트를 적용하는 것. 이 모든 과정은 기능이 동작하게 만드는 데엔 필수적이지 않을 수도 있습니다.

하지만 사용자가 "이 앱은 정말 잘 만들어졌고, 믿음직스럽다"라고 느끼게 만드는 것은 바로 이런 실패 상태와 예외를 다루는 디테일에서 나옵니다. 방어적인 코드로 빈틈없는 애플리케이션을 완성해 보세요.