[React] 최적화

React.memo (컴포넌트 최적화)

컴포넌트의 props 가 바뀌지 않았다면 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해준다.

React.memo 적용은 간단하게 원하는 컴포넌트를 React.memo로 감싸주면 된다.

const Lists = ({ todoData, setTodoData }) => {
  console.log('Lists is Rendering');
}

// React.memo 적용

const Lists = React.memo(({ todoData, setTodoData }) => {
  console.log('Lists is Rendering');
});

---

useCallback (함수 최적화)

원래 컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 된다. 그러나 컴포넌트가 리렌더링 될 때마다 똑같은 함수를 계속 다시 만드는 것은 좋은 현상이 아니다. 만약 이 함수가 자식 컴포넌트에 props를 내려준다면 자식 컴포넌트도 함수가 새롭게 만들어지니 계속 리렌더링 될 것이다.

useCallback 적용은 useCallback 안에 콜백함수와 의존성 배열을 순서대로 넣어주면 된다.

const handleClick = (id) => {
  let newTodoData = todoData.filter((data) => data.id !== id);
  setTodoData(newTodoData);
}

// useCallback 적용

const handleClick = useCallback((id) => {
  let newTodoData = todoData.filter((data) => data.id !== id);
  setTodoData(newTodoData);
}, [todoData]);

함수 내에서 참조하는 state, props가 있다면 의존성 배열에 추가하면 된다. 이제 todoData가 변하지 않는다면 함수는 새로 생성되지 않는다. 만약 의존성 배열에 빈 배열을 넣는다면, 컴포넌트 최초 렌더링 시에만 함수가 생성되며 그 이후에는 동일한 참조 값을 사용하는 함수가 된다.

---

useMemo (결과값 최적화)

Memoization : 비용이 많이 드는 함수 호출의 결과를 저장하고, 동일한 입력이 다시 발생할 때 캐시된 결과를 반환한다.

Component 내의 compute 함수가 만약 복잡한 연산을 수행하면 결과 값을 리턴하는데 오랜 시간이 걸리게 된다. 이 때 컴포넌트가 계속 리렌더링 된다면 연산을 계속 수행하는데 오랜 시간이 걸려 성능에 안 좋은 영향을 미치고, UI 지연 현상도 일어나게 될 것이다.

이를 해결하기 위해서 useMemo를 사용한다.
compute 함수에 넘겨주는 a, b의 값이 이전과 동일하다면 컴포넌트가 리렌더링 되어도 연산을 다시 하지 않고 이전 렌더링 때 저장해두었던 값을 재활용 한다.

useMemo 적용은 함수를 감싸준 후 첫번째 인수(의존성 배열)에 compute 함수에서 사용하는 값을 넣어준다.

function Component({a, b}) {
  const result = compute(a, b);
  return <div>{result}</div>
}

// useMemo 적용

function Component({a, b}) {
  const result = useMemo(() => compute(a, b), [a, b]);
  return <div>{result}</div>
}