1. 메모이징이란?

• memoization은 기존에 수행한 연산의 결과 값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.
• memoization을 적절히 사용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다고 한다.

2. React.memo

컴포넌트 차원의 메모이징

1) 불필요한 리렌더링 방지

• 부모 컴포넌트의 state를 변경하면 당연히 그 자식 컴포넌트들도 리렌더링이 일어난다.
• 리렌더링이 필요없음에도 부모 컴포넌트로 인해 어쩔 수 없이 리렌더되는 컴포넌트가 많아지면 앱이 느린 것 처럼 보인다.
• 이렇게 불필요한 렌더링이 발생하는 경우 memo로 prop의 변경이 일어난 컴포넌트만 리렌더링 시킬 수 있음.
• 아주 많은 자식 컴포넌트를 가지고 있는 부모 컴포넌트일 때 그 자식 컴포넌트에 메모이징을 사용하면 될 듯하다.

2) 로직

• 컴포넌트가 React.memo의 인자로 들어가면, React는 컴포넌트를 렌더링하고 결과를 메모이징(Memoizing)한다.
• 그리고 다음 렌더링이 일어날 때 변화된 prop이 없다면, 불필요한 리렌더링은 하지 않고 리액트는 메모이징(Memoizing)된 내용을 재사용한다.
• 나는 소파 작업 중 Memo를 DisplayComment부분과 SkillBoard, Skill쪽에서 사용했었다.

3. useMemo와 useCallback

값, 함수 차원의 메모이징

1) useMemo

메모이징된 '값'을 반환

• useMemo함수는 X버튼을 누를 때만 실행될 것이다.

2) useCallback

메모이징된 '함수'를 반환

• Y버튼을 8번 누르고 X버튼을 누르면 ex에 변화가 생기게 되므로 useCallback 함수를 할당받은 useCallbackReturn이 실행된다.
• useCallbackReturn를 실행시켜보면 8이라는 숫자가 콘솔에 찍힐 것임

3) 결론

• useMemo((...)=>fn, deps) === useCallback(fn, deps) 는 결국 같은 식이다.
• 위 코드대로 라면 useMemo는 함수 자체가 값이 되므로 값으로서의 함수를 반환할 것이고 useCallback은 함수를 반환할 것이기 때문이다.

4. 의견

• 메모이징은 최적화 작업시 매우 중요하다.
• 불필요한 리렌더링이 다수 일어난다면 이는 앱의 속도와 직결될 수 있기 때문이다.
• 따라서 부모 컴포넌트에 의해, 혹은 전역 state 사용에 의해, 리렌더링의 영향 범위 내에 있으나 값이 변하지 않는 컴포넌트나 값인 경우에는 리렌더링을 시키지 않는 최적화 작업을 해주는 것이 매우 중요한 포인트라고 생각한다.