• 🤔부모 컴포넌트가 리랜더링되면 아래 자식 컴포넌트도 리렌더링된다.
• 🤓각각 자식컴포넌트에 업데이트 조건을 건다.
  

📌React.memo

• 똑같은 props를 받으면 다시 렌더링 하지 않겠다.

• 리액트 공식문서 사이트 보기
  https://ko.legacy.reactjs.org/docs/getting-started.html
  
  

• 강화된 컴포넌트
  

• 카운트 컴포넌트, 텍스트 컴포넌트 코드(React.memo 사용)

import React, { useState, useEffect } from "react";

const Textview = React.memo(({ text }) => {
  useEffect(() => {
    console.log(`updata :: text : ${text}`);
  });
  return <div>{text}</div>;
});

const CountView = React.memo(({ count }) => {
  useEffect(() => {
    console.log(`updata :: count : ${count}`);
  });
  return <div>{count}</div>;
});

const OptimizeTest = () => {
  const [count, setCount] = useState(1);
  const [text, setText] = useState("");
  return (
    <div style={{ padding: 50 }}>
      <div>
        <h2>Count</h2>
        <CountView count={count} />
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
      <div>
        <h2>Text</h2>
        <Textview text={text} />
        <input value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    </div>
  );
};

export default OptimizeTest;

• 객체를 비교할때는 얕은 비교를해서 React.memo를 해도 리렌더되다.
  

• 값도 같고 모양도 같아도 다르다.

• 주소의 비교 (얕은 비교)
  

• 같은 주소에 있느냐를 비교
  

• 이렇게 같은 주소로 쓰면 같아짐
  
  

객체도 얕은 비교안하고 값을 비교해서 렌더링 안되게 만들기!

• 객체값을 비교하는 함수 areEqual
• React.memo 뒤에 컴포넌트와 비교 함수를 넣어준다.const MemoizedCounterB = React.memo(CounterB, areEqual);
• <MemoizedCounterB obj={obj} /> 컴포넌트를 넣어준다.

import React, { useState, useEffect } from "react";

⭐ const CounterA = React.memo(({ count }) => {
  useEffect(() => {
    console.log(`counterA : ${count}`);
  });
  return <div>{count}</div>;
});
⭐ const CounterB = ({ obj }) => {
  useEffect(() => {
    console.log(`counterB : ${obj.count}`);
  });
  return <div>{obj.count}</div>;
};
// ⭐객체값을 비교하는 함수
const areEqual = (prevProps, nextProps) => {
  // ⭐if (prevProps.obj.count === nextProps.obj.count) {
  //   //true를 전달하면 React.Memo가 동작하지 않는다.
  //   return true;
  // }
  // return false;
  //⭐간단하게 작성
 ⭐ return prevProps.obj.count === nextProps.obj.count;
};
// ⭐이렇게 적으면 areEqual함수에 따라서 CounterB 객체는 새로운 값이 기존값과 같으면 리랜더링 되지 않는다.
// areEqual이 true면 리렌더링 x false면 리랜더링 o
const MemoizedCounterB = React.memo(CounterB, areEqual);

const OptimizeTest = () => {
  const [count, setCount] = useState(1);
  const [obj, setObj] = useState({
    count: 1,
  });
  return (
    <div style={{ padding: 50 }}>
      <div>
        <h2>Counter A</h2>
        <CounterA count={count} />
        {/* 똑같은 값을 가지게된다. */}
        <button onClick={() => setCount(count)}>A button</button>
      </div>
      <div>
        <h2>Counter B</h2>
       ⭐ <MemoizedCounterB obj={obj} />

        <button
          onClick={() =>
            setObj({
              count: obj.count,
            })
          }
        >
          B button
        </button>
      </div>
    </div>
  );
};

export default OptimizeTest;