React 상태 이름 변경 시 안전하게 마이그레이션하기

React에서 상태를 다룰 때 애매한 이름을 사용하면 나중에 버그를 추적하기 어려워진다.

상태 이름을 명확하게

상태 이름은 그 역할을 명확히 나타내야 한다. isVisible이 아니라 isFormModalOpen 같이 구체적으로 지으면 코드를 읽을 때 의도가 바로 드러난다.

로컬과 배포 환경 차이

같은 코드가 로컬에서는 문제없는데 배포 환경에서 문제가 생기는 경우가 있다. 이런 경우 상태 초기화 타이밍이나 환경 변수를 먼저 확인해봐야 한다.

단계별 검증

• 먼저 상태 이름과 타입이 일관되는지 확인
• 상태 변경 함수가 올바르게 호출되는지 로깅
• 부모 컴포넌트에서 전달되는 props와 로컬 상태의 차이 분석

안전하게 변경하기

이미 사용 중인 상태의 이름을 바꿔야 한다면:

1. 새 이름으로 상태를 추가
2. 기존 이름과 새 이름을 동시에 사용하며 테스트
3. 모든 참조가 새 이름으로 변경됨을 확인
4. 기존 상태 제거

이런 방식으로 하면 실수로 인한 버그를 줄일 수 있다.