React에서 상태 이름을 잘못 지었을 때

React로 컴포넌트를 만들다 보면 상태 이름 때문에 헷갈리는 경우가 많다. isOpen vs isClosed, isVisible vs isHidden 같은 상태들이 섞이면 렌더링 로직이 복잡해진다.

boolean 상태의 이름 규칙 세우기

boolean 상태는 이름으로 의도를 명확히 해야 한다. is나 has로 시작하는 것이 일반적인 관례다:

• isLoading → 로딩 중인가?
• hasError → 에러가 발생했는가?
• isDisabled → 비활성화 상태인가?

이름만 봐도 true일 때의 상태를 직관적으로 알 수 있다.

모바일 화면에서 실제로 테스트하기

DOM 상태와 실제 화면에 보이는 UI가 다를 수 있다. 브라우저의 개발자 도구에서 콘솔을 열어 현재 상태를 출력해보면서, 실제 화면에서 어떻게 렌더링되는지 함께 확인해야 한다.

npm run build
# 브라우저에서 모바일 뷰포트로 변경하고 상태 변화를 확인한다

모바일 화면에서 특히 상태 이름의 헷갈림이 많이 드러난다. 버튼이 클릭되었을 때, 메뉴가 열렸을 때 등의 상태 변화를 직접 눈으로 추적할 수 있다.

이벤트 흐름 명확히 하기

사용자의 상호작용(클릭, 입력, 스크롤 등)에 따라 상태가 어떻게 변해야 하는지 먼저 정리하는 게 좋다. 그 다음에 각 상태에 맞는 이름을 붙인다.

• 버튼을 클릭했을 때 → isMenuOpen = true
• 데이터를 받고 있을 때 → isLoading = true
• 데이터 받기에 실패했을 때 → hasError = true

상태 관리 도구 활용하기

React DevTools 같은 확장 프로그램을 쓰면 각 순간의 상태를 직관적으로 볼 수 있다. 컴포넌트 트리에서 상태 이름들이 리스트로 나타나기 때문에, 이름이 명확한지 확인할 좋은 기회가 된다.

진단할 때의 체크리스트

상태 이름으로 인한 문제를 피하려면:

1. 모든 boolean 상태의 이름을 is나 has로 시작하도록 통일한다.
2. 같은 기능을 하는 상태는 같은 이름 규칙을 따른다.
3. 실제 화면에서 여러 번 클릭해서 상태 변화가 맞는지 확인한다.

작은 이름 하나가 코드 전체의 명확성을 크게 높인다.