[React] 컴포넌트 생명주기 : useEffect, 마운트, 언마운트

 

🔨 마운트 (mount)

컴포넌트가 처음 화면에 나타나는 시점

• JSX로 만든 컴포넌트가 실제 DOM에 "붙는" 순간
• 초기화 작업(데이터 불러오기, 이벤트 리스너 등록 등)을 주로 이 시점에 처리
• useEffect(() => { ... }, [])의 본문이 실행되는 타이밍

 

🧩 예시

{isVisible && <MyComponent />}

• isVisible가 true가 되는 순간 → MyComponent가 마운트됨

 

---

 

🧹 언마운트 (unmount)

컴포넌트가 화면에서 사라지는 시점

• React가 필요 없어진 컴포넌트를 DOM에서 제거하는 시점
• useEffect의 cleanup 함수가 실행되는 타이밍 (타이머 제거, 이벤트 해제 등)
• useEffec의 return 함수가 이 시점에 실행됩

 

🧩 예시

{isVisible && <MyComponent />}

• isVisible가 false가 되는 순간 → MyComponent가 언마운트됨

 

---

 

📊 마운트 vs 언마운트

단계	의미	관련 코드
마운트	컴포넌트가 DOM에 추가됨	useEffect(() => { ... }, []) 실행
업데이트	상태나 props 변경	useEffect(..., [(변수)]) 재실행
언마운트	컴포넌트가 DOM에서 제거됨	return () => { ... } 실행

 

 

🧩 예시

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    console.log('✅ 마운트됨');

    return () => {
      console.log('❌ 언마운트됨');
    };
  }, []);

  return <div>컴포넌트</div>;
};

 

 

---

 

🚫 정리하지 않으면 생기는 문제 (cleanup)

• 이벤트 리스너가 계속 남아서 메모리 누수 발생
• setInterval이나 setTimeout이 계속 동작
• 이미 사라진 컴포넌트에서 상태를 변경하려다 오류 발생

항상 언마운트 시 cleanup 작업을 꼭 해줘야 함

 

 

---

 

📝 마무리

• 마운트: 컴포넌트가 등장할 때
• 언마운트: 컴포넌트가 사라질 때
• useEffect 안의 return 함수는 언마운트 시 자동 호출됨