React Hook Flow

실행 코드

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script
      crossorigin
      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 = () => {
        console.log("   Child render start");

        const [text, setText] = React.useState(() => {
          console.log("   Child useState : text");
          return "";
        });

        const handleChange = (e) => {
          setText(e.target.value);
        };

        React.useEffect(() => {
          console.log("   Child useEffect : empty deps");
          return () => {
            console.log("   Child useEffect : [Cleanup], empty deps");
          };
        }, []);
        React.useEffect(() => {
          console.log("   Child useEffect : no deps");
          return () => {
            console.log("   Child useEffect : [Cleanup], no deps");
          };
        });
        React.useEffect(() => {
          console.log("   Child useEffect : show deps");
          return () => {
            console.log("   Child useEffect : [Cleanup], text deps");
          };
        }, [text]);

        const element = (
          <>
            <input onChange={handleChange} />
            <p>{text}</p>
          </>
        );
        console.log("   Child render end");
        return element;
      };

      const App = () => {
        console.log("App render start");
        const [show, setShow] = React.useState(() => {
          console.log("App useState : show");
          return false;
        });
        const handleClick = () => {
          setShow((prev) => !prev);
        };

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

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

        console.log("App render end");
        return (
          <>
            <button onClick={handleClick}>search</button>
            {show && <Child />}
          </>
        );
      };

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

첫 랜더링

App render 시작
App useState
App render 끝
App useEffect 모두 동작

no deps : dependency 설정을 하지 않았다. -> 모든 변경이 있을 때 마다 동작한다.
empty deps: dependency가 비어있다. -> 처음 랜더될 때 1회만 동작한다.
show deps : dependency 가 show로 설정되었다. -> 처음 랜더될 때와 show가 변경될 때 동작한다.

Search 버튼 클릭

App render 시작
App render 종료
Child render 시작
Child useState
child render 종료
App useEffect Cleanup
- useEffect가 다시 실행된다면, 이전에 실행되었떤 useEffect가 종료(Cleanup)되고, 실행된다.
- 뒤에 no deps와 show deps가 실행될 것이기 때문에 첫 랜더링에서 호출되었던 두 useEffect가 종료(Cleanup)되었다.
Child useEffect
App useEffect
- 최초 1회만 실행되는 empty deps를 제외한 두 useEffect가 동작한다.

Search 버튼 다시 클릭

App render 시작
App render 종료
Child useEffect Cleanup
- Child의 모든 컴포넌트가 unmount되었기 때문에, 실행되었던 모든 useEffect가 종료(Cleanup)되었다.
App useEffect Cleanup
App useEffect

Author And Source

이 문제에 관하여(React Hook Flow), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@shelly/React-Hook-Flow

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다