메모제이션은 계산의 결과를 기억함으로써 동일한 계산을 반복하지 않도록 한다. (불필요한 계산 최소화가 목적이다.)
React에서의 메모제이션은 React.memo, useMemo, useCallback이 있다.
React.memo
React.memo는 고차 컴포넌트(HOC : High Order Component→ 높은 선언형 컴포넌트)이다.
컴포넌트가 같은 props로 이전과 같은 렌더링을 한다면 React.memo를 호출하고 결과를 Memoizing하도록 래핑하여 특정한 경우에 따라 성능을 향상 시킬수 있다.
먼저 React.memo가 유용하게 사용될 예시를 보자
위의 코드에서는 버튼을 눌러 count값을 갱신 시키면 props를 전달받은 UnderReactMemo컴포넌트역시 렌더링이 이루어진다.
위와 같은 예제는 자식 컴포넌트가 크지 않은 상황이라 웹 전체에 크게 영향이 없지만 만일 큰 연산이 포함되어 있는 컴포넌트거나 여러 이유로 크기가 큰 컴포넌트라면 성능에 좋지않은 영향을 줄 수 있다.
따라서 자식 컴포넌트의 렌더링을 막기 위해서는 메모제이션 방법 중 하나인 React.memo를 사용한다.
위와 같은 예제는 자식 컴포넌트가 크지 않은 상황이라 웹 전체에 크게 영향이 없지만 만일 큰 연산이 포함되어 있는 컴포넌트거나 여러 이유로 크기가 큰 컴포넌트라면 성능에 좋지않은 영향을 줄 수 있다.
따라서 자식 컴포넌트의 렌더링을 막기 위해서는 메모제이션 방법 중 하나인 React.memo를 사용한다.
import React from "react";
interface Props{
props:string
}
const UnderReactMemo = ({props}:Props) => {
console.log("렌더링 됨")
return (
<div>{props}</div>
)
}
const MemoizedUnderReactMemo= React.memo(UnderReactMemo);
export default MemoizedUnderReactMemo;코드를 이런식으로 수정하여 자식 컴포넌트의 불필요한 렌더링을 막을 수 있다.
const MemoizedUnderReactMemo= React.memo(UnderReactMemo);
export default MemoizedUnderReactMemo;이 부분을 왜 이렇게 작성했냐 의문이 들 수도 있다.
해당 부분은 eslint의 Fast Refresh 와 관련된 오류로서 import부분에 컴포넌트 이외의 값이 들어가면 생기는 오류다.
따라서 변수로 한번 래핑해주고 export해주면 된다.
위 처럼 클릭을 연타해도 하위 컴포넌트는 끄떡없는 모습을 볼 수 있다.
React.memo 주의사항
React.memo에서 주의해야 할 점은 같은 props로 리렌더링이 발생할 경우에만 사용해야한다.
수시로 변하는 props를 받는 컴포넌트는 아무리 memo로 감싸도 공간만 차지하는 꼴이 발생하게 된다.
도움받은 포스트
https://seoko.me/post/7
