학습 공간 개념 · 판단 · 실험

Fanta Lab

질문 75 · 실전 면접 답변

함수 컴포넌트에서는 수명주기와 비슷한 작업을 어떻게 구성하나요?

이렇게 답해 보세요 (핵심 답변)

함수 컴포넌트에서는 수명주기 시점이 아니라 '외부 시스템과의 동기화'를 기준으로 useEffect의 setup과 cleanup을 구성합니다. 의존성 배열에 포함된 반응형 값이 바뀌면 이전 연결을 cleanup으로 정리한 뒤 새 값으로 setup을 다시 실행하고, 컴포넌트가 언마운트될 때도 마지막으로 정리합니다. 반면 사용자 클릭처럼 특정 사건으로 일어나는 작업은 이벤트 핸들러에 두고, 기존 props·state로 즉시 계산 가능한 값은 렌더 본문에서 바로 계산합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

  1. 하나의 외부 동기화 책임을 하나의 Effect 안에서 시작과 정리로 묶어 두면 값 변경과 언마운트를 일관되게 처리할 수 있습니다.
  2. 의존성 배열은 개발자가 실행 타이밍을 임의로 조절하는 도구가 아니라 Effect 코드가 읽는 모든 반응형 값의 목록입니다.

면접에서 자주 하는 실수

Effect를 특정 시점에 한 번만 실행하고 싶다는 이유로 실제 읽고 있는 상태나 props를 의존성 배열에서 빼고 린트 경고를 무시하면 오래된 값을 참조하는 버그가 생깁니다.

원리와 예제까지 읽기

공식 참고 자료

질문 목록 출처 ↗ · 원본 75번을 바탕으로 질문과 답변을 새로 정리했습니다.

← React