[React] useEffect2 cleanup

App.js

import {useEffect, useState} from "react";

function Hello() {
  useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye :("); //component가 종료될때 뭔가 할 수 있도록 해주는 것. cleanup
  }, []);
  return <h1>Hello</h1>
}


function App() {

  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((current) => !current);
  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>  
    </div>
  );
}
export default App;

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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