[React] 11장(2)

11.5 onToggle, onRemove 함수가 바뀌지 않게 하기

함수가 계속 만들어 지는 상황을 방지하는 두가지 방법:
1. useState의 함수형 업데이트 기능을 사용
2. useReducer를 사용하는 것

11.5.1 useState의 함수형 업데이트

기존에 setTodos 함수를 사용할 때는 새로운 상태를 파라미터로 넣어줬다.

setTodos 함수를 사용할 때 새로운 상태를 파라미터로 넣는 대신, 상태 업데이트를 어떻게 할지 정의해 주는 업데이트 함수를 넣을 수 있고 이를 함수형 업데이트 라고 부른다.

const [number, setNumber] = useState(0);
const onIncrease = useCallback(
  ()=> setNumber(prevNumber => prevNumber + 1),[]);

=> setNumber(number+1)이 아니라 어떻게 업데이트 할지 정의해 주는 업데이트 함수를 넣어주었고 useCallback을 사용할 때 두번째 파리미터로 넣는 배열에 number를 넣지 않아도 된다.

setTodos앞에 todos => 만 추가해주고, 두번째 배열을 비워두면 된다.

11.5.2 useReducer 사용하기

useState의 함수형 업데이트를 사용하는 대신, useReducer를 사용해도 onToggle과 onRemove가 계속 새로워지는 문제를 해결할 수 있다.

useReducer를 사용할때 두번째 파라미터에 초기 상태를 넣어주어야 한다. 여기서는 undefined를 넣었고 세번째 파라미터에 초기 상태를 만들어주는 함수인 createBulkTodos를 넣어주었다. 이렇게 하면 맨처음 렌더링 될때만 createBulkTodos 함수가 호출된다.

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

11.6 불변성의 중요성

기존 데이터를 수정할 때 직접 수정하지 않고, 새로운 배열을 만든 다음에 새로운 객체를 만들어서 필요한 부분을 교체하는 방식으로 만들어 내는것을 '불변성을 지킨다' 라고 한다.

불변성이 지켜지지 않으면 객체 내부의 값이 새로워져도 바뀐 것을 감지하지 못해 React.memo에서 서로 비교해서 최적화하는게 불가능 해진다.

const array = [1,2,3,4,5];
const nextArrayBad = array;
nextArrayBad[0] = 100;
console.log(array === nextArrayBad); //true

const array = [1,2,3,4,5];
const nextArrayGood = [...array];
nextArrayGood[0] = 100;
console.log(array === nextArrayGood); //false

const object = {
  foo:'bar',
  value:1
};

const nextObjectBad = object;
nextObjectBad.value = nextObject.value + 1;
console.log(object === nextObjectBad); // true

const nextObjectGood = {
  ...object,
  value: nextObject.value + 1
};
console.log(object === nextObjectGood); // false

11.7 TodoList 컴포넌트 최적화하기

리스트에 관련된 컴포넌트를 최적화 할 때는 리스트 내부에서 사용하는 컴포넌트도 최적화 해야하고 리스트로 사용되는 컴포넌트 자체도 최적화해주는 것이 좋다.

App 컴포넌트에 다른 state가 추가되어 해당 값들이 업데이트 될때는 TodoList 컴포넌트가 불필요한 리렌더링을 할 수 있기 때문에 React.memo를 사용해서 최적화해 준 것이다.
내부 데이터가 100개를 넘지 않거나 자주 발생하지 않으면 최적화 작업을 반드시 해줄 필요는 없다.

11.8 react-virtualized를 사용한 렌더링 최적화

현재 컴포넌트가 맨처음 렌더링 될때 2500개중 2491개 컴포넌트는 스코롤하기 전에는 보이지 않음에도 불구하고 렌더링이 일어난다 => 비효율적이다.

react-virtualized을 사용하면 리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링 하지 않고 크기만 차지하게끔 할 수 있다.

최적화를 수행하기 전에 각 항목의 실제크기를 px단위로 알아내야 한다.

rowRender함수는 react-virtualized의 List 컴포넌트에서 각 TodoItem을 렌더링할때 사용하며, 이 함수를 List 컴포넌트의 props로 설정해 주어야 한다.
이 함수는 파라미터에 index, key, style 값을 객체 타입으로 받아 와서 사용한다.