[nomad coder] 리액트 기초 3 - 번외(Cleanup Function)

import React from 'react';
import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';


function Hello(){
    useEffect( () => {
        console.log("created!");
        return (() => {console.log("destroyed")})
    } 
    , [])

    return <h1>Hello</h1>;
}

function App(){
    const [showing, setShowing] = useState(false);
    const onClick = () => setShowing((prev) => !prev);

    return (
        <div>
            { showing ? <Hello /> : null}
            <button
                onClick={onClick}>
                {showing? "hide" : "show"}
            </button>
        </div>
    );
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />)
reportWebVitals();

해당 코드는, 버튼을 누르면 요소가 생성되고 파괴된다( 보였다가, 숨겼다가 하지만 원리는 생성되고 파괴되고 있다.)

useEffect를 통해, 생성되면 created라는 로그가 찍히고, 만약 다시 숨길 때, 즉 component가 파괴될 때

destroyed라는 로그가 찍히게 된다.

 

이렇게 어떤 요소가 생성될 때 외에도 파괴될 때 어떤 함수를 실행하고자 한다면, 

function Hello(){
    useEffect( () => {
        console.log("created!");
        return (() => {console.log("destroyed")})
    } 
    , [])

    return <h1>Hello</h1>;
}

return 문을 통해 해당 컴포넌트가 파괴될 때 일어날 코드를 작성해주면 된다. 

이는 필수적인 코드 사용은 아니지만 알아두면 좋은 Clean up function 이다.