props가 변경되지않는 컴포넌트는 리렌더링하지 않도록 하기-memo

// html에 이벤트가 발생하도록 내가 직접!! props를 넣어주어야한다. 
 function Btn({ banana, onClick }) {
      return (
        // 버튼의 onClick이라는 이벤트리스너도 직접 넣어주어야 당연히 작동!
        <button
          onClick={onClick}
          style={{...
               




    function App() {
      const [value, setValue] = React.useState("Save Changes");
      
      const changeValue = () => {
        setValue("Revert Changes");
      };

      return (
        <div>
          //여기서 onClick 은 이벤트가 아니라, Btn의 prop 이름일뿐이라는 것을 명심!
          <Btn banana={value} onClick={changeValue} />
          <Btn banana="Continue" />
        </div>
      );
    }

컴포넌트에 키값을 넣는다고 해서

절대 자동적으로 return 안에 들어가지 않는다!

위의 onClick과 같이 파라미터에 직접 넣어주어야 한다!

---

부모 컴포넌트의 state의 변경이 발생한다면
자식컴포넌트들은 모두 리렌더링된다.

버튼2개 중 1개만 변화가 발생해도 모든 버튼이 리렌더링된다.
만약 이것이 싫다면

memo() 라는 함수를 사용해 변하지않은 컴포넌트는 리렌더링되지않도록 할 수 있다.

const 리렌더링방지이름 = React.memo(자식컴포넌트)

function App(){
  ...
  return(
    <div>
    <리렌더링방지이름 변화하는컴포넌트="샬라샬라"/>
    <리렌더링방지이름 변화하는컴포넌트="어쩌구저쩌구"/>
    </div>

이 방법을 사용하면

props가 변경되지 않는 컴포넌트는 리렌더링되지않아 속도가 느려지는걸 방지할 수 있다.