React study/React JS로 영화 웹 서비스 만들기
[React] 6-3. Cleanup 함수 알아보기
카누가 좋아요
2023. 6. 2. 22:24
📌 Cleanup
자주 쓰이지는 않는 함수이지만 알아둘 필요가 있다.
hide와 show를 하는 버튼을 만들어 보겠다.
import { useState, useEffect } from "react";
function App() {
const [showing, setShowing] = useState(false);
const onClick = () => setShowing((prev) => !prev);
return (
<div>
<button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
</div>
);
}
export default App;초기 상태는 showing이 false인 상태이고, 버튼을 클릭하면 버튼 안의 텍스트가 현재 Show면 Hide로, 현재 Hide이면 Show로 바꾸는 코드이다.
아직은 텍스트만 바뀌는 버튼을 만들었으므로, 이제 무엇을 보여주거나 숨길지를 볼 것이다.
우리가 보여주거나 숨길 것은 다른 component가 될 것이다.
따라서 아래와 같이 Hello라는 또 다른 컴포넌트를 하나 만들어 보자.
function Hello() {
return <h1>Hello</h1>;
}그리고 이 컴포넌트를 App 컴포넌트의 자식 컴포넌트로 들어가게 할 것인데, 현재 showing 상태가 true인 경우에 보여지게 하고, showing 상태가 false인 경우에는 보여지지 않게 할 것이다.
function App() {
.....
return (
<div>
{showing ? <Hello /> : null} // 주목!
.....이제 Show를 누르면 Hello라는 글자가 보여지면서 버튼 안의 텍스트가 Hide로 변하고, Hide를 누르면 글자가 감춰지면서 버튼 안의 텍스트가 Show로 변하는 현상을 볼 수 있다.
여기서 useEffect도 사용해 보자.
function Hello() {
useEffect(() => {
// 주목!
console.log("I'm here");
}, []);
return <h1>Hello</h1>;
}Show 버튼을 누를 때만 Hello 컴포넌트가 화면에 랜더링되도록 하였고, Hide 버튼을 누르면 Hello 컴포넌트를 스크린에서 지우도록 코드를 작성했다.
따라서 Show 버튼을 누를 때마다 Hello 컴포넌트가 생성되기 때문에 'I'm here'은 Show 버튼을 누를 때마다 콘솔 창에서 볼 수 있다.
but react.js에는 component가 destroy될 때에도 코드를 실행할 수 있게 해주는 기능이 있다.
앞에서 Show 버튼을 클릭하면 Hello 컴포넌트를 생성 (create) 하였고, Hide 버튼을 클릭하면 Hello 버튼을 없앴다.(destroy)
Hello 컴포넌트의 코드를 다음과 같이 바꾸어 보자.
function Hello() {
useEffect(() => {
console.log("created!"); // 주목!
}, []);
return <h1>Hello</h1>;
}Show 버튼을 누를 때마다 Hello 컴포넌트가 생성되어 console 창에 'created!' 가 뜨는 것을 볼 수 있다.
그런데 컴포넌트가 destroy(소멸)될때에도 console창에 'destroyed!'를 출력해 보고 싶다.
따라서 우리는 useEffect에서 component가 destroy될 때 실행될 function을 다음과 같이 적어준다.
function Hello() {
useEffect(() => {
console.log("created!");
return () => console.log("destroyed!"); // 주목!
}, []);
return <h1>Hello</h1>;
}이렇게 하면 컴포넌트가 소멸될 때, 즉 Hello가 화면에서 감춰질 때에도 console창에 문구를 띄울 수 있게 된다.
위와 같은 함수를 'Cleanup function' 이라고 한다.
어떤 컴포넌트가 destroy될 때 무언가 할 수 있도록 해주는 것이다.
component가 소멸될 때 어떠한 분석 결과(분석 API)를 보내고 싶을 때, 혹은 component가 사라지거나 없어질 때, event listener를 지우거나 console창에 무언가를 보여줄 때 등등 사용할 수 있다.
중요한 것은 cleanup function을 통해 해당 component가 언제 create됐는지, 언제 destroy됐는지를 알 수 있다.
위의 코드를 다음과 같이 좀 더 함수로 쪼개서 작성할 수도 있다.
이때, return은 useEffect에 인자로 들어가는 함수 안에 적어주었다.
function Hello() {
function byFn() {
console.log("bye :(");
}
function hiFn() {
console.log("created :)");
return byFn;
}
useEffect(hiFn, []);
return <h1>Hello</h1>;
}