React 클라이언트 상태와 서버 상태: useState에 있어도 원본은 서버일 수 있다

import { useState } from 'react'
 
let storedProfile = { id: 'user-1', name: '민수' }
 
async function readProfile() {
  return { id: storedProfile.id, name: storedProfile.name }
}
 
export default function ProfileEditor() {
  const [profile, setProfile] = useState(null)
 
  async function handleRead() {
    const nextProfile = await readProfile()
    setProfile(nextProfile)
  }
 
  if (profile === null) {
    return <button onClick={handleRead}>서버에서 프로필 읽기</button>
  }
 
  return (
    <section>
      <label>
        이름
        <input
          value={profile.name}
          onChange={event => {
            setProfile({ id: profile.id, name: event.target.value })
          }}
        />
      </label>
      <p>화면이 저장됐다고 믿는 이름: {profile.name}</p>
      <button type="button" onClick={handleRead}>
        서버에서 다시 읽기
      </button>
    </section>
  )
}

import { useState } from 'react'
 
let storedProfile = { id: 'user-1', name: '민수' }
 
async function readProfile() {
  return { id: storedProfile.id, name: storedProfile.name }
}
 
async function saveProfile(name) {
  storedProfile = { id: storedProfile.id, name }
  return { id: storedProfile.id, name: storedProfile.name }
}
 
export default function ProfileEditor() {
  const [serverProfile, setServerProfile] = useState(null)
  const [draftName, setDraftName] = useState('')
  const [status, setStatus] = useState('idle')
 
  async function handleRead() {
    setStatus('reading')
    const nextProfile = await readProfile()
    setServerProfile(nextProfile)
    setDraftName(nextProfile.name)
    setStatus('idle')
  }
 
  async function handleSave() {
    setStatus('saving')
    const confirmedProfile = await saveProfile(draftName)
    setServerProfile(confirmedProfile)
    setDraftName(confirmedProfile.name)
    setStatus('idle')
  }
 
  if (serverProfile === null) {
    return (
      <button disabled={status === 'reading'} onClick={handleRead}>
        서버에서 프로필 읽기
      </button>
    )
  }
 
  const hasUnsavedChange = draftName !== serverProfile.name
 
  return (
    <section>
      <p>서버 확인값: {serverProfile.name}</p>
      <label>
        편집 초안
        <input
          value={draftName}
          disabled={status !== 'idle'}
          onChange={event => setDraftName(event.target.value)}
        />
      </label>
      <p>{hasUnsavedChange ? '저장 전 변경 있음' : '서버 확인값과 같음'}</p>
      <button
        type="button"
        disabled={!hasUnsavedChange || status !== 'idle'}
        onClick={handleSave}
      >
        {status === 'saving' ? '저장 중…' : '서버에 저장'}
      </button>
      <button type="button" disabled={status !== 'idle'} onClick={handleRead}>
        서버에서 다시 읽기
      </button>
    </section>
  )
}

문제       화면에서 이름을 바꿨지만 서버를 다시 읽으면 이전 이름으로 돌아옴
잘못된 판단 서버 응답을 담은 useState를 바꾸면 서버 원본도 저장됨
관찰       profile.name은 지수지만 readProfile 결과는 계속 민수
원인       서버 확인 사본과 아직 저장하지 않은 편집 초안을 한 필드에 덮어씀
행동       serverProfile과 draftName을 분리하고 성공 응답 뒤 사본 갱신
검증       저장 전 표시는 구분되고 저장 성공 뒤 다시 읽어도 이름 유지