글을 작성하게 된 이유React 및 React Native 개발을 진행하다 보면, React.memo 및 useMemo, useCallback 등 최적화 방법들을 쉽게 접할 수 있습니다. 그런데 이렇게 유용한 것들을 단순히 하나의 목적만 바라보고 사용한다면 본래 만들어진 목적과 다르게 동작하여 버그를 발생시킬 수 있습니다.
그리고 좋은 기회를 얻어, 현재 프로젝트에서 React.memo 와 관련된 피드백 및 여러가지 정보를 얻을 수 있었습니다. 현재 React.memo 를 사용하고 있지만, 해당 테스트를 진행하면서 너무 바보같이 사용하고 있었다는 것을 깨달았습니다.
그래서 이미 해당 지식에 대해서 알고 계시는 분도 계시겠지만, 저와 같은 실수를 하고 계시는 분들을 위해서 해당 글을 통해 React.memo 를 잘 사용하고 있는가에 대해 점검 해보셨으면 좋겠습니다.
이를 위해 React.memo 와 관련된 테스트를 진행했고, 테스트 과정에 대한 정보를 정리했습니다.
React.memo 에 대한 설명은 아래에 자세하게 되어있습니다.
그리고 해당 글에서는 측정을 하기 위해서 React 의 Profiler API 도 같이 사용할 예정입니다.
들어가기에 앞서, React.memo 와 관련된 글을 한번 읽고 오시는 것을 추천드립니다.
기본 코드해당 글에서 최종적으로 최상위 View 안에 2개의 자식 컴포넌트(View)를 구성할 계획입니다.
그리고, React Native 의 Button 과 React Hooks (useState) 를 이용해서 부모 컴포넌트에서 발생하는 render가 자식 컴포넌트에게 어떤 영향을 끼치는지 자세히 살펴볼 것입니다.