unmount

컴포넌트가 DOM에서 제거되는 순간입니다.

 

 

언마운트가 일어나는 상황들

 

1. 조건부 렌더링 — 가장 흔한 경우

function App() {
  const [show, setShow] = useState(true);

  return (
    <div>
      {show && <MyComponent />}  {/* show가 false되면 언마운트 */}
      <button onClick={() => setShow(false)}>숨기기</button>
    </div>
  );
}

 

2. 라우터 페이지 이동

// React Router
// /home → /about 으로 이동하면
// Home 컴포넌트 언마운트, About 컴포넌트 마운트

<Routes>
  <Route path="/home" element={<Home />} />   {/* /home 벗어나면 언마운트 */}
  <Route path="/about" element={<About />} /> {/* /about 진입하면 마운트 */}
</Routes>

 

3. 리스트 아이템 제거

function List() {
  const [items, setItems] = useState([1, 2, 3]);

  const remove = (id) => setItems(items.filter(i => i !== id));

  return (
    <>
      {items.map(item => (
        <Item key={item} />  {/* 배열에서 제거되면 언마운트 */}
      ))}
    </>
  );
}

 

4. 탭 전환

function Tabs() {
  const [tab, setTab] = useState('A');

  return (
    <>
      {tab === 'A' && <TabA />}  {/* B탭 클릭 시 TabA 언마운트 */}
      {tab === 'B' && <TabB />}  {/* A탭 클릭 시 TabB 언마운트 */}
    </>
  );
}

 

5. key 변경 — 강제 언마운트

// key가 바뀌면 React는 같은 컴포넌트라도
// 언마운트 후 새로 마운트시킴
<MyComponent key={userId} />
// userId가 바뀌면 → 언마운트 → 새로 마운트

 

 

훅별 언마운트 동작

1.`useState`  상태 소멸

2. `useEffect` cleanup 함수 실행

3. `useRef` 참조 소멸

4. `useCallback` / `useMemo` 캐시 소멸

 

주의사항
컴포넌트는 사라졌지만 외부에 등록된 것들은 자동 정리 안됨

useEffect(() => {
  // ❌ 언마운트 후에도 계속 실행됨 — 메모리 누수!
  window.addEventListener('resize', handleResize);
  setInterval(callback, 1000);
  fetchData().then(res => setData(res)); // 언마운트 후 setState 시도

  // ✅ 반드시 cleanup으로 직접 정리해야 함
  return () => {
    window.removeEventListener('resize', handleResize);
    clearInterval(timerId);
  };
}, []);​