React state 초기화가 제대로 안 될 때

React에서 사용자가 페이지를 이동했다 돌아왔을 때, 이전의 상태가 남아있을 때가 있다. 폼 입력값, 필터 선택, 스크롤 위치 같은 게 그렇다. 이게 의도된 동작일 수도 있고, 버그일 수도 있다.

사용자 행동 vs 개발자 의도 구분하기

상태가 유지되는 게 항상 나쁜 건 아니다. 사용자가 입력한 폼이 남아있으면 편할 수도 있다. 하지만 명시적으로 리셋되어야 하는 상태라면, 언제 초기화할지를 정확히 정해야 한다.

• 먼저 볼 값: 페이지 이동 전후의 state 값
• 같이 비교할 값: 예상했던 초기값
• 기록해둘 것: 어느 컴포넌트에서 state가 유지되는지, 언제 리셋되어야 하는지

useEffect 의존성 배열 확인하기

state를 초기화하는 로직이 useEffect 안에 있다면, 의존성 배열이 올바른지 확인한다. 빈 배열 []이면 마운트 시에만 실행되고, 의존성이 있으면 그것이 변할 때 실행된다.

// 마운트 시에만 초기화
useEffect(() => {
  setFormData(initialValue)
}, [])

// URL이 바뀔 때마다 초기화
useEffect(() => {
  setFormData(initialValue)
}, [location.pathname])

페이지 이동 감지하기

Next.js를 쓴다면 useRouter 훅으로 라우트 변경을 감지할 수 있다. URL이 바뀌면 state를 초기화하도록 할 수 있다.

import { useRouter } from 'next/router'

const MyComponent = () => {
  const router = useRouter()
  const [formData, setFormData] = useState(initialValue)

  useEffect(() => {
    setFormData(initialValue)
  }, [router.asPath])
}

컴포넌트 key로 강제 리셋하기

state를 강제로 초기화하는 가장 간단한 방법은 컴포넌트의 key를 바꾸는 것이다. key가 바뀌면 React는 새 컴포넌트로 인식하고 state를 초기화한다.

// key가 바뀌면 FormComponent가 리마운트되고 state가 초기화됨
<FormComponent key={userId} />

모바일 환경에서 테스트하기

로컬에서는 문제가 없어도, 모바일에서 뒤로가기 버튼을 누르면 다르게 작동할 수 있다. 모바일 브라우저의 뒤로가기와 페이지 새로고침 시의 동작을 구분해서 테스트한다.

state 업데이트 순서 확인하기

여러 state가 동시에 업데이트되면, 순서가 꼬일 수 있다. 콘솔에 로그를 찍어서 어느 state부터 언제 초기화되는지 추적한다.

const handleReset = () => {
  console.log('Resetting form')
  setFormData(initialValue)
  setErrors({})
  setTouched({})
  console.log('Reset complete')
}

state 관리는 간단해 보여도 복잡할 수 있다. 각 state가 언제 초기화되고, 어디서 변하는지를 명확히 하는 것만으로도 대부분의 문제를 해결할 수 있다.