질문 70 · 실전 면접 답변
클래스 컴포넌트와 함수 컴포넌트의 실행 모델은 어떻게 다른가요?
이렇게 답해 보세요 (핵심 답변)
클래스 컴포넌트는 생성된 인스턴스의 this.state와 메서드를 통해 값을 읽고 수정하지만, 함수 컴포넌트는 매 렌더마다 함수가 새로 호출되며 Hook을 통해 상태를 연결합니다. 따라서 함수 컴포넌트의 이벤트 핸들러와 Effect는 자신이 생성된 그 렌더 시점의 props와 state 스냅샷을 클로저로 캡처합니다. 신규 개발에서는 로직 조합이 유연한 함수 컴포넌트가 권장되지만, 기존 클래스 코드는 변경 비용과 에러 바운더리 같은 요구사항을 고려해 유지 여부를 판단합니다.
함께 설명하면 좋은 이유 (꼬리질문 대비)
- 변경 가능한 this 인스턴스를 참조하는 방식과 특정 렌더의 스냅샷을 클로저로 캡처하는 방식은 비동기 이벤트 처리 시 결과 차이를 만듭니다.
- 함수 컴포넌트에서는 수명주기 메서드별로 흩어지던 관련 로직을 custom Hook 단위로 묶어 재사용할 수 있습니다.
면접에서 자주 하는 실수
예전처럼 함수 컴포넌트를 상태를 가질 수 없는 단순 표시용(Stateless) 컴포넌트로 분류하는 설명은 Hook 도입 이후의 React 모델과 맞지 않습니다.
원리와 예제까지 읽기
공식 참고 자료
질문 목록 출처 ↗ · 원본 70번을 바탕으로 질문과 답변을 새로 정리했습니다.