React 렌더링 최적화라 하면 React.memo, useCallback, useMemo 같은 최적화 기법을 사용해서 리렌더링을 최소화하는 것을 의미한다.

React.memo, useCallback, useMemo 와 같은 React의 렌더링 최적화 기법들을 알아보기 전에, React가 언제 리렌더링 되는지 언제 불필요한 리렌더링이 발생하는지 또 왜 불필요한 리렌더링을 방지해야 하는지를 살펴보자!

<aside> ❓

React는 언제 리렌더링 될까? 🧐

</aside>

React에서 컴포넌트의 리렌더링이 일어나는 조건은 다음과 같다.

1. 특정 컴포넌트가 상속받은 props가 변경 되었을 때 그 컴포넌트는 리렌더링 됨.
2. 부모 컴포넌트가 리렌더링 될 때 자식 컴포넌트는 모두 리렌더링 됨.
3. 특정 컴포넌트의 state가 변경되었을 때 그 컴포넌트는 리렌더링 됨.
   • 여기에서 props는 state, 변수, 함수 모두 될 수 있다.
     • props로 state를 전달 받았을 때 props의 값이 바뀐다는 것은 state가 변경되었을 때를 의미하고
     • props로 변수를 전달 받았을 때는 변수의 값 자체가 바뀌었다는 것을 의미하고
     • props로 함수를 전달 받았을 때는 함수를 넘겨주는 부모 컴포넌트의 리렌더링으로 함수가 재생성 되었을 때를 의미 (2번의 이유가 있기에 함수 재생성만으로는 자식 컴포넌트의 리렌더링의 이유가 될 수는 없음)

이때, 위의 조건들로 인해 불필요한 리렌더링이 발생하는 경우가 생긴다!! 😫

1. 부모 컴포넌트의 리렌더링으로 인해 자식 컴포넌트가 리렌더링 되는 경우

   • 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 기본적으로 리렌더링 된다. 이때 자식 컴포넌트의 props가 실제로 변경되지 않았는데도, 상속 관계 하나로 불필요한 리렌더링이 발생한다.

2. 함수나 객체가 props로 전달될 때 재생성으로 인해 리렌더링되는 경우

   • props로 전달되는 함수나 객체가 실제로 실행되거나 수정되지 않았더라도, 부모 컴포넌트가 리렌더링되어 함수나 객체가 재생성되면 자식 컴포넌트는 그 값을 새로운 값으로 인식하고, props가 변경되었다고 판단하여 리렌더링을 발생시킨다. 이는 React가 객체나 함수의 동일성(reference equality)을 기준으로 props의 변경 여부를 판단하기 때문이다. 즉, 함수나 객체의 내용이 같더라도, 새로운 함수나 객체가 생성되면 그 참조(reference)가 달라지기 때문에 React는 해당 props가 변경된 것으로 인식한다.

3. 상태나 props가 객체 또는 배열일 때 참조(reference) 비교로 인해 리렌더링되는 경우

   • 2번의 경우와 흡사하다. 2번은 함수와 객체를 집중적으로 다뤘지만, props로 전달될 수 있는 것에는 객체, 함수 말고도 배열과 같이 참조를 기반으로 비교되는 요소 또한 있다. 객체나 배열은 참조(reference)를 기반으로 비교된다. 부모 컴포넌트에서 새로운 객체나 배열을 생성해 자식에게 전달하면, 값은 같더라도(실제로 변경 X) 참조가 변경되었기 때문에 자식 컴포넌트는 props가 변경된 것으로 인식하고 리렌더링 된다.