React - 리액트 메모이제이션

[ 메모이제이션 ( Memoization ) ? ]

 

메모이제이션이란 프로그램에서 같은 계산을 반복하는 경우, 계산 결과를 메모리에 저장해두고 재활용하여 같은 계산을 반복하는 낭비를 막아 프로그램의 성능을 향상시키는 기술입니다

 

동적계획법(Dynamic Programming)의 핵심이 되는 기술로 계산값을 재활용하기 위해 메모리에 저장해두는것을 메모이징(Memoizing)이라고 합니다.

---

[ React의 Memoization ]

 

리액트의 메모이제이션은 세 가지로 이루어집니다

 

1. React.memo
2. useCallback
3. useMemo

---

[ 1. React.memo ]

 

컴포넌트에 둘러싸 컴포넌트 자체를 메모이제이션합니다.

 

이전 props와 동일한 props가 전달될 경우 새로 컴포넌트를 렌더링하지 않고 메모이징된 컴포넌트를 사용합니다

 

< 예시 >

 

 

[ 2. useCallback ]

 

메모이제이션된 콜백을 반환합니다.

 

컴포넌트가 리렌더링될때마다 새로운 함수가 생성되어 같은 내용의 함수를 props로 전달하더라도 레퍼런스가 달라 컴포넌트가 리렌더링 될 수 있습니다.

 

이때 메모이제이션된 함수를 props로 전달하면 이전과 같은 레퍼런스를 가진 함수가 props로 전달되어 컴포넌트 리렌더링이 일어나지 않습니다.

 

두 번째 인자로 deps 배열이 들어가는데 함수가 의존하고 있는 데이터값을 이 배열안에 선언해두어야합니다.

 

이 deps 배열에 있는 의존성값이 변경되지 않는다면 useCallback 함수는 이전에 생성한 함수와 동일한 레퍼런스값을 반환합니다.

 

 

<사용 예>

 

const reset = useCallback(() => {
    setNumber(0)
  }, [])

 

[ 3. useMemo ]

 

메모이제이션된 값을 반환합니다.

 

컴포넌트가 리렌더링될때마다 컴포넌트의 모든 함수, 객체는 초기화되고 재선언되어 같은 내용의 객체를 props에 전달해도 이전의 객체와 레퍼런스가 달라 컴포넌트가 리렌더링 될 수 있습니다.

 

이때 메모이제이션된 값을 props로 전달하여 컴포넌트 리렌더링이 일어나지 않도록 할 수 있습니다.

 

<사용 예>

 

const sampleObj = useMemo(() => ({sample: 'test'}), [])