[면접 질문] react의 컴포넌트 주기와 훅 관련 질문

“React에서 컴포넌트의 생명주기는 크게 마운트(Mount), 업데이트(Update), **언마운트(Unmount)**의 세 가지 단계로 나뉘고, 이 생명주기 각각에 대응하는 작업을 함수형 컴포넌트에서는 Hooks를 통해 수행합니다.”

---

1. 마운트(Mount) 단계

• 이 단계에서는 컴포넌트가 DOM에 처음 렌더링됩니다.
• 클래스 컴포넌트에서는 constructor → render → componentDidMount 순으로 실행됩니다.
• 함수형 컴포넌트에서는 useEffect를 사용하고, 의존성 배열을 빈 배열([]) 로 설정하면 componentDidMount처럼 한 번만 실행됩니다.

useEffect(() => {
  console.log("컴포넌트가 마운트되었습니다.");
  // 초기 데이터 요청 등
}, []);

---

2. 업데이트(Update) 단계

• props나 state가 변경되면 리렌더링이 일어나고, 업데이트 생명주기가 호출됩니다.
• 클래스 컴포넌트에서는 shouldComponentUpdate, componentDidUpdate 등이 있었고,
• 함수형 컴포넌트에서는 useEffect에 특정 state나 props를 의존성으로 지정하면, 해당 값이 변경될 때만 콜백이 실행됩니다.

useEffect(() => {
  console.log("count 값이 변경되었습니다.", count);
}, [count]);

useEffect(() => { console.log("count 값이 변경되었습니다.", count); }, [count]);

---

3. 언마운트(Unmount) 단계

• 컴포넌트가 DOM에서 제거될 때 수행됩니다.
• 클래스 컴포넌트에서는 componentWillUnmount가 사용되고,
• 함수형 컴포넌트에서는 useEffect 안에서 cleanup 함수를 반환하는 방식으로 처리합니다.

 

useEffect(() => { const id = setInterval(() => { console.log("interval running..."); }, 1000); return () => { clearInterval(id); // 컴포넌트가 사라질 때 정리 console.log("컴포넌트가 언마운트됩니다."); }; }, []);

---

4. useLayoutEffect와의 차이

• useEffect는 브라우저가 화면을 그린 뒤에 실행되므로 비동기적입니다.
• 반면 useLayoutEffect는 DOM이 업데이트된 직후, 브라우저가 그리기 전에 동기적으로 실행되므로 레이아웃 계산이나 스크롤 위치 조정 등에 사용합니다.

useLayoutEffect(() => {
  const height = elementRef.current.offsetHeight;
  console.log("DOM 요소의 높이:", height);
}, []);

 

물론 여기까진 누구나 다 답할 수 있고 실제로 여러 블로그도 이렇게 작성되었다 그렇기에 남들과 다른 깊이를 더 가지고 공부를 해야겠다는 생각을 한다 모두 원하는 곳으로 이직 성공하길 바래요 고생 많으십니다