불필요한 리렌더링 방지하기(feat. React)

리렌더링이 발생하는 상황

1. 부모 컴포넌트가 리렌더링 될 때
2. 자신의 state가 변경될 때
3. 전달받은 props가 변경될 때
4. forceUpdate(강제 리렌더링) 함수가 실행될 때

메모이제이션이란?

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

useMemo

const memoizedValue = useMemo(() => returnValue, [deps]);

useCallback

const memoizedFunction = useCallback(fn, [deps]);

💡 React.memo()

React.memo(Component, callback);

언제 사용해야할까?

 이것들을 사용해서 메모이제이션 하는 게 좋아보이긴 하는데, 매번 쓰는 게 좋으면 코드 짤 때마다 다 이거 쓸텐데 그러지는 않고.. 언제 사용하는 게 좋을까?

• 사용해보자
  • 불필요한 재연산, 리렌더링이 자주 일어날 때
    
  • React.memo를 이용해 메모이제이션 한 자식 컴포넌트로 함수나 값을 넘겨줄 때
    • 함수는 useCallback, 값은 useMemo(Object, Array 등 referecne value)
    • 부모 컴포넌트가 리렌더링될 때마다 넘겨주는 함수/값이 재선언되어 자식 컴포넌트는 props가 달라졌다고 인식하기 때문
• 다시 생각해보자
  • 비싼 연산이 아닐 때(Data Fetching 등)
  • 대부분의 경우 primitive value는 그냥 계산하는 것이 useMemo를 적용하는 것보다 메모리 소모 적음
  • useState의 초기값은 컴포넌트가 언마운트될 때까지 재연산하지 않기 때문에 적용하지 않는 편이 나음

더 나아가서,

useMemo를 사용하는것과 useState + useEffect는 어떤 차이가 있을까?

• useState + useEffect일 경우, 불필요한 리렌더링 발생
  → 일단 useState 초기값을 선언한 다음, useEffect로 해당 값을 업데이트 하기 때문
• 코드의 가독성 측면에서 봤을 때 useMemo 하나로 처리하는 게 더 깔끔

참고자료

• Hooks API Reference
• React Top-Level API
• React.memo() 현명하게 사용하기
• 이제는 사용해보자 useMemo & useCallback
• [React] useEffect dependency array에 object와 array 넣기
• When Using useMemo is A Really Bad Idea