[TIL] React Hook 재학습

1. useMemo
   공식 문서에서는 이 hook이 의미있는 최적화를 주지 않으며, 가까운 미래에 이 hook이 제거될 수도 있으니, 이 혹을 쓰지 말고 최적화하는 방법을 찾아 적용하라고 권고되어있다.
   하지만 아직 없어진건 아니니 일단 알아두자
   한 컴포넌트가 어떤 값을 "연산"을 통해 얻어야 할 경우, 리 랜더링시마다 똑같은 값을 반복해서 연산하는 경우, useMemo로 재연산 없이 최적화할 수 있다.

• 기본적으로 useEffect와 비슷하게 트리거링된다. (재계산이 필요할 때만 재계산 가능)
• input 이 포함된 컴포넌트는 사용자 인풋마다 리랜더링이 되는데, 이 경우, 진짜 필요한 계산이 아니면 계산할 필요가 없다. 이런 경우에 딱이다.

2. useCallback
   useMemo기반에서 동작함. 다만 그 대상이 함수일 뿐.
   똑같은 함수가 여러번 그려지는 경우가 어떤 경우인가?
   RoomList 컴포넌트에서 RoomItem 여러개를 출력한다고 하자. 이때 RoomList에서 함수 onPress를 만들고, RoomItem들이 onPress에 하나씩 할당할 때, 바로 그 때 똑같은 함수가 수십개씩 그려진다.
   즉, 하나의 함수를 다수의 컴포넌트에 프로퍼티로 넘길 때, 사용하면 좋다

또 setState를 하는 함수를 넣으려고 할 경우, 실제 값을 쓰면 값이 변할때마다 새로 로딩하므로, 기왕이면 함수형으로 넣는 것이 좋다.

const onPress = useCallback(
  id => {
    setRoom(rooms.filter(item => item.id !== id));
  }, [rooms]
);

이런 식이면 유저값이 변경될때마다 다시 그리지만

const onPress = useCallback(
  id => {
    setRoom(rooms => rooms.filter(item => item.id !== id));
  }, []
);

이런 식이면 유저값이 어찌 변하든 로직은 같으므로(또 직전값을 바로 참조하므로 값도 무결하다) 다시 그리지 않는다.

3. React.memo
   컴포넌트 자체를 메모이제이션한다.
   props가 바뀌지 않는다면 리랜더링을 하지 않는다.
   심지어 사용법도 쉽다. 단순히 컴포넌트 앞에 붙여주기만 하면 된다.
   export default React.memo(MyCompo);
   흑히 두번재 파라미터로 propsAreEqual 이라는 특정한 함수를 사용하면, 특정한 props만 비교할 수도 있다.

모든 최적화는 비용을 지불한다.

• 작은 부분에 이 hook들을 사용하는 것은, 가비지 컬렉트되는게 나은 상황에서조차 데이터를 저장하므로 메모리를 낭비하게 만든다.
• 또 그 전 값과 같은지 "비교"연산이 추가되게 된다.
• useMemo와 useCallback은 랜더링시점에 성능최적화를 이뤄주지만, 해당 hook들을 사용해야하고, 코드 읽기가 어려워지는 비용을 치룬다.
  결국 의미가 있을 정도의 성능향상을 이루는 것이 아니라면, 최적화를 하지 말고 제품의 기능을 고민하고 구현하는 편이 더 가치있다.

그러면 언제 저 hook들을 쓰는 것이 좋은가?
-> 우선은 측정이 필요하다. 실제로 얼마나 오래걸리는지 명한 확인이 필요하다.
-> 수행에 시간이 오래걸리는 함수. (그래프, 차트, 애니메이션 등)