2018년 10월 18일 목요일

react 에서 프로젝트 진행중 약간이라도 버벅거린다면?


리스트를 랜더링할 때는 언제나 shouldComponenetUpdate를 구현해놓는 것을 습관화 하세요.
그리고 나머지 경우에는 프로젝트를 작업하면서 버벅거린다고 느낄때 성능조사를 하고, 상황에따라 shouldComponentUpdate를 구현하면 좋습니다.
 도서 - 리액트를 다루는기술 p.233중


상위컴포넌트에 뭔가를 사용자가 입력하면 하위컴포넌트에 필요치않은 랜더링을 할때 있다.
개발자도구 -> performance탭    그리고 주소창에  /?react_perf 로 입력후

이럴때 리액트 개발자 도구를 사용하여 '하이라이트 업데이트'체크후 확인해보면 상세하게 나온다.

일정 리스트에서 일정들이 좌아아악 있는데

입력창에 a만 입력했을 뿐인데 일정리스트, 일정아이템  하위 컴포넌트들도 렌더링이된다.

이럴때 shouldComponentUpdate에 특정조건을 걸어주면 불필요한 자원사용을 막을수있다.

댓글 없음: