[React]불필요한 렌더링 방지하기 feat.React.memo

검색 API를 이용해서 검색 결과를 봐야하는데!!

와...결과가 뜨자마자 계속 사라졌다. 왜인가 싶어서 콘솔에 찍어보니까

 

한번 로딩했는데 저렇게 수많은 렌더링이 됐다. 

 

이때 사용한것은 

 

React.memo

 

 

이렇게 씀ㅋ

파일 구조가 한 파일에 두 개의 컴포넌트가 있어서 그런가 했는데 그게아니라

상위 컴포넌트가 다시 렌더링되어 하위 컴포넌트도 다시 렌더링되는 결과인 것 같다.

이러한 동작은 React의 기본 렌더링 프로세스의 일부로,

상위 컴포넌트의 다시 렌더링이 속성 변경 없이도 하위 컴포넌트의 다시 렌더링을 트리거하여 발생한다고 한다.

 

흑흑

 

아무튼 해결방법으로

React.memo를 사용하여 SearchBooks 컴포넌트를 래핑함으로써

 React에게 컴포넌트 속성의 얕은 비교를 수행하여 

 

다시 렌더링이 필요한지 여부를 결정하도록 지시한다!!

 

짠 이제 결과가 나온다

---

도움 많이 된 블로그 글!!

 

https://ui.toast.com/weekly-pick/ko_20190731