[TIL] 220504 react맛보기 - 리랜더링, 이벤트, useState, useEffect, hook

koseony·2022년 5월 5일
ReactTIL

TIL(Today I Learn)

목록 보기
12/19
post-thumbnail

1. 리액트의 리랜더링

  • 리랜더링
바닐라 JS리액트
변경으로 인해 Element를 다시 그림변경된 부분만 다시 그림
  • 바닐라 js
    바닐라는 새로고침이 일어난다.
    버튼자체가 계속 새로 생긴다.
<script>
  const rootEl = document.getElementById("root");
  function random() {
    const number = Math.floor(Math.random() * (10 - 1) + 1);
    const element = `
      <button>${number}</button>
    `;
    rootEl.innerHTML = element;
  }

  setInterval(random, 1000);
</script>
  • 리액트
    리액트는 새로고침이 일어나지 않는다.
    버튼은 그냥두고 그 안에 값만 바뀐다.
<script type="text/babel">
  const rootEl = document.getElementById("root");
  function random() {
    const number = Math.floor(Math.random() * (10 - 1) + 1);
    const element = <button>{number}</button>;
    ReactDOM.render(element, rootEl);
  }

  setInterval(random, 1000);
</script>

  • 리액트의 렌더링은?

불변객체란?
변하지 않는 객체
우리는 그저 ReactDOM.render(element, rooElement); 로 전당할뿐
변경 판단 및 반영을 리액트가 알아서 한다.

앨리먼트 타입이 바뀌면?
이전 앨리먼트는 버리고 새로 그린다.
앨리먼트 타입이 같다면?
(key를 먼저 비교하고,)
props를 비교해서 변경사항을 반영한다.

2. 이벤트 핸들러 써보기

  • 리액트는 카멜케이스를 사용한다!
<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <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 handleClick = () => alert("Pressed");
      const handleMouseOut = () => alert("bye");
      const element = (
        <button onClick={handleClick} onMouseOut={handleMouseOut}>
          Press
        </button>
      );
      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

이벤트 핸들러 써보기

  • 간단한 검색창 만들기
<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <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 state = { keyword: "", typing: false, result: "" };

      const App = () => {
        function handChange(event) {
          setState({ typing: true, keyword: event.target.value });
        }

        function handleClick() {
          setState({
            typing: false,
            result: `We find results of ${state.keyword}`
          });
        }
        return (
          <>
            <input onChange={handChange} />
            <button onClick={handleClick}>search</button>
            <p>
              {state.typing ? `Loooking for ${state.keyword}...` : state.result}
            </p>
          </>
        );
      };

      function setState(newState) {
        Object.assign(state, newState);
        render();
      }

      render();

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

3. 컴포넌트 상태 다루기

컴포넌트: 엘리먼트의 집합이다.

  • useState
<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <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 state = { keyword: "", typing: false, result: "" };

      const App = () => {
        const [keyword, setKeyword] = React.useState("");
        const [result, setResult] = React.useState();
        const [typing, setTyping] = React.useState(false);

        function handChange(event) {
          setKeyword(event.target.value);
          setTyping(true);
        }

        function handleClick() {
          setTyping(false);
          setResult(`We fnid results of ${keyword}`);
        }

        return (
          <>
            <input onChange={handChange} />
            <button onClick={handleClick}>search</button>
            <p>{typing ? `Loooking for ${keyword}...` : result}</p>
          </>
        );
      };

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

4. 사이드이팩트 다루기

  • useEffect
    부수효과를 말한다.
<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <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 state = { keyword: "", typing: false, result: "" };

      const App = () => {
        const [keyword, setKeyword] = React.useState(() => {
          window.localStorage.getItem("keyword");
        });
        const [result, setResult] = React.useState();
        const [typing, setTyping] = React.useState(false);

        console.log("render");

        React.useEffect(() => {
          console.log("effect");
          window.localStorage.setItem("keyword", keyword);
        }, [keyword]);

        function handleChange(event) {
          setKeyword(event.target.value);
          setTyping(true);
        }

        function handleClick() {
          setTyping(false);
          setResult(`We fnid results of ${keyword}`);
        }

        return (
          <>
            <input onChange={handleChange} value={keyword} />
            <button onClick={handleClick}>search</button>
            <p>{typing ? `Loooking for ${keyword}...` : result}</p>
          </>
        );
      };

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

5. 커스텀 훅 만들기

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

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

      function useLocalStorage(itemName, value = "") {
        const [state, setState] = React.useState(() => {
          return window.localStorage.getItem(itemName) || "";
        });

        React.useEffect(() => {
          window.localStorage.setItem(itemName, state);
        }, [state]);

        return [state, setState];
      }

      const App = () => {
        const [keyword, setKeyword] = useLocalStorage("keyword");
        const [result, setResult] = useLocalStorage("result");
        const [typing, setTyping] = useLocalStorage("typing", false);

        function handleChange(event) {
          setKeyword(event.target.value);
          setTyping(true);
        }

        function handleClick() {
          setTyping(false);
          setResult(`We fnid results of ${keyword}`);
        }

        return (
          <>
            <input onChange={handleChange} value={keyword} />
            <button onClick={handleClick}>search</button>
            <p>{typing ? `Loooking for ${keyword}...` : result}</p>
          </>
        );
      };

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

6. hook flow 이해하기

  • 훅의 호출타이밍알기
  • serach를 클릭하면 input이 나오게 하고 serch를 다시 클릭하면 input이 사라지고 밑에 내용이 나오게 하기
<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <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 = () => {
        console.log("child render start");
        const element = (
          <>
            <input />
            <p></p>
          </>
        );
        console.log("child render end");
        return element;
      };

      const App = () => {
        console.log("app lender start");
        const [show, setShow] = React.useState(() => {
          console.log("app useState");
          return false;
        });

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

        function handleClick() {
          setShow((prev) => !prev);
        }

        console.log("app lender end");

        return (
          <>
            <button onClick={handleClick}>Search</button>
            {show ? <Child /> : null}
          </>
        );
      };
      ReactDOM.render(<App />, rootElement);
    </script>
  </body>
</html>

hook flow 이해하기

hook flow 이해하기2

profile
koseony
프론트엔드 개발자
이전 포스트

[TIL] 220503 webpack

다음 포스트

[TIL] 220504 react맛보기 - element, jsx

0개의 댓글