2023년 08월 31일

1. React의 리렌더링

react를 사용하여 서비스를 개발할 때 항상 고민해야 하는 부분이 리렌더링에 관한 부분이다. 리렌더링 최적화에 대해 항상 고민해야 품질 좋은 서비스를 제공할 수 있다. 기본적으로 react에서 리렌더링은 아래와 같은 상황에서 발생한다.

• 부모 컴포넌트가 렌더링 될 때
• 자신의 state가 변경 될 때, (단 setState를 사용하여 변경해야한다. state를 직접 변경할 경우 state의 변경을 감지하지 못하기때문에 render 함수가 호출 되지 않는다.)
• 자신이 전달받은 props가 변경될 때

하지만 위 내용만으로는 리렌더링 최적화를 적용하기에는 부족함이 있다. 리렌더링의 조건을 더 자세히 알아보자.

2. React의 부모/자식 관계와 형제 관계

리렌더링의 조건을 알아보기 위해 먼저 컴포넌트의 관계에서 부모/자식 관계와 형제 관계를 구분해야한다. 아래 예시를 보자.

// RenderParent.tsx
import { useState } from "react";
import RenderChild1 from "./RenderChild1";
import RenderChild2 from "./RenderChild2";
import RenderChild3 from "./RenderChild3";
import RenderTestButton from "./RenderTestButton";

const RenderParent = () => {
  console.log("render Parent");
  const [state, setState] = useState(false);

  return (
    <div>
      <RenderTestButton
        name={"Parent"}
        onClick={() => setState((prev) => !prev)}
      />
      <RenderChild1>
        <RenderChild2>
          <RenderChild3 />
        </RenderChild2>
      </RenderChild1>
    </div>
  );
};

export default RenderParent;

부모 컴포넌트인 RenderParent가 자식 컴포넌트인 RenderChild1, RenderChild2, RenderChild3를 포함하고 있다. 또한 컴포넌트 내부에서는 렌더링을 체크하기 위한 console.log가 있고 컴포넌트 자신이 가지고 있는 state를 업데이트 시키기 위한 버튼 컴포넌트가 포함되어 있다.