← 질문 목록
#37깊이 0
리렌더링이 필요 이상으로 도는 이유는?
렌더마다 새 값이 만들어지기 때문이다. 객체와 함수는 내용이 같아도 참조가 다르다 — 비교하는 쪽은 매번 바뀐 것으로 본다.
| 무엇을 넘기나 | 렌더마다 | 결과 |
|---|---|---|
| 문자열·숫자 | 같은 값 | 다시 안 그린다 |
| 인라인 객체·배열 | 새 참조 | 매번 다시 그린다 |
| 인라인 함수 | 새 참조 | 매번 다시 그린다 |
부모가 다시 그려지면 자식도 따라 그려지는 것이 기본이다. 대부분은 그래도 싸서 문제가 안 된다. 목록이 길거나 자식이 무거울 때만 비용이 눈에 띈다.
그때 쓰는 것이 메모다. 자식을 memo로 감싸고 넘기는 값을 고정한다. 다만 감싸기만 하고 인라인 객체를 계속 넘기면 비교만 늘고 효과는 없다.
핵심 정리
메모를 먼저 뿌리는 것은 대개 손해다. 비교에도 값이 들고 코드가 읽기 어려워진다. 프로파일러로 실제 느린 곳을 찾은 뒤에 붙인다.
추천 꼬리질문
관련 질문
- useEffect 의존성 배열을 잘못 넣으면 어떤 문제가 생기는가?프론트엔드useEffect의 의존성 배열 설정 오류는 React에서 불필요한 리렌더링을 유발하는 구체적인 사례이다.
- 변경점을 비교하면 언제 비용이 줄어드는가?프론트엔드변경점 비교를 통한 리렌더링 최적화는 불필요한 리렌더링을 줄이는 핵심 개념을 공유한다.
- 목록 항목의 정체성을 어떻게 보존하는가?프론트엔드목록 항목의 정체성 보존(key 설정) 실패 시 불필요한 리렌더링이 발생한다는 개념을 공유한다.
- 화면이 안 바뀌는데 값은 바뀌어 있는 경우가 있는가?프론트엔드참조 동일성 비교의 양면 — 참조가 안 바뀌면 안 그리고, 매번 바뀌면 매번 그린다.
- 계산 결과와 함수 참조는 언제 기억해야 하는가?프론트엔드계산 결과와 함수 참조의 기억(Memoization)은 리렌더링 횟수를 줄이기 위한 최적화 기법이다.