그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록React
React

useEffect가 호출되는 시점에 대해 설명해 주세요.

실무4/5
설계3/5
인간3/5
기초3/5

면접관의 질문 의도

useEffect를 "렌더 후에 실행되는 훅" 정도로 아는지, 의존성 변화·cleanup·StrictMode 이중 실행까지 묶어 _안전한 사용 패턴_을 말하는 사람인지를 가른다.

큐레이션 답변

학습 자료

useEffect는 commit 이후, _브라우저 페인트 다음_에 비동기로 실행되는 부수 효과 훅이다. 의존성 배열이 바뀌면 다음 effect 실행 _전_에 이전 cleanup이 먼저 호출되고, 언마운트 시에도 cleanup이 실행된다. 의존성 배열을 생략하면 매 렌더마다 실행되고, 빈 배열이면 마운트/언마운트 주기에 맞춰 한 번씩 동작한다. 단 개발 모드 StrictMode에서는 검증을 위해 effect가 _두 번 실행_될 수 있으므로 네트워크 호출/구독 코드는 _idempotent_하게 작성해야 안전하다.

좋은 답변 구조

  1. 01useEffect가 commit 후 페인트 다음 비동기로 실행된다는 정의로 시작한다
  2. 02마운트·의존성 변화·언마운트 각각의 effect/cleanup 실행 흐름을 단계로 설명한다
  3. 03빈 배열·배열 생략·StrictMode 이중 실행 같은 분기/예외 동작을 짚는다
  4. 04구독/타이머/네트워크 호출의 idempotent 작성과 디버깅 포인트로 마무리한다

자주 실수하는 포인트

useEffect를 "마운트 시 한 번만" 도는 것으로만 외워 의존성 변화 동작을 빠뜨린다
cleanup을 빼고 구독/타이머를 그대로 둬 누수를 만든다
의존성 배열에 객체/함수를 그대로 넣어 매번 재실행되는 패턴을 만든다
StrictMode 이중 실행을 "버그"로 간주해 idempotent 처리 없이 StrictMode를 끈다

실무 맥락

  • 구독/타이머/외부 이벤트 리스너를 등록하는 컴포넌트의 cleanup 누락 디버깅
  • React 18 StrictMode에서 fetch가 두 번 나가는 "이중 호출" 현상 점검
  • 의존성 배열을 잘못 잡아 무한 effect 루프가 도는 케이스 수정

본인 경험에 녹이는 힌트

cleanup으로 구독 누수를 잡아본 경험이 있다면 effect 수명주기 이야기를 그대로 답변 후크로 쓸 수 있다

StrictMode 이중 실행을 idempotent fetch/AbortController로 처리한 경험이 있다면 "검증 도구로 활용"한 사례로 이어진다

의존성 배열에 객체를 useMemo로 안정화해 무한 루프를 끊은 적이 있다면 의존성 모델 이해를 보여줄 수 있다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1의존성 배열을 비워두면 어떤 경우에만 안전한가요
Q2클린업 함수는 업데이트 시점에도 왜 호출되나요
Q3StrictMode에서 useEffect가 두 번 보이는 이유는 무엇인가요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문