Cleanup function 적용

src/App.js

@@ -1,42 +1,33 @@
 import { useState, useEffect } from 'react';
-import Button from './Button';
-import styles from './App.module.css';
 
-function App() {
-  const [counter, setValue] = useState(0);
-  const [keyword, setKeyword] = useState("");
+function Hello() {
+  const byeFn = () => {
+    console.log("destroyed"); // 컴포넌트가 destroy 될 때 실행됨
+  };
+
+  const hiFn = () => {
+    console.log("created"); // Hello 컴포넌트가 create 될 때 맨 처음 1회만 실행됨
 
-  const onClick = () => setValue(prev => prev + 1);
-  const onChange = (event) => setKeyword(event.target.value);
+    return byeFn;
+  };
 
-  console.log('run all the time');
+  useEffect(hiFn, []);
 
-  useEffect(() => {
-    console.log('call the api');
-  }, []);
+  return <h1>Hello</h1>;
+}
+
+function App() {
+  const [showing, setShowing] = useState(false);
 
-  useEffect(() => {
-    if (keyword && keyword.length > 5) {
-      console.log('search for', keyword);
-    }
-  }, [keyword]);
+  const onClick = () => setShowing(prev => !prev);
 
   return (
     <div>
-      <input
-        value={keyword}
-        onChange={onChange}
-        type="text"
-        placeholder="Search here..."
-      />
-      <h1
-        className={styles.title}>
-        {counter}
-      </h1>
-      <Button
-        text={"click me"}
-        onClick={onClick}
-      />
+      {showing ? <Hello /> : null}
+      <button
+        onClick={onClick}>
+        {showing ? "Hide" : "Show"}
+      </button>
     </div>
   );
 }