10. 컴포넌트 성능 최적화

컴포넌트 성능 최적화

const [todos, setTodos] = useState(createBulkTodos()); → 매번 렌더링 될 때마다 createBulkTodos();

const [todos, setTodos] = useState(createBulkTodo); → 최초 렌더링시 한번만 호출

1. 느려지는 원인 분석
   1. 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생합니다
      • 자신이 전달받은 props가 변경될 때
      • 자신의 state가 바뀔 때
      • 부모 컴포넌트가 리렌더링될 때
      • forceUpdate 함수가 실행될 때
2. React.memo를 사용하여 컴포넌트 성능 최적화
   1. 컴포넌트의 리렌더링을 방지할 때는 shouldComponentUpdate라는 라이프사이클을 사용하면 됩니다.
   2. 그러나 함수 컴포넌트에서는 라이프사이클 메서드를 사용할 수 없습니다.
   3. 그 대신 React.memo라는 함수를 사용합니다. 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수 컴포넌트의 리렌더링 성능을 최적화해 줄 수 있습니다.
3. 함수가 바뀌지 않게 하기
   1. 함수가 계속 만들어지는 상황을 방지하는 방법은 두 가지 입니다.
   • useState의 함수형 업데이트 기능을 사용하는 것
   • useReducer를 사용하는 것
4. useState의 함수형 업데이트
   • 새로운 상태를 파라미터로 넣는 대신, 상태 업데이트를 어떻게 할지 정해주는 업데이트 함수를 넣어줄 수도 있습니다. 이를 함수형 업데이트라고 합니다.
   const [number, setNumber] = useState(0); // prevNumber는 현재 number 값을 가리킵니다. const onIncrease = useCallback( () => setNumber(prevNumber => prevNumber + 1), );
   • setNumber(number+1)을 하는 것이 아니라, 어떻게 업데이트할지 정의해 주는 업데이트 함수를 넣어줍니다.
   • 그러면 useCallback을 사용할 때 두 번째 파라미터로 넣는 배열에 number를 넣지 않아도 됩니다.
   1. useReducer 사용하기
   • useState의 함수형 업데이트를 사용하는 대신 useReducer를 사용해도 onToggle, onRemove가 계속 새로워지는 문제를 해결할 수 있습니다.
   • 두 번쨰 파라미터에 undefined를 넣고 세 번째 파라미터에 초기 상태를 만들어 주는 함수인 createBulkTodos를 넣어 주었는데, 이렇게 하면 컴포넌트가 맨 처름 렌더링될 때만 createBulkTodos 함수가 호출됩니다.
   1. react-virtualized를 사용한 렌더링 최적화