데이터가 많아지면 랙(lag)이 생김
이런식으로 일단 데이터를 많이 넣고 기능을 실행하려하면 굉장히 오래걸림
속도 측정 결과 데이터가 적을 때 보다 훨씬 오래 걸리는 걸 알 수 있음
아래는 데이터가 적을 때의 속도
확연히 차이나는 걸 알 수 있음
그렇다면 왜 이렇게 느려지는가?
컴포넌트랑 관계없는 컴포넌트들도 리렌더링 됐기 때문
컴포넌트가 리렌더링 되는 상황은 총 4가지임
1. 자신이 전달받은 props가 변경될 때
2. 자신의 state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. forceUpdate함수가 실행될 때
지금은 3번의 경우임 App(부모 컴포넌트)이 리렌더링 되니 자식의 컴포넌트들도 리렌더링 됨 어떻게 해결함? => 리렌더링이 불필요할 때는 리렌더링을 방지해주어야함
shouldComponentUpdate 라이프 사이클을 사용하면 되지만
함수 컴포넌트에서는 사용할 수 없음!! React.memo라는 함수를 사용하면 됨
export default React.memo(컴포넌트 명); // 이런식으로
우리는 지금 불변성 유지를 위해서 concat, fliter 메서드를 사용하고 있음 이들은 배열을 복사해서 새로운 배열을 만듦. 즉 배열이 만들어질때마다 함수가 계속해서 만들어짐
왜 불변성을 유지해야하는가? 객체 내부의 값이 새로워지면 바뀐 것을 감지해야함 즉 최적화 기능을 수행하기 위해서임 비교를 통해서 rendering을 최적화 하니까
//App에서 set함수들 앞에 화살표 함수 추가해주면 됨
setTodos((todos) => // 이부분만 추가해주면 됨
todos.map((todo) =>
todo.id === id ? { ...todo, checked: !todo.checked } : todo,
렌더링 소요시간이 준 것을 확인할 수 있음
useReducer는 상태를 업데이트 하는 로직을 모아서 컴포넌트 바깥에 둘 수 있다는 장점이 있음
성능에서 차이가 없기 때문에 취향껏 사용하면 됨
필요없는 데이터까지 렌더링 해줌 => 비효율 적임
해결방법? react-virtualized 사용을 하려했지만 지원이 15버전인가? 17버전까지 밖에 안돼서 삽질하다가 실패~