렌더링 최적화

아래 내용은 노마드코더님의 강의에서 배운 내용을 기반으로 작성하였습니다.

memo

어떤 함수의 State가 변경된다면 그 함수는 re-render가 될 것입니다. 여기까지는 당연하다고 생각할 수 있지만, 부모 컨포넌트의 state가 수정된다면 바뀔 필요가 없는 자식 컴포넌트까지 수정될 수도 있습니다.
예를 들면 아래와 같습니다.

function App() {
    const [value, setValue] = React.useState(0);
    
    render(
        <Comp1 prop={value} />
        <Comp2 />
    );
}

만약 value라는 state가 변경된다면, Comp1은 직접적인 연관이 있기 때문에 re-render되는 것이 맞지만, 아무 영향을 받지 않는 Comp2까지 re-render되기 때문에 React를 사용하는 이유가 사라집니다.

이를 해결하기 위해 memo()라는 함수가 존재합니다.
const Memorization = React.memo(Comp2);
위와 같이 React.memo(Comp2)라고 사용하고, App()함수에 Memorization이란 컴포넌트를 사용하면, 이 컴포넌트는 props가 변경될 때만 Comp2를 렌더링하게 됩니다.