[리액트를 다루는 기술] 랜더링 최적화

11강 간단요약!

리스트가 랜더링을 하는 과정에서 불필요한 Component까지 랜더링이 되는 현상으로 인해 Lag현상이 생기게 되는데 이러한 현상을 막기위해 최적화를 통해서 부하를 줄이고 줄여서 클라이언트를 좀 더 빠르게 쓸 수 있게 해주는 것들에 대한 이야기

---

첫번째! func() 과 func 의 차이를 알아보자!

인자로써 받은 func() 과 func는 실제로 클라이언트가 랜더링 될 때마다 실행하는지 처음 랜더링 될 때 실행되고 고정인지에 대한 차이가 있다 자세히 무슨 원리일까 알아보자!

 

두번째! React.memo를 이용해서 감싸보자!

정말 간단하게 마지막 export 하는 부분에서 React.memo(ComponentName) 을 하고 React를 import 하는 것만으로 랜더링을 안하도록 만든다 (prop가 변경되면 바뀌고 아니면 안바뀜)

 

세번째! useState함수의 업데이트 기능 useReducer를 이용해서 최적화를 해보자!

두 방법을 통해서 최적화를 했을 때 성능 부분에서는 큰 차이점이 없고 useState는 기존의 형태를 크게 벗어나지 않는 반면 useReducer의 경우에는 setValue 부분을 dispatch로 고치고 동작하는 부분을 한곳에 모으는 등 형태가 많이 바뀌지만 그만큼 보기에 편해서 난 useReducer로 연습을 좀 더 할 예정임

 

마지막! React-virtualized를 이용해보자!

앞의 기능을 쓰고 나서 마지막으로 현재 컴포넌트가 리스트 컴포넌트일 때 유용하게 쓰일 수 있다 스크롤이 보이기 전에 생성되어 공간은 차지하고 있지만 실질적으로 보이지 않는 부분이기때문에 보이는 부분만 랜더링이 되게끔 만들어주는 녀석이다.

---

그 외것들

React DevTools : 성능분석은 물론 컴포넌트도 볼 수 있게 만들어주는 구글 확장프로그램 성능 분석할 때 동영상 찍는거 처럼 하는게 신기함

 

컴포넌트가 리랜더링 되는 순간 (4가지)

• 자신이 전달 받은 props가 변경 되었을 때
• 자신의 state가 변경되었을 때
• 부모컴포넌트가 리랜더링 될 때
• forceUpdate 함수가 실행 됬을