useMemo와 React.memo를 이용한 최적화

변화가 없다면 굳이 똑같은 연산을 하거나, 리렌더링을 할 필요가 없다.

 

그냥 이전에 쓰던 데이터를 다시 쓰면 된다.

 

리액트에는 값이 바뀌었을때만 리렌더링 혹은 연산 을 하게 하는 기능이 있다.

 

바로 useMemo, useCallback, React.memo이다.

 

 

---

UseMemo와 useCallback

useMemo와 useCallback은 사용법이 useEffect와 흡사하다.

 

두번째 인자에 들어간 배열의 값이 바뀌면 첫번째 인자인 콜백이 실행된다.

 

아래사진은 내가 useMemo를 사용한 방식이다.

이렇게 하면 tags[0] 혹은 tags[1]의 값이 바뀌었을때만 변수 memoTags에 바뀐 tags의 값을 할당한다.

 

useMemo가 '값'을 반환한다면 useCallback은 '함수'를 반환한다.

 

핵심은 값이 변하지 않았을때는 전에 쓰던것을 계속 사용한다는 것이다!

 

또 useMemo, useCallback은 이름에 use가 들어간걸 보고 눈치챈사람도 있겠지만 useEffect,useState처럼 함수형 리액트에서만 사용가능한 'Hook' 이다.

 

---

React.memo

React.memo는 props가 변경이 되지 않았다면 컴포넌트를 리렌더링하지 않겠다는 뜻이다.

컴퍼넌트의 export 부분을 React.memo로 감싸주거나,

애초에 선언을 React.memo에 감싸서 해주면된다. 상황에 따라 전자가 편할수도, 후자가 편할수도 있다.

 

React.memo는 첫번째 인자에 컴퍼넌트, 두번째인자에 콜백이 들어간다

 

두번째 인자에 들어가는 콜백에 콘솔로그를 찍어서 값을 확인해보자.

보시다시피, prev의 contentId와 next의 contentId가 같은것을 확인할 수 있다.

나는 닉네임이 변하지 않았다면, 리렌더링을 하지 않도록 하고 싶었기에 아래와 같이 nickname을 비교하였다.

export default React.memo(MyComment, (prev, next) => {
  console.log(prev, next);
//  얕은비교를 하기 때문에 정확한 값을 비교해주어야 한다.
  return prev.userinfo.nickname === next.userinfo.nickname;
});

 

 

React.memo 사용시 주의사항