React.memo를 사용한 컴포넌트 성능 최적화

클래스형에서는 shouldComponentUpdate라는 라이프 사이클을 사용해
리렌더링을 방지할 수 있다. 그러나 내가 처음 리액트를 배운 함수형 컴포넌트에서는
라이프사이클 메소드를 사용할 수 없다, 댜산 React.momo 함수를 사용할 수 있다.
컴포넌트의 props가 바뀌지 않았다면, 리렌더링 하지 않도록 설정하여 함수 컴포넌트의 리렌더링
성능을 최적화해줄 수 있다.

React.memo의 사용법은 매우 간단하다. 컴포넌트를 생성하고 감싸주기만하면 된다.

import React from 'react';

const App = ({props1, function, function2}) => {
// ...

};

export default React.memo(App);

이제 props1, function, function2 바뀌지 않으면 리렌더링을 하지 않는다

function과 function2 함수가 바뀌지 않게 하기

React.memo를 사용하는 것만으로는 컴포넌트 최적화가 끝나지 않는다. 현재 프로젝트에서는
특정 배열(예:todos)이 업데이트되면 function과 function2 함수도 새롭게 바뀌기 때문이다.
function과 function2함수는 배열 상태를 업데이트하는 과정에서 최선 상태의
특정 배열(예:todos)을 참조하기 때문에 todos 배열이 바뀔 때마다 함수가 새로 만들어진다.
이렇게 함수가 계속 만들어지는 상황을 방지하는 방법은 두 가지다.
첫 번째는 useState의 함수형 업데이트 기능을 사용하는 것이고, 두 번째는 useReducer를 사용하는 것이다.

useState의 함수형 업데이트

기존에 setTodos 함수를 사용할 때는 새로운 상태를 파라미터로 넣어 주었다고 가정해보자.
setTodos를 사용할 때 새로운 상태를 파라미터로 넣는 대신, 상태 업데이트를 어떻게 할지
정의해 주는 업데이트 함수를 넣을 수도 있다. 이를 함수형 업데이트라고 부른다.
예시를 보자.

const [number, setNumber] = useState(0);
const onIncrease = useCallback(
  () => setNumber(prevNumber => prevNumber + 1),
  [],
  );
};

출처 및 참고 : 리액트를 다루는 기술