리액트(hook flow 이해하기)

useState -> setState 시 prev이 주입된다

useState 로 만들어진 함수는 이전 값이 인자값으로 들어 옵니다

 <script type="text/babel">
      const rootElement = document.getElementById("root");

      const App = () => {
        console.log("App render start");
        const [show, setShow] = React.useState(() => {
          console.log("App useState");
          return false;
        });
        React.useEffect(() => { //useEffect 은 사이드 Effect 이기 때문에
        //동작들이 전부 수행되고 나서 실행된다
          console.log("App useEffect, [show]");
        }, [show]);
        React.useEffect(() => {
          console.log("App useEffect, no deps");
        });
        React.useEffect(() => {
          console.log("App useEffect, empty deps");
        }, []);

        function handleClick() {
          // setShow(true);
          // if (show) {
          //   setShow(false);
          // } else {
          //   setShow(true);
          // }
          //useState 로 만들어진 함수는 이전 값이 인자값으로 들어 옵니다 중요
          setShow((prev) => !prev);
        }
        return (
          <>
            <button onClick={handleClick}>Search</button>
            {show ? (
              <>
                <input />
                <p></p>
              </>
            ) : null}
          </>
        );
      };
      ReactDOM.render(<App />, rootElement);
      console.log("App render end");
    </script>