10.1) 최적화란

최적화(Optimization)

• 웹 서비스의 성능을 개선하는 모든 행위를 일컫음
• 아주 단순한 것부터 아주 어려운 방법까지 매우 다양
• ex) 서버의 응답속도 개선, 정적 파일 로딩 개선, 불필요한 네트워크 요청 줄임

React App 내부의 최적화 방법

• 컴포넌트 내부의 불필요한 연산 방지
• 컴포넌트 내부의 불필요한 함수 재생성 방지
• 컴포넌트의 불필요한 리렌더링 방지

10.2) useMemo와 연산 최적화

useMemo

• 메모이제이션 기법을 기반으로 불필요한 연산을 최적화하는 리액트 훅
• 메모이제이션 : 기억해두기, 메모해두기
• 반복적으로 수행되는 연산의 결과값을 메모리에 저장하고 돌려주는 기법
• 자매품 : useCallback

List.jsx

• useMemo({fuction}, {target})
  target 값이 변경될 때 fucntion의 결과값을 돌려준다.

const { totalCount, doneCount, notDoneCount } = useMemo(() => {
  const totalCount = todos.length;
  const doneCount = todos.filter((todo) => todo.isDone).length;
  const notDoneCount = totalCount - doneCount;

  return {
    totalCount,
    doneCount,
    notDoneCount,
  };
}, [todos]);

10.3) React.memo와 컴포넌트 렌더링 최적화

memo

• memo({Component})
  props로 전달받는 데이터값이 변경될 때 컴포넌트의 현재값과 과거값을 비교하여 리렌더링 여부를 결정함
• TodoItem.jsx를 export default memo(TodoItem)으로 쓰더라도, 넘겨받는 인수중 onUpdate와 onDelete함수는 객체로, App 컴포넌트가 렌더링 될 경우 재생성이 되고, 이때 주소값이 달라지기 때문에 memo의 얕은 비교에서는 다른 값으로 판단된다.

함수객체가 props로 넘어갈때 최적화하는 법

1. App 컴포넌트에서 함수들 자체를 메모이제이션해서 리렌더링이 되더라도 다시 생성되지 않게 방지하는 방법
2. TodoItem컴포넌트의 메모 함수 안에 두번째 인수로 콜백 함수를 추가로 전달해서 최적화 기능을 커스터마이징하기

TodoItem.jsx

...
export default memo(TodoItem, (prevProps, nextProps) => {
  // 반환값에 따라, Props가 바뀌었는지 안바뀌었는지 판단
  // T -> Props 바뀌지 않음 -> 리렌더링 X
  // F -> Props 바뀜 -> 리렌더링 O
  if (prevProps.id !== nextProps.id) return false;
  if (prevProps.isDone !== nextProps.isDone) return false;
  if (prevProps.content !== nextProps.content) return false;
  if (prevProps.date !== nextProps.date) return false;

  return true;
});

고차 컴포넌트 (HOC, Higher Order Component)

• 컴포넌트를 인수로 받아서 해당 컴포넌트에 최적화나 메모이제이션 같은 추가적인 기능을 덧붙여서 기능이 추가된 새로운 컴포넌트를 반환해주는 memo와 같은 메서드들

10.4) useCallback과 함수 재생성 방지

useCallback

useCallback(()=>{}, [])

• 첫번째 인수 : 최적화하고 싶은 인수, 불필요하게 재생성되지 않도록 방지하고 싶은 함수
• 두번째 인수 : depth.
• depth가 변경되었을 때만 함수를 다시 생성하도록 최적화. depth를 빈 배열로 설정하면 컴포넌트가 마운트 될 때만 함수를 생성하고 그 후의 리렌더링에서는 함수를 새롭게 생성하지 않는다.

최적화

• 기능 구현 다음에 최적화를 해야 한다
• 최적화를 먼저 적용하면 새로운 기능을 덧붙이거나 기능을 수정해야할 때 최적화가 풀리게 되거나 아예 고장이 나버리는 경우가 생김
• 꼭 최적화가 필요할 것 같은 연산이나 함수나 컴포넌트에만 최적화를 적용하는 것이 좋다.
• ToDoItem 컴포넌트처럼 유저의 행동에 따라서 개수가 굉장히 많아질 수 있는 컴포넌트라던가, 이런 함수들을 굉장히 많이 가지고 있어서 코드가 무거운 그럼 컴포넌트에 한해서만 최적화 수행을 권장