[FEAT-3] 입력 form 미리보기 구현

[hin6150]

📑 개요

폼 입력 값에 대한 실시간 미리보기 기능을 구현합니다.
#3 [클라이언트 편의성 관련 기능을 추가합니다.]

🔑 주요 구현

• watch를 통해 폼 전체 값의 변경을 구독합니다.
• 커스텀 디바운스 훅(useDelayedPreview)을 적용하여, watch로 감지된 값이 0.5초 지연된 후 미리보기에 반영되도록 설계했습니다.
• 이를 통해 사용자의 잦은 입력에도 불필요한 미리보기 리렌더링이 발생하지 않도록 최적화합니다.

🤔 고민했던 지점

엣지 케이스 최적화 여부:
디바운스에서 사용자가 값을 변경했다가 (예: "A" ➔ "B"), 타이머가 채 완료되기 전에 다시 원래 값("A")으로 되돌리는 상황을 고려했습니다.

고려한 방안:
이 경우, if (data === value)와 같은 비교 구문을 추가하면, data가 이미 "A"인 상태에서 불필요하게 setData("A")가 다시 호출되는 것을 막을 수 있었습니다.

최종 결정 (단순성 유지):
이 엣지 케이스로 인한 성능 영향이 미미하다고 판단했으며, 코드의 명확성과 단순성을 유지하기 위해 해당 최적화 로직은 제외하고 가장 기본적인 디바운스 형태로 구현을 완료했습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
multi-step-form	Ready	Preview	Comment	Oct 25, 2025 0:36am