React - 2

rendering 최소화

---

rerendering이 발생되는 조건

1. state 변경될 때

2. props가 변경될 때

3. 부모 컴포넌트가 변경될 때 

4. forceUpdate()가 호출될 때 

-  state 또는 props가 변경되면, 컴포넌트가 다시 rendering 하지만 render() 메서드가 다른 데이터 값에 의존하는 경우 forceUpdate()를 호출하여 rendering을 다시 수행할 수 있다. 

 

 

 

useCallback 

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

컴포넌트가 렌더링 될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용된다. 성능 최적화를 위해 useCallback을 사용하면 특정 함수를 새로 만들지 않고 재사용할 수 있다. 

 

useCallback 에는 첫 번째 파라미터에는 생성할 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 된다. 여기서 두 번째 파라미터는 배열 안에는 어떤 값이 바뀌었을때 함수를 새로 생성할지에 대한것을 명시해줘야된다. 

 

 

 

 

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

useMemo도 useCallback과 마찬가지로 성능 최적화를 위해 사용한다. 차이점으로는 useCallback은 함수를 캐싱하지만, useMemo는 함수 실행 이후 반환된 결과 값을 캐싱한다. 메모라는 개념으로 생각하면 된다.

 

computeExpensivceValue() 실행 이후 반환 값을 메모제이션하고 두 번째 파리미터 [a, b] 값이 변경될때에만 computeExpensivceValue() 실행한다. 

 

 

 

windowing 

긴 리스트를 rendering 하는 경우 rendering 시간과 생성되는 DOM의 노드수가 많아진다. 이를 해결하기 위해 windowing이라는 기법을 사용한다. 이 기법은 리스트중에 사용자에게 보이는 부분만 rendering 시키는 기법이며, react-window 와 react-virtualized windowing 라이브러리가 있다. 

 

https://github.com/bvaughn/react-window

 

 

 

 

 

참고

https://ko.reactjs.org/docs/hooks-reference.html#usecallback

https://thisblogfor.me/react/hooks_memoization/

https://react.vlpt.us/basic/17-useMemo.html

https://velog.io/@pandati0710/React-Windowinghttps://velog.io/@pandati0710/React-Windowing