메모이제이션이란?

🤩 메모이제이션이란?❓

🌱 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술입니다. 동적 계획법의 핵심이 되는 기술입니다.

---

🍄 리액트에서 제공하는 메모이제이션 기법은 아래 메소드들을 통해서 사용할 수 있습니다.

-👩‍💻 React.memo(컴포넌트), useCallback(() => { 함수 그 자체... }, []), useMemo(() => 함수의 리턴 값, [])

 

🍄 react의 메소드들은 어떤식으로 메모이제이션을 하고 있을까요?

-👩‍💻 React.memo()는 props의 값으로 변경을 확인합니다.

-👩‍💻 useCallback()과  useMemo()는 dependency 배열 내부의 값으로 변경사항을 확인합니다.

 

🍄 React.memo()

- 👩‍💻 컴포넌트 자체를 메모이제이션합니다.

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

import React from "react";


 const Post = React.memo((props) => {
   console.log("in post");
   return (
     <React.Fragment>
       ...
     </React.Fragment>
   );
 });

🍄 useCallback()

- 👩‍💻함수 자체를 메모이제이션

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

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

- 👩‍💻deps에 들어있는 의존성 값이 변경되지 않는다면 이전에 생성한 함수의 참조 값을 반환해줍니다.

const [value, setValue] = useState(0);

const test = useCallback(() => {
	console.log(value) // 0
	setValue(prevValue => prevValue +  1)
}, [])

🍄 useMemo()

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

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

 

🍄 위 함수들의 공통점

- 👩‍💻리렌더링이 자주 일어나지 않는다면 굳이 사용할 필요가 없습니다. (메모리에 불필요하게 남아있을 필요 ❌)

- 👩‍💻props나  state가 변경되는 경우가 대부분일 경우 굳이 비교 작업이 계속할 필요가 없기 때문에 사용하지 않습니다.

- 👩‍💻state나 props의 값이 어느 정도 적당히 변경되는 경우 사용해주면 좋을 것 같습니다.