Flutter와 비교해 RN에서 최적화 할때 고려해야 할것

플러터에서의 최적화는 간단하다. 필요한 부분만 리빌드 하는것.

 

 

리액트 네이티브에서도 마찬가지지만 최적화 방법이 조금 까다롭다. 플러터는 build scope만 정해주면 되는데 얘는 별에 별거를 다해줘야한다..

 

 

일단 공식문서에서 나오는 내용부터 보면..

 

By default, when a component re-renders, React re-renders all of its children recursively

https://react.dev/reference/react/useCallback#usage

useCallback – React

 

 

얘네도 대충 setState쓰면 컴포넌트 트리 만든거 자식들까지 recursive해서 리렌더링 시킨다.

 

다만 자식컴포넌트중 {children} 이렇게 들어온 놈은 리렌더링 안시킴. 부모한테 속해있는 컴포넌트라. 하기영상 참조

https://www.youtube.com/shorts/CAEuTN4qYqI

 

 

 

 

아무튼 정리하면 Flutter와 React Native의 최적화에 가장 큰 차이점이라면

 

 

• 플러터는 자식 컴포넌트의 리빌드를 막을 수 없음. 그냥 위에서 아래로 시원하게 밀려버린다
• 반면 React Native는 자식의 리렌더링을 막을 수 있다!

 

 

그럼 자식의 리렌더링을 어떻게 막는가?

 

• React.memo
• useCallback
• useMemo

 

위 세가지를 기억하면 된다.

 

 

React.memo

컴포넌트를 캐싱한다. 그리고 컴포넌트에 들어오는 prop의 값이 이전과 같으면 리렌더링을 스킵한다.

 

useCallback

함수를 캐싱한다. 만약에 자식컴포넌트가 메모이제이션 되었는데 함수를 prop으로 받는다고 하자.

리렌더링할때 함수는 항상 새로 생성되어서 자식으로 전달 되는데 함수는 참조값이라 주소값이 달라 자식 컴포넌트를 React.memo 하였다 하더라도 참조값이 달라 리렌더링 되어버린다.

 

자식컴포넌트의 메모이제이션이 쓸모 없어지는데 이때 해결방법이 useCallback이다. 함수를 useCallback해서 메모이제이션한 컴포넌트에 넘겨주면 리렌더링이 스킵된다.

 

useMemo

값을 캐싱한다. 값을 캐싱하는거 이외에 리액트에서 객체, 배열, 함수는 참조값을 사용함으로 useCallback을 사용할때의 문제에 똑같이 적용할 수 있다.