React 에러 메시지를 체계적으로 읽는 방법

React 개발하다 보면 에러 메시지가 여러 개 동시에 나타난다. 콘솔, 화면, 네트워크 탭에 각각 다른 에러가 보이면서 어디부터 봐야 할지 혼란스럽다. 진짜 원인은 그 중 하나일 때가 많다.

에러 발생 순서를 역순으로 읽기

첫 번째 에러부터 추적하는 게 중요하다. 여러 에러 중 가장 먼저 떨어진 것이 원인 에러고, 나머지는 그 결과일 가능성이 높다. 콘솔 에러를 위에서부터 읽되, 시간 순서를 따진다.

• 먼저 볼 값: 첫 에러 메시지와 발생 파일, 줄 번호
• 같이 비교할 값: 로컬 개발 환경에서의 같은 상황
• 기록해둘 것: 에러 스택 전체, 컴포넌트 계층, 상태 값

콘솔 에러의 계층 구조 파악하기

# 브라우저 콘솔에서 확인할 사항
1. TypeError: Cannot read property 'x' of undefined  // 원인
2. Error rendering component                          // 결과 1
3. Network request failed                             // 결과 2

첫 번째 에러 메시지가 정확한 위치와 원인을 알려주는 경우가 대부분이다. 파일명과 줄 번호를 클릭하면 소스 코드를 볼 수 있다.

콘솔에서 상태와 props 검사하기

React 개발자 도구를 열고 문제가 나는 컴포넌트를 선택한다. 그 컴포넌트의 props와 state가 뭔지 확인한다. 특히 undefined나 null이 아니어야 할 값이 비어있는지 체크한다.

# React DevTools에서 콘솔에 $r로 현재 컴포넌트 접근 가능
console.log($r.props)
console.log($r.state)

네트워크 탭도 함께 보기

콘솔 에러가 네트워크 요청 실패 때문일 수도 있다. Network 탭에서 실패한 요청이 있는지 확인하고, 응답 상태 코드를 본다. 404, 500, 타임아웃 중 어떤 건지에 따라 원인이 다르다.

에러 경계로 감싸서 테스트하기

특정 컴포넌트에서 에러가 반복되면, 그 부분을 Error Boundary로 감싸서 더 자세한 정보를 얻을 수 있다. 에러가 정확히 어느 컴포넌트에서 발생하는지 파악하기가 쉬워진다.

// 간단한 에러 경계 예시
class ErrorBoundary extends React.Component {
  state = { hasError: false }
  static getDerivedStateFromError(error) {
    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    console.error('Error caught:', error, errorInfo)
  }
  render() {
    if (this.state.hasError) return <div>Something went wrong</div>
    return this.props.children
  }
}

빌드 후에도 에러가 나는지 확인

개발 모드에서만 에러가 나거나, 반대로 프로덕션 빌드에서만 에러가 나는 경우가 있다. 빌드 결과물로 테스트해야 실제 배포 후의 에러를 예측할 수 있다.

# 프로덕션 빌드로 로컬 테스트
npm run build
npm start

React 에러는 대부분 데이터 흐름 문제다. 어느 컴포넌트에서 어떤 값이 없거나 잘못되었는지를 파악하면, 에러 메시지의 의미가 훨씬 명확해진다.