[React] 11. useMemo를 통해 연산 완료된 값 재사용하기

백괴·2021년 9월 5일
0

리액괴

목록 보기
9/14
post-thumbnail

잘못 된 내용에 대한 지적은 언제든 환영입니다.

useMemo

  • 리렌더링 시 deps 배열 내의 값들의 변화가 없을 경우 특정 함수를 재실행하지 않도록 하는 Hook이다.
    👉 이전에 해당 함수를 실행 한 결과를 재사용하게 된다.
  • 리렌더링 시의 무지성 재연산을 막기 때문에 성능 최적화에 용이하다.

useMemo 함수의 구조

useMemo(function, deps)
  • function : deps 값 변화에 따라 수행시키고자 하는 작업
  • deps : 재연산 여부의 기준이 되는 값이 들어가는 deps 배열

useMemo 사용해 보기

예시 : endCount.current 값이 0일 때는 item이의 값이, 1일 때는 item2의 값이 true로 바뀌는 예시

const [item1, setItem1] = useState(false),
  [item2, setItem2] = useState(false);

// 렌더링에 따라 item1/item2의 업데이트 순서를 알려주는 변수
const endCount = useRef(0);

console.log("-----------렌더링-----------");

useMemo(
  () =>
    console.log("(endCount = " + endCount.current + ") item1 = " + item1),
  [item1]
);
useMemo(
  () =>
    console.log("(endCount = " + endCount.current + ") item2 = " + item2),
  [item2]
);

// 상태 변경 순서 : item1 ➡ item2
switch (endCount.current) {
  case 0:
    setItem1(true);
    endCount.current += 1;
    break;
  case 1:
    setItem2(true);
    endCount.current += 1;
    break;
  default:
    return null;
}

콘솔 출력 결과 : 첫 렌더링 시 두 콘솔 모두 실행된 뒤, endCount.current 값에 따라 각 함수가 실행되고 있음을 알 수 있다.

-----------렌더링-----------
(endCount = 0) item1 = false
(endCount = 0) item2 = false
-----------렌더링-----------
(endCount = 1) item1 = true
-----------렌더링-----------
(endCount = 2) item2 = true

References
"17. useMemo 를 사용하여 연산한 값 재사용하기" .velopert
"React Hooks : useMemo() 함수 컴포넌트 성능 최적화" .xiubindev*

0개의 댓글