2022.08.25

p251 ~ 300

map 을 사용하여 컴포넌트로 변환할 때는 key props 를 전달해 주어야 한다. 

여기서 사용되는 key 값은 각 항목마다 가지고 있는 고윳값인 id 를 넣어주어야 한다. 

todo 데이터는 통째로 props 에 전달해 주는 것이 좋다. 여러 종류의 값을 전달해야 하는 경우에는 객체를 통째로 전달하는 편이 나중에 성능 최적화를 할 때 편리하다. 

id 값은 useState 가 아닌 useRef 를 이용해서 관리한다. 왜? id 값은 렌더링되는 정보가 아니기 때문에. 이 값은 화면에 보이지 않을 뿐더러 이 값이 바뀐다고 해서 컴포넌트가 리렌더링될 필요도 없다. 단순히 새 항목을 만들 때 참조되는 값일 뿐이다. 

props 로 전달해야 할 함수를 만들 때는 useCallback 을 사용하여 함수를 감싸는 것을 습관화하자.

많은 데이터를 렌더링할 때 발생하는 문제 = lag 랙 -> 랙 걸렸어 = 데이터를 너무 많이 받아와서 문제가 생겼어!

useState 에 함수를 넣어줄 때, useState(function()) 이렇게 작성하면 리렌더링될 때마다 함수가 호출되지만, 

useState(function) 처럼 파라미터를 함수 형태로 넣어 주면 컴포넌트가 처음 렌더링될 때만 함수가 실행된다. 

컴포넌트가 리렌더링 되는 경우 네 가지

1. 자신이 전달받은 Props 가 변경될 때

2. 자신의 state 가 바뀔 때 

3. 부모 컴포넌트가 리렌더링될 때 

4. forceUpdate 함수가 실행될 때 

리렌더링이 불필요한 경우 리렌더링을 방지해 주는 것이 성능 최적화. -> 함수형에서는 라이프사이클 메서드 대신 React.memo 라는 함수를 사용한다. 컴포넌트의 props 가 바뀌지 않았다면 리렌더링하지 않도록 설정하여 함수 컴포넌트의 리렌더링 성능을 최적화할 수 있다. 

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

또는 useReducer 를 사용하는 방법도 있다. 이는 기존 코드를 많이 고쳐야 한다는 단점이 있지만, 상태를 업데이트 하는 로직을 모아서 컴포넌트 바깥에 둘 수 있다는 장점이 있다. 

상태를 업데이트할 때 불변성 지키는 것 매우 중요. 기존 데이터를 수정하지 않고, 새로운 배열을 만든 다음에 새로운 객체를 만들어서 필요한 부분을 교체해 주는 방식의 구현 -> 업데이트가 필요한 곳에서는 아예 새로운 배열 혹은 새로운 객체를 만들기 때문에 React.memo 를 사용했을 때 props 가 바뀌었는지 혹은 바뀌지 않았는지를 알아내서 리렌더링 성능을 최적화할 수 있음 

불변성을 지킨다 = 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것. 참고로 불변성이 지켜지지 않으면 객체 내부의 값이 새로워져도 바뀐 것을 감지하지 못한다. 그럼 React.memo 에서 서로 비교하여 최적화하는 것이 불가능해 진다.