[React] React.memo로 최적화하기

Today, What I learned?

사실상 라디오라는 콘솔은 라디오버튼에 해당하는 경력 부분 컴포넌트에 들어가 있음에도 불구하고,

전체적으로 렌더링이 되는 것을 알 수 있었다.

부모컴포넌트의 상태가 변경되었기 때문에!...

 

 

이런 쓸데없는 렌더링 횟수를 줄이고자, React.memo를 적용하기로 했다.

 

UserTopInfo -> 체크 영역을 감싸는 컴포넌트 -> 체크박스/라디오 버튼 컴포넌트 형태로 구성이 되어있어서,

클릭의 주체가 되는 가장 내부 컴포넌트인 체크박스와 라디오 버튼 컴포넌트에 memo를 적용했다.

둘 다 userTopInfo에서 전역 상태인 userInfo라는 props를 공통적으로 받고 있다. (유저가 수정한 정보에 대한 부분!)

 

 

profiler

정보 수정과 관련된 UserInfoTop 컴포넌트가 계속 업데이트되는 것을 볼 수 있다.

라디오 버튼과 체크박스에 memo를 적용한 후 렌더링 속도가 4.3ms에서 3.5ms로 감소한 것을 볼 수 있다.

((프로파일러를 이렇게 보는 것이 맞나?))

 

 

React.memo를 쓸 타이밍?

이 녀석을 쓸 타이밍이 도대체 언제인가.. 정리도 해보고 했지만 영 감이 안 와서 유튜브 여행을 다녀왔다.

 

React.memo는 주로 자식 컴포넌트에 적용하는데, props를 체크하고 변화가 있을 때 리렌더링을 한다.

props의 변화에만 의존한다는 점!.. 거기다 남용했다간 캐시용량이 많아지기 때문에 필요할 때만 쓰는 것이 좋다. 😇

 

같은 props로 자주 렌더링이 되거나 (지금 같은 경우)

컴포넌트가 렌더링 될 때마다 복잡한 로직이 처리되는 경우 찰떡같이 쓸 수 있다.

 

 

 

렌더링 최적화.. 갈 길이 멀다!