React) 메모이제이션

메모이제이션

연산의 결괏값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때 재사용하는 기법

 

 

그렇다면 react의 메소드들은 어떤식으로 메모이제이션을 하고 있을까?

React.memo()는 props의 값으로 변경을 확인을하고

useCallback()과  useMemo()는 dependency 배열 내부의 값으로 변경사항을 확인한다.

 

React.memo()

- 컴포넌트 자체를 메모이제이션

- 자체적으로 props값을 비교해서 달라진 부분이 없다면 리액트 DOM에서 비교 작업이 들어가지 않는다.

 

useCallback()

- 함수 자체를 메모이제이션

- 자바스크립트에서 함수는 객체로 취급되기 때문에 리렌더링이 일어날 때마다 새로운 함수가 생성

- 자식 컴포넌트의 불필요한 리렌더링을 막기 위해선 useCallback()으로 감싸줘야 함.

 

useMemo()

- 함수의 리턴 값을 메모이제이션

- deps에 들어있는 의존성 값이 변경되지 않는다면 메모이제이션 된 값을 사용.

 

 

위 함수들의 공통점

• 리렌더링이 자주 일어나지 않는다면 굳이 사용할 필요가 없다. (메모리에 불필요하게 남아있을 필요 없음)
• props나  state가 변경되는 경우가 대부분일 경우 굳이 비교 작업이 계속할 필요가 없기 때문에 사용X
• state나 props의 값이 어느 정도 적당히 변경되는 경우 사용해주면 좋을 듯.