React 컴포넌트의 상태 업데이트가 반영 안 될 때

React에서 버튼의 disabled 상태가 바뀌지 않거나 폼 입력이 안 되는 경우가 있다. 대부분 상태 관리 문제다.

상태 업데이트 타이밍 확인

상태 값이 제때 업데이트되는지 콘솔에 로그를 찍어본다.

const [isLoading, setIsLoading] = useState(false);

const handleClick = async () => {
  console.log('클릭 전:', isLoading);
  setIsLoading(true);
  // async 작업...
  setIsLoading(false);
  console.log('작업 후:', isLoading); // 이 시점에서는 아직 true일 수 있음
};

상태 업데이트는 비동기인데 동기라고 생각하면 헷갈린다.

React DevTools로 확인

React DevTools 브라우저 확장을 쓰면 컴포넌트의 현재 상태를 실시간으로 볼 수 있다. 버튼을 클릭했을 때 isLoading이 정말 true로 바뀌는지 확인해본다.

상태는 바뀌는데 UI가 안 바뀐다면, 렌더링 문제를 의심해봐야 한다. 예를 들어 부모 컴포넌트가 리렌더링을 막고 있을 수도 있다.

브라우저 스타일 확인

CSS로 opacity: 0.5 같은 스타일은 주지만 pointer-events: none을 안 줬을 수도 있다. 비활성 상태처럼 보이지만 실제로는 클릭이 가능하다.

배포 후에는 다양한 네트워크 속도를 시뮬레이션해서 테스트해보는 게 좋다. 느린 네트워크에서는 비동기 작업이 예상보다 오래 걸려서 UX가 이상하게 느껴질 수 있다.