React.memo

React의 memo method는 불필요한 리렌더링을 방지하기 위한 함수이다. 리렌더링을 할지 말지의 여부는 간단하게 컴포넌트에서 사용하는 props의 변경 여부이다.

const Lists = React.memo(({ todoList, setTodoList }) => {
    console.log("Lists component");

    // result는 결과가 담겨온다. console.log로 확인가능
    // 그 중 result의 destination property를 이용한다.
    const handleEnd = (result) => {
        console.log(result)
      ... 
      
 }
      
export default Lists;

위는 memo를 사용한 예제인데 Lists 컴포넌트는 부모 컴포넌트로 부터 2개의 props를 받는다. 만약 두 props에 변경점이 없다면 부모 컴포넌트가 리렌더링이 되더라도 Lists 컴포넌트는 리렌더링이 되지 않는다. todoList, setTodoList가 변경되지 않으면 Lists 컴포넌트는 리렌더링되지 않는다.

요약하자면, 부모 컴포넌트가 리렌더링이 되면 하위 컴포넌트는 모두 리렌더링이 된다. 최상단 컴포넌트에서 state 변수가 setter함수에 의해 변경된다면 해당 컴포넌트는 리렌더링이 되고 재귀적으로 모든 컴포넌트들이 리렌더링이 되는 것이다.
위 현상을 간단하게 막아줄 수 있는 것이 React.memo()이며 기존에 arrow 함수를 memo()의 인자(콜백함수)로 넣어주면 된다.

useCallback()

원래 컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 됩니다. 하지만 똑같은 함수를 컴포넌트가 리 렌더링 된다고 해서 계속 다시 만드는 것은 좋은 현상은 아니다. 그리고 이렇게 컴포넌트가 리 렌더링 될 때마다 함수를 계속 다시 만든다고 하면 만약 이 함수가 자식 컴포넌트에 props로 내려 준다면 함수를 포함하고 있는 컴포넌트가 리 렌더링 될 때마다 자식 컴포넌트도 함수가 새롭게 만들어지니 계속 리 렌더링 하게 된다.

쉽게 말해 부모 컴포넌트의 function을 props로 받은 자식 컴포넌트에서는, function이 리렌더링이 된다면 당연히 위에서 살펴본 react.memo로 감싸진 컴포넌트였어도 리렌더링이 된다.

하지만 함수는 함수 자체가 변하는 것이 아니라면 리렌더링에 포함되지 않아야 바람직하다. 그래서 useCallback()을 통해서 함수의 리렌더링을 막을 수 있다.

사용법은 useCallback()의 인자로 첫번째는 콜백함수(기존에 사용하던 함수), 두번째는 의존성 배열을 넣는 것이다. 해당 배열이 변경되면 함수는 리렌더링이 되고 의존성 배열이 빈값이라면 최초 렌더링시에만 함수가 생성된다.

예시

useMemo

메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술이다.

위 그림에서 compute 함수가 연산이 오래 걸린다면

아래와 같이 useMemo()로 감싸주어서 compute 함수의 인자로 넘어가는 a, b값이 이전과 동일하다면, 컴포넌트가 리렌더링이 되어도 compute함수는 실행되지 않고 이전의 result 값을 사용하도록 하는 것이다.

useMemo()의 인자는 두개이다. 첫 번째는 기존에 오래걸리는 함수를 콜백함수로 넣고 두 번쨰는 해당 함수의 인자를 배열로 주면 된다.