📌오늘 공부한 일
- 렌더링 최적화
오늘은 렌더링 최적화에 대해 깊은 고민을 했다.
재렌더링을 방지하는 방법은 여러가지 있지만 그 중 3가지로 정리해본다.
1)React.memo를 이용한 컴포넌트 메모이제이션
React.memo는 컴포넌트를 래핑해 props를 비교해 리렌더링을 막는 메모리제이션 기법을 제공하는 함수이다. 이건 훅이 아니기때문에 함수형 뿐만아니라 클래스형 컴포넌트에서도 사용가능하다.
함수형 컴포넌트에서는 sholoudComponentUpdate를 사용할 수 없는데 리엑트 공식문서에서 그 대안으로 React.memo를 제안한다.
React.memo는 콜백함수를 이용해 메모이제이션을 적용할지 여부를 판단할 수 있다.
2)useMemo 사용하기
만약 컴포넌트 내에 어떤 함수가 값을 리턴하는데 많은 시간을 소요하면 리렌더링 될 때 마다 함수가 호출 되면서 많은 시간을 소요하게 된다.
그리고 그 함수가 반환하는 값을 하위 컴포넌트가 사용한다면 그 하위 컴포넌트는 매 함수 호출 마다 새로운 값을 리렌더링한다.
useMemo는 이런 점을 방지해준다. 종속변수들이 변하지 않으면 함수를 굳이 다시 호출하지 않고 이전에 반환한 값을 재사용한다.
그러므로 함수호출 시간도 줄이고, 값을 props로 받는 하위 컴포넌트의 리렌더링도 방지할 수 있게 되는것이다.
3)useCallback
useCallback도 useMemo와 같이 렌더링 최적화에 많이 활용되는 함수중 하나이다. useCallback으로 함수를 선언해주면 종속 변수들이 변하지 않으면 굳이 함수를 재생성하지 않고 이전에 있던 참조 변수를 그대로 하위 컴포넌트에서 props로 전달하여 하위 props가 변경되지 않았다고 인지하게 된다.이에 따라 하위 컴포넌트의 리렌더링을 방지할 수 있게 된다.
useMemo와 useCallback을 비교해서 정리하자면..
1.useMemo : 메모리제이션된 값을 반환. when? 복잡한 계산이고, 자식 컴포넌트에서 특정한 props 값들의 변화를 최적화시키고 싶은 경우 주로 사용
→의존성 배열에 넘겨준 값이 변경되었을 때만 메모리제이션된 값을 다시 계산한다
2.useCallback : 메모리제이션된 함수를 반환 when? 부모 컴포넌트에서 계산량이 많은 props함수를 자식 컴포넌트에게 넘겨줄 때 사용
둘다 계산이 좀 복잡한 경우 사용하는 것이 효과적이기 때문에 우리 프로젝트에서는 사용하지 않게 되었지만 나중에 더 복잡한 계산이 필요할 때 사용해봐야겠다.🎉
📌참고 자료
렌더링 최적화 https://cocoder16.tistory.com/36
