스크롤 이벤트는 너무 많은 이벤트 감지로 성능저하를 불러 일으키게 되는데
react 환경에서는 성능저하를 어떻게 해결하는지 알아보다가 찾게된 키워드.
1. useEffect vs useLayoutEffect
useLayoutEffect(() => {
document.addEventListener("mousedown", outSideClicked);
return () => {
document.removeEventListener("mousedown", outSideClicked);
};
}, []);
// DOM 을 직접 제어할 때 useEffect 보다 useLayoutEffect 를 사용하는 것이 성능상의 이점을 준다.
// useEffect는 컴포넌트들이 렏더링 이후에 painting 된 이후 비동기적으로 실행되고,
// useLayoutEffect는 컴포넌트들이 렝더링 된 직후, painting 되기 이젠에 동기적으로 실행됨.
// paint 되기 이전에 sideEffect 로직을 수행하므로 사용자는 화면 깜빡임 이슈를 경험하지 않는다.
// 위와 같은 경우에도 useLayoutEffect가 성능상의 이점을 가져갈 수 있는지는 조금 의문이다.2. useMemo, useCallback
memoization
동일 한 값을 리턴하는 함수를 반복적으로 리턴할 때,
해당값을 메모리에 저장해 다음 함수의 추가 연산을 하지 않더라도
값을 메모리에서 꺼내서 사용할 수 있는 프로그래밍 기법.
컴포넌트는 컴포넌트의 함수를 호출하는 역할을 한다.
컴포넌트가 렌더링 될 때, 그러니까 컴포넌트라는 함수를 다시 호출하게 될 때,
내부에 시간이 오래걸리는 복잡한 연산을 수행하는 함수가 있다고 가정해보자.
컴포넌트가 렌더링 될 때마다 값은 초기화 되기 때문에 매번 함수가 실행된다.
그런데, 해당함수의 리턴값이 크게 변동사항이 없는 경우라면
이러한 로직은 성능상의 비효율을 가져오게 된다.
이때, 메모이제이션 기법을 사용하면 값을 메모리에 저장해두고,
렌더링이 되더라도 해당 함수의 리턴값을 기억하고 있으므로 함수의 실행을 하지 않아도 되어
성능상의 이점을 가져오게 된다.
useMemo
const value = useMemo(()=>calculate(),[])해당 Hook은
첫번째 인자로 콜백함수,
두번째 인자로 의존성 배열을 받는다.
첫번째 인자로 할당된 함수의 리턴값이 메모이제이션을 실행할 값이 되고,
두번째 인자는 해당 배열 내부의 값이 변하면 함수를 재호출하여 해당 값을 갱신한다.
실행순서는 렌더링 될 때 같이 실행된다.
useCallback
const calculate = useCallback((num)=>{
return num + 1
},[item])useMemo가 값을 캐싱해두는 역할을 한다면,
useCallback은 할당된 함수 그 자체를 메모이제이션 하는 역할을 한다.
해당 Hook은
useMemo와 전달받는 인자는 동일하나, 메모이제이션 하는 내용이 함수 그 자체라는 점이 차이점.
useCallback은 제공된 컴포넌트의 deps를 기준으로 반환된 함수 객체를 메모이제이션 한다.
그렇다면 언제 사용해야 하는가 ?
두 Hook은 무분별하게 사용하면 오히려 메모리의 낭비를 초래할 수 있으므로 주의해야한다.
음, 나처럼 병아리 단계에서 사용할 수 있는 사례는 다음과 같다.
- 컴포넌트가 반복적으로 그려지나 렌더링 이후에도 동일한 내용이 보여야하는 경우
= 대표적으로는 map, filter로 특정 컴포넌트를 반복적으로 호출할 때.
useMemo 사용에 적합하다.
- 자식 컴포넌트에서 useEffect가 반복적으로 불리우는 경우
- 렌더링 중 연산이 오래걸리는 함수를 재성성 하는 경우
= useCallback 사용에 적합하다.
리액트 devtools profiler 를 통해 컴포넌트의 렌더링 속도를 측정해볼 수 있으며,
렌더링 속도가 오래걸리는 경우에 적용해볼 수 있겠다.
사실 경험해보지 못한 내용이고 몇개의 예제를 통해서 추상적인 개념만 다뤄보아서
어느때에 사용해야 할 지 아직 잘 모르겠다.
또, 위의 사례가 제대로 된 사례인지도 잘 모르겠다.
🥲
