useEffect 버그 반복되는 이유

같은 실수를 반복한다는 건 근본 원인을 놓치고 있다는 신호다. useEffect 문제도 마찬가지다.

처음부터 정답을 맞히려고 하면 오히려 확인 시간이 길어진다. 차라리 재현 조건부터 명확히 하자.

먼저 정상 상태 정의하기

useEffect가 "언제" 실행되어야 하는지 명확히 하자. 컴포넌트 마운트 시? 특정 상태 변경 시? 이것부터 틀리면 나머지도 모두 틀린다.

• 이 effect가 실행되어야 할 시점
• 그때 어떤 값을 봐야 하는가
• 정상일 때와 비정상일 때의 차이

의존성 배열 확인

npm run build
# 브라우저 콘솔에서 effect 실행 여부 확인

의존성 배열이 잘못되면 effect가 예상과 다르게 실행된다. 필요한 의존성을 빠뜨리거나, 불필요한 값을 넣어도 문제가 생긴다.

상태와 props 흐름 추적

effect 안에서 사용하는 상태나 props의 값이 정말 최신인지 확인하자. 로그를 찍어서 실행 순서를 명확히 한다.

로컬과 배포 환경 비교

로컬에선 문제가 안 보인다면 빌드 최적화나 캐시 차이를 의심해보자. 특히 production 빌드에서 다르게 동작할 수 있다.

같은 문제를 또 겪지 않으려면, 지금 이 effect가 정확히 어떻게 동작하는지 남겨두는 게 좋다.