Hook flow (훅의 생명주기)

고규식·2021년 12월 11일

클래스형 컴포넌트의 라이프사이클 함수처럼, 함수형 컴포넌트의 Hook도 flow가 존재한다.

대표적으로 useEffect가 있다.

예시 코드

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- 바벨 컴파일러 불러오기 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.getElementById("root");
	/* 자식 컴포넌트 */
      const Child = () => {
        /* useState의 lazy initialization */
        const [text, setText] = React.useState(() => {
          console.log("  Child useState");
          return "";
        });
 	/* useEffect no deps */
        React.useEffect(() => {
          console.log("  Child useEffect, no deps");

          return () => {
            console.log("  Child useEffect [Clean up], no deps");
          };
        });
        /* useEffect empty deps */
        React.useEffect(() => {
          console.log("  Child useEffect, empty deps");

          return () => {
            console.log("  Child useEffect [Clean up], empty deps");
          };
        }, []);
        /* useEffect [show] */
        React.useEffect(() => {
          console.log("  Child useEffect, [show]");

          return () => {
            console.log("  Child useEffect [Clean up], [show]");
          };
        }, [text]);
        const handleChange = (event) => {
          setText(event.target.value);
        };
        console.log("  Child render start");
        const element = (
          <>
            <input onChange={handleChange} />
            <p>{text}</p>
          </>
        );
        console.log("  Child render end");
        return element;
      };
      /* 부모 App */
      const App = () => {
        console.log("App render start");
        const [show, setShow] = React.useState(() => {
          console.log("App useState");
          return false;
        });

        React.useEffect(() => {
          console.log("App useEffect, no deps");

          return () => {
            console.log("App useEffect [Clean up], no deps");
          };
        });
        React.useEffect(() => {
          console.log("App useEffect, empty deps");

          return () => {
            console.log("App useEffect [Clean up], empty deps");
          };
        }, []);
        React.useEffect(() => {
          console.log("App useEffect, [show]");

          return () => {
            console.log("App useEffect [Clean up], [show]");
          };
        }, [show]);

        function handleClick() {
          setShow((prev) => !prev);
        }
        console.log("App render end");
        return (
          <>
            <button onClick={handleClick}>Search</button>
            {show ? <Child /> : null}
          </>
        );
      };

      ReactDOM.render(<App />, rootElement);
    </script>
  </body>
</html>