[TIL] React Hook 재학습
- useMemo
공식 문서에서는 이 hook이 의미있는 최적화를 주지 않으며, 가까운 미래에 이 hook이 제거될 수도 있으니, 이 혹을 쓰지 말고 최적화하는 방법을 찾아 적용하라고 권고되어있다.
하지만 아직 없어진건 아니니 일단 알아두자
한 컴포넌트가 어떤 값을 "연산"을 통해 얻어야 할 경우, 리 랜더링시마다 똑같은 값을 반복해서 연산하는 경우, useMemo로 재연산 없이 최적화할 수 있다.
- 기본적으로 useEffect와 비슷하게 트리거링된다. (재계산이 필요할 때만 재계산 가능)
- input 이 포함된 컴포넌트는 사용자 인풋마다 리랜더링이 되는데, 이 경우, 진짜 필요한 계산이 아니면 계산할 필요가 없다. 이런 경우에 딱이다.
- 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));
}, []
);
이런 식이면 유저값이 어찌 변하든 로직은 같으므로(또 직전값을 바로 참조하므로 값도 무결하다) 다시 그리지 않는다.
- React.memo
컴포넌트 자체를 메모이제이션한다.
props가 바뀌지 않는다면 리랜더링을 하지 않는다.
심지어 사용법도 쉽다. 단순히 컴포넌트 앞에 붙여주기만 하면 된다.
export default React.memo(MyCompo);
흑히 두번재 파라미터로 propsAreEqual 이라는 특정한 함수를 사용하면, 특정한 props만 비교할 수도 있다.
모든 최적화는 비용을 지불한다.
- 작은 부분에 이 hook들을 사용하는 것은, 가비지 컬렉트되는게 나은 상황에서조차 데이터를 저장하므로 메모리를 낭비하게 만든다.
- 또 그 전 값과 같은지 "비교"연산이 추가되게 된다.
- useMemo와 useCallback은 랜더링시점에 성능최적화를 이뤄주지만, 해당 hook들을 사용해야하고, 코드 읽기가 어려워지는 비용을 치룬다.
결국 의미가 있을 정도의 성능향상을 이루는 것이 아니라면, 최적화를 하지 말고 제품의 기능을 고민하고 구현하는 편이 더 가치있다.
그러면 언제 저 hook들을 쓰는 것이 좋은가?
-> 우선은 측정이 필요하다. 실제로 얼마나 오래걸리는지 명한 확인이 필요하다.
-> 수행에 시간이 오래걸리는 함수. (그래프, 차트, 애니메이션 등)
Author And Source
이 문제에 관하여([TIL] React Hook 재학습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hamster/TIL-React-Hook-재학습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)