불필요한 렌더링 방지(React.memo)

React.memo는 불필요한 렌더링을 방지하고,
아래 스니펫에서 저는 React.memo를 사용하고 있습니다. 이 구성 요소는 구성 요소가 마운트될 때만 렌더링되고 소품 수량이 변경되지 않으면 이전에 렌더링된 구성 요소를 계속 표시합니다.
그러나 Cart 구성 요소 자체에 상태가 있거나 useState, useContext, useReducer를 사용하는 경우 반드시 렌더링됩니다.

//Cart.js
const Cart = ({ quantity }) => {
  console.log("Rendered Cart!");
  return <>Number of item is {quantity}</>;
};
export default React.memo(Cart);

아래 스니펫에서 Cart 구성 요소가 렌더링되고 있으며 수량을 소품으로 전달하므로 수량 버튼을 클릭할 때마다 Cart 구성 요소가 다시 렌더링되지만 입력할 때 다시 렌더링되지는 않습니다. 검색 텍스트 상자에서

//App.js
import Cart from "./Cart";

import { useState } from "react";
export default function App() {
  const [quantity, setQuantity] = useState(0);
  const [search, setSearch] = useState();
  return (
    <div className="App">
      <Cart quantity={quantity} />
      <hr />
      <label>Quantity </label>
      <button
        onClick={() => {
          setQuantity(quantity + 1);
        }}
      >
        {quantity}
      </button>
      <hr />
      <label>Search </label>
      <input
        onChange={(event) => {
          setSearch(event.target.value);
        }}
      ></input>
    </div>
  );
}