지난시간에는 컴포넌트가 업데이트 되는것까지 확인을 했다면 이제는 마지막 라이프 사이클중 하나 컴포넌트가 unmount 일대를 살펴볼것입니다 마찬가지로 class 버전하고 function 버전 짜로 살펴보겠습니다
componentWillUnmount
리액트에서 컴포넌트의 생명주기(lifecycle) 중 unmount 단계는 컴포넌트가 DOM에서 제거되는 단계를 의미합니다. 이 단계에서 컴포넌트는 더 이상 화면에 렌더링되지 않으며, 메모리에서도 해제됩니다.
unmount
그럼 이 unmount 에 대해서 알아보아야 한다 비교적 mount , updated 같은 경우는 간단한 예제 몇개로 알아 볼 수 있지만 unmount 경우에는 알아차리기 어렵다 그런 상황들은
라우팅의 변화 다른 페이지로 이동하거나 라우트가 변경될때 이전 페이지의 컴포넌트는 해제됩니다
동적으로 생성된 컴포넌트 동적으로 생성된 컴포넌트가 더 이상 필요하지 않을때 해당 컴포넌트는 해제됩니다
조건부 렌더링일때 조건 부토 렌더링 되는 컴포넌트는 조건이 변경될때 더 이상 렌더링되지 않아야 할때 해제 됩니다
그럼 이 unmount 는 우리 눈에는 단순히 DOM 이 업데이트 되는것처럽 보이지만 실제로는 DOM 해제 이후 다음과 같은 행위를 진행을 하게 됩니다
unmount 이후
1
2
3
4
5
1. 메모리에서 제거
컴포넌트의 인스턴스는 메모리에서 제거되어 메모리 리소스를 확보합니다
2. 이벤트 리스너의 해제
컴포넌트에 등록한 이벤트 리스너 등의 외부 자원이 정리됩니다 이는 메모리 누수를 방지하고 애플리케이션 안정성을 유지하는데 도움을 줍니다
이런 부가적인 일을 하게 됩니다
unmount 실습
우리는 페이지 이동을 통해서 componentWillUnmount 를 호출해보겠습니다 이때는 라이브러리가 필요합니다 다만 실제 페이지를 이동한다고 해도 호출되는 모습은 사뭇다른 코드일것입니다 실습하면서 알려드리도록 하겠습니다
react-router-dom
1
2
npm install react-router-dom
이는 라이브러리로 리액트에서 페이지를 이동할때 사용하는 컴포넌트입니다
Class_unmount1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from "react";
class Class_unmount1 extends React.Component{
constructor(props){
super(props)
}
componentDidMount(){
console.log("1번 componentDidMount")
}
componentWillUnmount(){
console.log("1번 componentWillUnmount")
}
render(){
return (
<span>클래스1번입니다</span>
)
}
}
export default Class_unmount1;
Class_unmount2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from "react";
class Class_unmount2 extends React.Component{
constructor(props){
super(props)
}
componentDidMount(){
console.log("2번 componentDidMount")
}
componentWillUnmount(){
console.log("2번 componentWillUnmount")
}
render(){
return (
<span>클래스2번입니다</span>
)
}
}
export default Class_unmount2;
간단한 class 들입니다 이떄 componentDidMount 호출이후 componentWillUnmount 를 선언해서 각각 컴포넌트가 다시 렌더링되면 호출이 보일 수 있도록 선언했습니다
페이지 이동
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Class_unmount1 from './lifecycle/Class_unmount';
import Class_unmount2 from './lifecycle/Class_unmount2';
const root = ReactDOM.createRoot(document.getElementById('root'));
const Router = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/Class_unmount1" element={<Class_unmount1 />} />
<Route path="/Class_unmount2" element={<Class_unmount2 />} />
</Routes>
</BrowserRouter>
);
};
root.render(
<React.StrictMode>
<Router />
</React.StrictMode>
);
reportWebVitals();
이때 페이지 이동은 Router 진행을 하게 될것입니다 path 를 정의를 해주면 주소창에 페이지 이동이 일어날때마다 라우터가 해당 path 를 찾아서 해당 컴포넌트를 렌더링 할것입니다 실행을 하게 되면
1
2
3
4
5
6
7
8
9
1번 componentDidMount
1번 componentWillUnmount
1번 componentDidMount
2번 componentDidMount
2번 componentWillUnmount
2번 componentDidMount
사실 컴포넌트 이동으로 인한 호출이 아니라 단순히 redner 이 2번 호출이 되면서 componentWillUnmount 가 호출이 되는것처럼 보입니다 이렇게 보이는 이유는 실제로는 componentWillUnmount 호출하고 있지만 사실상 그 페이지에서는 더 이상 보여줄것이 없고 다른 페이지로 렌더링을 하는 것이기 때문에 실제로는 눈에는 보이지 않는 코드들입니다 다만 라이프사이클 상에서는 착실히 자신의 행동을 하는 중입니다
함수형에서 unmount
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { useEffect } from "react";
function FunctionalComponent() {
useEffect(() => {
console.log("컴포넌트가 마운트되었습니다.");
return () => {
console.log("컴포넌트가 언마운트되었습니다.");
};
}, []);
return <div>함수형 컴포넌트</div>;
}
export default FunctionalComponent;
함수형 컴포넌트에서는 useEffect 에 return 을 주게 되면 그것이 class 형 컴포넌트에서 unmount 와 같은 역활을 하는 것입니다 간단해서 바로 정리를 해보았습니다 우리는 이렇게 여러가지 방식으로 class 형의 라이프사이클에 대해서 공부를 해보았습니다