~46일차~
강의자료(비공개)와 해당 블로그 를 참고해 가볍게 복기 겸 정리를 했습니다.
정확하지 않는 표현이나 내용이 있다면 편하게 댓글 부탁드립니다.
최적화가 필요할 때
*기본적으로 state가 변경될 때마다 렌더링을 하는데, 불필요한 렌더링을 할 수록 웹이나 앱이 느려질 수 있다.
처음부터 설정하는 것이 아닌 나중에 필요를 느낄 때 적용하는 것이 좋다.
앱 속도를 느리게 하고 최적화가 필요하게 하는 컴포넌트들
- 무거운 컴포넌트
- 계산을 수행하는 컴포넌트
- API 요청을 보내는 컴포넌트
- 브라우저의 eventListener를 사용하는 컴포넌트
React.memo
React.memo으로 둘러 쌓인 컴포넌트는 렌더링 후 결과를 메모이징(Memoizing)한다.
그리고 다음 렌더링 때, 렌더링하는 컴포넌트의 props가 같다면 메모이징(Memoizing)한 내용을 재사용한다.
사용하면 좋을 때
- 컴포넌트가 같은 props로 잦은 렌더링 될 때
- props가 복잡한 Object일 때
- 컴포넌트가 리액트 트리에서 중위-상위 레벨에 해당하는 경우 (ex: Header, Footer, Layout HOC,,,)
사용을 지양해야 할 때
- props가 자주 변하는 컴퍼넌트
Memoization
- 주어진 입력 값에 대한 결과를 저장함으로써, 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장한다.
- 비용이 많이 드는 함수 호출의 결과를 저장하고, 동일한 입력이 다시 발생할 때 캐시된 결과를 반환.
-> 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술
useCallback
- Memoization된 함수를 반환하는 함수
// 콜백함수, 의존성 배열
const testFunction = useCallback(() => {}, []);- 함수 내에서 참조하는 state, props가 있다면 의존성 배열에 추가해서 사용.
사용하면 좋을 때
- 자식 컴포넌트가 React.memo로 최적화 되어 있고,
그 자식 컴포넌트에게 해당 함수를 props로 넘겨줄 때
useMemo
- 종속성 배열의 요소가 바뀔 때에만 다시 계산
-> 비싼 계산을 해야하는 잘 바뀌지 않는 값의 리렌더링을 방지할 때 유용하다. useCallback과 흡사다만,
useCallback은 메모이제이션된 함수를 반환
useMemo은 메모이제이션된 값을 반환
