ReactJS로 영화 웹 서비스 만들기(04

ReactJS로 영화 웹 서비스 만들기(04_2/props활용, React.memo)

과부하가즈아 2023. 7. 13. 15:21

https://nomadcoders.co/react-for-beginners/lobby

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

왕초보를 위한 React

nomadcoders.co

버튼을 클릭할 때 어떤 동작을 수행하도록 하고 싶다.

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- import -->

  <!-- React -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <!-- ReactDOM  -->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">

    function Btn({text}) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            boder: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      );
    }


    function App() {

      // state 생성
      const[value, setValue] = React.useState("Save Changes")

      // 함수생성
      const changeValue = () => {
        setValue("Revert Changes")
      }
      return (
        <div>
          <Btn text={value} onBtnClick={changeValue} /> 
          <Btn text="Confirm" />
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

function App() {

      // state 생성
      const[value, setValue] = React.useState("Save Changes")

      // 함수생성
      const changeValue = () => {
        setValue("Revert Changes")
      }
      return (
        <div>
          <Btn text={value} onBtnClick={changeValue} /> 
          <Btn text="Confirm" />
        </div>
      );
    }

> UI 만들어주기

<Btn text={value} onBtnClick={changeValue} />

> UI의 컴포넌트에 프로퍼티인 onBtnClick는 이벤트리스너가 아니고 그냥 프로퍼티에 들어가는 단지 하나의 props일 뿐이다.

(props로 함수도 보낼수있다는 점!)

이걸 작동하게 하려면

function Btn({text, onBtnClick}) {
  return (
    <button

    onClick={onBtnClick}

      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "10px 20px",
        boder: 0,
        borderRadius: 10,
      }}
    >
      {text}
    </button>
  );
}

> 하나의 props라고 했던 onBtnClick가 인자로 들고 오고

> 버튼에 onClick_찐 이벤트리스너를 달아주고 동작으로써 가져온 onBtnClick를 넣어주어야 한다.

function App() {

  // state 생성
  const[value, setValue] = React.useState("Save Changes")

  // 함수생성
  const changeValue = () => {
    setValue("Revert Changes")
  }

  return (
    <div>
      <Btn text={value} onBtnClick={changeValue} /> 
      <Btn text="Confirm" />
    </div>
  );
}

> props로 onBtnClick가 이벤트리스너는 아니지만 changeValue라는 함수를 불러오고 있다.

> 이를 props로 받아온 onBtnClick을 버튼의 이벤트리스너 동작으로 넣어주면 changeValue가 작동하게 되는 것이다.

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- import -->

  <!-- React -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <!-- ReactDOM  -->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">

    function Btn({text, onBtnClick}) {
      
      console.log(text, "was rendered");

      return (
        <button

        onClick={onBtnClick}

          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            boder: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      );
    }

    function App() {

      // state 생성
      const[value, setValue] = React.useState("Save Changes")

      // 함수생성
      const changeValue = () => {
        setValue("Revert Changes")
      }
      return (
        <div>
          <Btn text={value} onBtnClick={changeValue} /> 
          <Btn text="Confirm" />
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

console.log(text, "was rendered");

버튼을 클릭하게 되면

const changeValue = () => {
  setValue("Revert Changes")
}

> changeValue로 인해서 value가 바뀌게 되니까 다시 그려지는 것을(리렌더링됨을) 알 수 있는데(컴포넌트의 상태가 바뀌면 렌더링을 ) 여기서 굳이

<Btn text={value} onBtnClick={changeValue} /> 
<Btn text="Confirm" />

Confirm까지 리렌더링은 될 필요가 없다. 왜냐 변화된게 아무것도 없으니까

그래서 이때 불필요한 렌더링을 막아주기 위해서 React.memo를 사용해준다.

const MemorizedBtn = React.memo(Btn);

<MemorizedBtn text={value} onBtnClick={changeValue} /> 
<MemorizedBtn text="Confirm" />

> 클릭하면 이제 변화가 없는 Confirm은 렌더링 되지 않고 클릭시 변화가 있는 Save->Revert만 렌더링 되어 콘솔에 출력되는 것을 볼 수 있다.

> 부모 컴포넌트인 App의 어떤 state하나라도 변경이 있어나면 그 안의 자식 요소들은 전부 렌더링이 다시 되는데 이건 전체적으로 다시 발생하는 것이므로 성능적으로 좋지 않다. 그래서 React.memo를 사용해 변화가 없는 자식 요소들이 다시 렌더링되는것을 막는 것이다.

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- import -->

  <!-- React -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <!-- ReactDOM  -->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <!-- babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">

    function Btn({text, onBtnClick}) {
      
      console.log(text, "was rendered");

      return (
        <button

        onClick={onBtnClick}

          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            boder: 0,
            borderRadius: 10,
          }}
        >
          {text}
        </button>
      );
    }

    const MemorizedBtn = React.memo(Btn);

    function App() {

      // state 생성
      const[value, setValue] = React.useState("Save Changes")

      // 함수생성
      const changeValue = () => {
        setValue("Revert Changes")
      }
      return (
        <div>
          <MemorizedBtn text={value} onBtnClick={changeValue} /> 
          <MemorizedBtn text="Confirm" />
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>