[React] 불필요한 렌더링 줄이기
- component props에 고정 객체 넘겨줄 경우, 객체를 컴포넌트 밖으로 빼내 상수 변수로 관리하자
why? 객체 자체를 넘겨주게 되면 객체이 내용이 변경되지 않아도 렌더링 될때마다 새로 객체를 생성하기 때문 - component props에 연산에 따라 객체가 변할 수 있는 경우, useMemo를 감싸주자 (복잡한 연산이 필요할 경우에만 useMemo를 쓰자. 안그러면 메모리 낭비된다고 함)
// bad
return{
<Hello users={users.filter(user => user.is)}/>
};
// good
const users = useMemo(() => users.filter(user => user.is),[]);
return{
<Hello users={users}/>
};Author And Source
이 문제에 관하여([React] 불필요한 렌더링 줄이기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@harim/Reacg-불필요한-렌더링-줄이기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
