[React] React Hooks 최적화 (React.memo, useCallback, useMemo)

[리 렌더링의 조건]

1. 컴포넌트에서 state 가 바뀌었을 때

2. 컴포넌트가 내려받은 props  가 변경되었을 때

3. 부모 컴포넌트가 리 렌더링 되었을 때, 자식 컴포넌트는 모두 리 렌더링됨.

 

[최적화]

렌더링이 자주 일어난다는 것은 좋은 것은 아님. 비용이 발생하는 것을 최대한 줄이는 것을 '최적화' 라고 한다. 이런 불필요한 렌더링이 발생하지 않도록 최적화 하는 방법은 다음과 같다.

캐싱(caching) : 사용자들의 요청이 많은 콘텐츠를 별도 서버에 임시저장한 뒤 필요할 때마다 바로바로 데이터를 전송하는 기술.

 

React.memo : 컴포넌트 캐싱

useCallback : 함수를 캐싱

useMemo : 값을 캐싱

---

1. React.memo

컴포넌트를 React.memo 에 저장해두서, 필요할 때 사용함 -> 캐싱

부모 컴포넌트의 state 변경으로 props가 변경이 일어나지 않는 한 , 컴포넌트는 리렌더링 되지 않는다. 이것을 컴포넌트 memoization 이라고 한다.

 

다음과 같이 리 렌더링이 필요하지 않은 부분을 React.memo 로 감싸준다.

export default React.memo(Box1);
export default React.memo(Box2);
export default React.memo(Box3);

 

---

2. useCallback

React.memo 는 컴포넌트를 메모이제이션했다면, useCallback은 인자로 들어오는 함수 자체를 기억한다.

기존의 값은 모양은 같더라도 주소값이 달라지면서 props 가 변경되었다고 인식하는데, useCallback 을 통해 메모리공간에 저장해놓고 특정 조건이 아닌 경우 변경되지 않도록 할 수 있다. 

// 변경 전
const initCount = () => {
  setCount(0);
};

// 변경 후
const initCount = useCallback(() => {
  setCount(0);
}, []);

위와 같이 작성하면 리 렌더링 되지 않는다.

 

[더 알아보기]

useCallback 은 count 가 0일 때의 시점을 기준으로, 메모리에 함수를 저장한다. 

의존성배열에 [count] 를 넣으면 count 가 변경될 때마다 새롭게 의존성 배열을 할당한다.

 

---

3. useMemo

동일한 값을 반환하는 함수를 계속 호출해야 하면 필요없는 렌더링을 한다고 볼 수 있다. 맨 처음 해당값을 반환할 때, 그 값을 특별한 곳 (메모리) 에 저장하면 필요할 때마다 다시 함수를 호출해서 계산하는게 아니라 이미 저장한 값을 다시 꺼내와서 쓸 수 있음.

 

사용방법

// as-is
const value = 반환할_함수();

// to-be
const value = useMemo(()=> {
	return 반환할_함수()
}, [dependencyArray]);

의존성 배열의 값이 변경될 때만 반환할 함수가 호출되며 그 외는 memoization 한 값을 가져온다.

 

heavyWork 이후에 return 값이 100 으로 동일한 함수가 있다. value는 계속해서 100이므로 굳이 렌더링 시켜야 할 필요가 없을 때, useMemo 를 사용할 수 있다.

function HeavyButton() {
  const [count, setCount] = useState(0);

  const heavyWork = () => {
    for (let i = 0; i < 1000000000; i++) {}
    return 100;
  };

	// CASE 1 : useMemo를 사용하지 않았을 때
  const value = heavyWork();

	// CASE 2 : useMemo를 사용했을 때
  const value = useMemo(() => heavyWork(), []);

 

[더 알아보기]

useMemo 를 남발하게 되면 성능이 악화될 수 있으니 필요할 때만 사용한다.