React 렌더링 성능 최적화

오늘은 React hooks 기반의 성능 최적화에 대해서 자세히 알아 보려고 한다.

이때 알아야 하는게 component의 리렌더링이 되는 조건들인데

1. props가변경 될때
2. state값 변경
3. 부모의 컴포넌트 리렌더링

현제 프로젝트를 진행하면서 확인된경우이다.

useMemo

동일한 계산을 반복적으로 실행 할때 이전 값들을 저장해서 동일한 계산을 수행하지 않고 값을 반환해준다.

import React, { useMemo, useState } from 'react';

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

function Factorial() {
  const [number, setNumber] = useState(0);

  const result = useMemo(() => factorial(number), [number]);

  function handleChange(event) {
    setNumber(Number(event.target.value));
  }

  return (
    <div>
      <label htmlFor="number">Number: </label>
      <input type="number" id="number" value={number} onChange={handleChange} />
      <p>{number}! = {result}</p>
    </div>
  );
}

useMemo의 첫번째 인자는 메모이이제션할 함수를 두번째 인자는 의존성 배열을 전달한다.
의존성 배열에 값이 변경 될때 메모이제이션된 값을 다시 계산한다.

React.memo

컴포넌트를 메모이제이션하여 불필요한 리렌더링을 방지 해준다.

React.memo가 되어있는 컴포넌트는 자식 컴포넌트가 업데이트 될때만 다시 렌더링 된다.
입력값과 렌더링 결과를 캐시하며 입력값이 변결될떄 컴포넌트가 다시 리렌더링 되고 결과는 다시 캐시된다.

import React from 'react';

function Square(props) {
  return <button onClick={props.onClick}> {props.value} </button>;
}

export default React.memo(Square);

이 예제에서는 value 프롭스가 변경될때만 리렌더링하게 최적화 한것이다.프롭스에 대해 변경이 있더라도 React.memo로 래핑하지 않은 자식 컴포넌트가 재렌더링할 때만 Square 컴포넌트가 렌더된다.

useCallback

함수 선언을 메모이제이션 할때 사용한다.첫번째 인자는 캐시할 함수를 두번째 인자는 의존성 배열을 전달한다.의존성 배열의 값이 변경될 때 함수가 다시 생성된다.

import React, { useCallback } from 'react';

function Square(props) {
  const handleClick = useCallback(() => {
    props.onClick(props.index);
  }, [props.onClick, props.index]);

  return <button onClick={handleClick}> {props.value} </button>;
}

export default Square;

onClick 이벤트 헨들러를 이용한 최적화의 예시이다.
props.onClick와 props.index를 의존성 배열로 전달하고 있다.handleClick 상수에 할당되었기 때문에 매번 새로운 함수 인스턴스를 생성하는 것 대신 캐싱된 함수를 재사용한다.
간단히 말해서 리렌더링이 일어났을때 props에 onClick 함수가 다시 생성 되서 전달을 해주게 되는데 이를 방지한것이다.