리액트 불필요한 랜더링 방지

1. 변경전 

const AdditonalInfo = () => {
	return <p>Some Information</p>
};

const Component1 = ({count, setCount}) => {
	return (
    	<div>
        	{count}
         <button>{() => setCount((c) => c+1)}
         Increment Count1
         </button>
         <AdditonalInfo />
         </div>
         );
         };
         
const Component2 = ({ count, setCount }) => {
  return (
    <div>
      {count}
      <button onClick={() => setCount((c) => c + 1)}>Increment Count2</button>
    </div>
  );
};
         
         
  const Parent = () => {
  	const [count, setCount] = useState(0);
    return (
      <>
      	<Component1 count={count} setCount={setCount} />
        <Component2 count={count} setCount={setCount} />
      </>
      );
      };

 
버튼 카운트가 발생할때 마다 AdditonalInfo컴포넌트도 함께 리랜더링된다. AdditonalInfo컴포넌트는 카운트에 의존하지 않기 때문에 리랜더링할 필요가 없다.
 
 
 
2. 변경 후 

const AdditonalInfo = () => {
  return <p>Some information</p>;
};

const Component1 = ({ count, setCount, additionalInfo }) => {
  return (
    <div>
      {count}
      <button onClick={() => setCount((c) => c + 1)}>Increment Count1</button>
      {additionalInfo}
    </div>
  );
};

const Parent = ({ additionalInfo }) => {
  const [count, setCount] = useState(0);
  return (
    <>
      <Component1
        count={count}
        setCount={setCount}
        additionalInfo={additionalInfo}
      ></Component1>
      <Component2 count={count} setCount={setCount}></Component2>
    </>
  );
};

// Parent 컴포넌트는 AdditonalInfo 컴포넌트를포함한다 그래서 count가 변경될때 리렌더링 방지
const GrandParent = () => {
  return <Parent additionalInfo={<AdditonalInfo />}></Parent>;
};

 
불필요한 리랜더링을 방지하기 위해 JSX요소를 상위 컴포넌트로 끌어올릴 수 있다. GrandParent 컴포넌트를 보면 Parent컴포넌트에 자식에게 전달되는 AdditonalInfo컴포넌트를 가진다. 그래서 리렌더링 될때 카운트만 렌더링 되는것을 볼 수있다.
 
 

p태그는 렌더링영향을 받지않는다

 
 
 
리액트 훅을 활용한 마이크로 상태 관리 - 예스24 (yes24.com)

리액트 훅을 활용한 마이크로 상태 관리 - 예스24