데이터가 많아지면 랙(lag)이 생김

이런식으로 일단 데이터를 많이 넣고 기능을 실행하려하면 굉장히 오래걸림

속도 측정 결과 데이터가 적을 때 보다 훨씬 오래 걸리는 걸 알 수 있음
아래는 데이터가 적을 때의 속도

확연히 차이나는 걸 알 수 있음

그렇다면 왜 이렇게 느려지는가?
컴포넌트랑 관계없는 컴포넌트들도 리렌더링 됐기 때문
컴포넌트가 리렌더링 되는 상황은 총 4가지임
1. 자신이 전달받은 props가 변경될 때
2. 자신의 state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. forceUpdate함수가 실행될 때

지금은 3번의 경우임 App(부모 컴포넌트)이 리렌더링 되니 자식의 컴포넌트들도 리렌더링 됨 어떻게 해결함? => 리렌더링이 불필요할 때는 리렌더링을 방지해주어야함

1. 첫번째 설정

shouldComponentUpdate 라이프 사이클을 사용하면 되지만
함수 컴포넌트에서는 사용할 수 없음!! React.memo라는 함수를 사용하면 됨

export default React.memo(컴포넌트 명); // 이런식으로

우리는 지금 불변성 유지를 위해서 concat, fliter 메서드를 사용하고 있음 이들은 배열을 복사해서 새로운 배열을 만듦. 즉 배열이 만들어질때마다 함수가 계속해서 만들어짐
왜 불변성을 유지해야하는가? 객체 내부의 값이 새로워지면 바뀐 것을 감지해야함 즉 최적화 기능을 수행하기 위해서임 비교를 통해서 rendering을 최적화 하니까

2. 두번째 설정
   useState의 함수형 업데이트 기능 사용 또는 useReducer사용

//App에서 set함수들 앞에 화살표 함수 추가해주면 됨
setTodos((todos) => // 이부분만 추가해주면 됨
        todos.map((todo) =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo,

렌더링 소요시간이 준 것을 확인할 수 있음

useReducer는 상태를 업데이트 하는 로직을 모아서 컴포넌트 바깥에 둘 수 있다는 장점이 있음

성능에서 차이가 없기 때문에 취향껏 사용하면 됨

리스트 관련 컴포넌트 관련 중요

***리스트 관련 컴포넌트를 작성할 때는 리스트 아이템과 리스트 이 두가지 컴포넌트를 최적화 해줘야함 그러나 내부데이터 100개 미만, 업데이트 자주발생하지 않음 의 상황이면 할 필요 없음.

현재의 또 다른 문제점?

필요없는 데이터까지 렌더링 해줌 => 비효율 적임
해결방법? react-virtualized 사용을 하려했지만 지원이 15버전인가? 17버전까지 밖에 안돼서 삽질하다가 실패~