React 컴포넌트가 서버와 로컬에서 다르게 보일 때

복잡한 React 애플리케이션에서 갑자기 UI가 깨지면, 원인을 찾기가 정말 어렵다. 로컬에서 완벽한데 서버에서 터지는 건 환경 차이 때문인데, 그 차이가 어디 있는지 모를 때가 많다.

컴포넌트를 범위별로 나누기

문제가 어느 컴포넌트에서 나는지 좁혀야 한다. 화면의 이벤트 흐름을 따라가면서, 어느 부분까지는 정상인지, 어디부터 이상한지를 파악한다. 부모 컴포넌트부터 자식 컴포넌트로 내려가면서 테스트한다.

• 먼저 볼 값: 에러가 나는 정확한 UI 위치
• 같이 비교할 값: 로컬에서 같은 동작을 했을 때의 UI
• 기록해둘 것: 관련 props 값, 컴포넌트 이름, 렌더링 순서

키보드 입력 흐름을 따라가기

사용자가 입력한 값이 제대로 전달되는지 확인한다. 입력창에서 문자를 타이핑했을 때, 그 값이 state에 저장되고, UI에 반영되는지를 단계별로 본다.

// 간단한 디버깅 패턴
const handleChange = (e) => {
  console.log('Input:', e.target.value)
  setValue(e.target.value)
}

// 렌더링 시에도 확인
console.log('Rendering with value:', value)

모바일 뷰포트로 테스트하기

반응형 디자인이 적용되어 있다면, 화면 크기에 따라 레이아웃이 달라진다. 브라우저 DevTools에서 모바일 사이즈로 변경해서 테스트한다. 특정 해상도에서만 문제가 나는 경우도 있다.

# 브라우저 DevTools에서
# Ctrl+Shift+M (Mac: Cmd+Shift+M) 로 반응형 보기 활성화
# 다양한 기기 크기로 테스트

콘솔과 React DevTools로 상태 추적

컴포넌트의 state와 props가 예상대로 변하는지 React DevTools로 확인한다. 특히 이벤트 발생 후에 state가 업데이트되는 순서를 본다.

환경 변수 출력해보기

로컬과 서버에서 다른 환경 변수가 있다면, 그것도 UI에 영향을 줄 수 있다. 개발 모드와 프로덕션 모드에서 다른 기능을 활성화하는 코드가 있다면, 그 조건을 명시적으로 로그해본다.

console.log('NODE_ENV:', process.env.NODE_ENV)
console.log('API_URL:', process.env.REACT_APP_API_URL)

한 가지씩만 바꿔보기

원인이 명확하지 않으면 한 번에 한 가지 설정만 바꿔본다. 이벤트 핸들러를 제거해보고, props를 고정값으로 바꿔보고, 조건을 단순화해본다. 이렇게 하면 어느 부분이 문제인지 빠르게 알 수 있다.

컴포넌트 문제는 데이터 흐름을 먼저 이해하면 훨씬 쉽게 해결된다. 어떤 값이 어디서 오고, 어디로 가는지를 명확히 하면, 문제의 원인도 자연스럽게 드러난다.