✅ 압박면접 대응 시리즈 10편: React 컴포넌트 라이프사이클과 Hook 매핑

✅ 압박면접 대응 시리즈 10편: React 컴포넌트 라이프사이클과 Hook 매핑

압박면접에서 자주 듣는 질문 중 하나는 **“React Hook이 클래스 컴포넌트 라이프사이클과 어떻게 매핑되나요?”**입니다.
면접관은 단순히 “componentDidMount = useEffect” 같은 대답을 원하는 게 아닙니다.
왜 그렇게 동작하는지, 실무에서 어떻게 다뤘는지까지 묻습니다.

---

📌 1. 클래스 컴포넌트 라이프사이클 정리

단계 메서드 설명

Mounting (마운트)	constructor, componentDidMount	컴포넌트 초기화, 첫 렌더 후 실행
Updating (업데이트)	componentDidUpdate	props/state 변경 시 실행
Unmounting (언마운트)	componentWillUnmount	컴포넌트가 DOM에서 제거될 때 실행

---

📌 2. 함수형 컴포넌트 Hook 매핑

클래스 메서드 Hook 매핑

componentDidMount	useEffect(() => {...}, [])
componentDidUpdate	useEffect(() => {...}, [deps])
componentWillUnmount	useEffect(() => { return () => {...}; }, [])

useEffect(() => {
  console.log("Mounted or Updated");
  return () => console.log("Unmounted");
}, [dependency]);

---

📌 3. 압박면접 예상 질문 & 답변 포인트

❓ Q1. useEffect가 componentDidMount와 완전히 같나요?

• 답변 포인트: 엄밀히 말하면 다릅니다.
  • componentDidMount: 첫 렌더 후 한 번 실행
  • useEffect: 기본적으로 렌더 후 실행되며, 의존성 배열로 제어
  • React Strict Mode에서는 개발 환경에서 의도적으로 두 번 실행

---

❓ Q2. cleanup 함수의 역할은?

• 답변 포인트: 이벤트 리스너, 타이머, WebSocket 연결 해제 → 메모리 누수 방지
• 예시:
• useEffect(() => { const id = setInterval(() => console.log("tick"), 1000); return () => clearInterval(id); }, []);

---

❓ Q3. 실무에서 라이프사이클을 Hook으로 바꾸며 어려웠던 점은?

반응형

• 경험 답변:
  “클래스 컴포넌트에서 componentDidMount와 componentDidUpdate를 분리해 쓰던 로직을 useEffect 하나로 합치다 보니, 의존성 배열을 잘못 관리해서 무한 렌더링이 발생했습니다. 이후 ESLint 플러그인으로 dependency 관리를 자동화했습니다.”

---

📌 4. 실무 적용 사례

• 문제 상황: 대시보드 컴포넌트에서 WebSocket 연결을 관리할 때 언마운트 시 연결 해제가 되지 않아 메모리 누수가 발생
• 해결 방식: useEffect cleanup 활용
• 결과: 메모리 누수 해결, 브라우저 성능 저하 문제 해소

---

📌 5. 커리어 성장 포인트 연결하기

압박면접 대응 시 실무 경험 + 개선 과정을 어필하면 차별화됩니다.

예시 답변:

“React Hook으로 전환하면서 useEffect 의존성 배열 관리가 까다로웠습니다.
ESLint 규칙과 커스텀 훅을 도입해 반복되는 패턴을 줄였고, 팀 전체의 코드 품질도 개선할 수 있었습니다.”

---

📌 6. 면접에서 활용할 한 줄 정리

“클래스 컴포넌트 라이프사이클은 useEffect 하나로 대부분 매핑됩니다.
저는 WebSocket 연결과 같은 사이드 이펙트를 useEffect cleanup으로 안정적으로 관리한 경험이 있습니다.”

---

압박면접,React,라이프사이클,useEffect,컴포넌트관리,Hook매핑,StrictMode,성능최적화,프론트엔드,면접준비