React useEffect로 모바일 레이아웃이 깨질 때

로컬에서 괜찮았던 코드도 모바일 환경에서는 다르게 동작할 수 있다. 이 차이를 파악하는 게 중요하다.

핵심은 한 가지에만 붙잡지 말고 전체 UI 흐름에서 원인을 찾아내는 것이다. 재현 조건, 로그, 응답을 먼저 수집해야 한다.

문제 상황 파악

바로 수정하기 전에 렌더링 조건부터 확인하면 불필요한 변경을 줄일 수 있다. 작은 확인이 쌓이면 원인 후보가 자연스럽게 줄어든다.

확인 범위

바로 수정하기 전에 이벤트 흐름부터 확인하면 불필요한 변경을 줄일 수 있다. 작은 확인이 쌓이면 원인 후보가 자연스럽게 줄어든다:

• 먼저 볼 값: 이벤트 흐름
• 같이 비교할 값: 정상일 때의 UI 상태
• 남겨둘 기록: 명령 출력, 응답 코드, 수정한 설정

이벤트 흐름과 로그

중요한 건 useEffect 자체보다 재현 가능한 단서를 남기는 것이다. 에러 문구를 확인하면 다음으로 볼 범위가 확 줄어든다.

npm run build
# 브라우저에서 모바일 폭과 키보드 입력 흐름을 확인한다

작게 바꿔볼 것

중요한 건 useEffect 자체보다 재현 가능한 단서를 남기는 것이다. 모바일 화면을 확인하면 다음으로 볼 범위가 확 줄어든다.

모바일 화면과 실패 후보

UI 작업은 로컬과 운영의 차이가 자주 숨어 있다. 환경 차이까지 같이 적어두면 원인 추적이 쉬워진다.

검증 항목

1. 원래 증상이 같은 조건에서 다시 나는지 확인한다.
2. 로그나 응답에서 바뀐 부분을 한 줄로 설명해본다.
3. 공개 화면, 빌드 결과, 실제 요청 중 하나로 마지막 확인을 한다.

다음에 남길 기록

UI 작업은 로컬과 운영의 차이가 자주 숨어 있다. 환경 차이까지 같이 기록해두면 원인 추적이 쉬워진다. 해결 자체보다 어떤 값이 달라졌는지 설명할 수 있는 상태가 더 중요하다.