강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

jotace님의 프로필 이미지
jotace

작성한 질문수

실전 리액트 프로그래밍

렌더링 속도를 올리기 위한 성능 최적화 방법1

React.memo 관련 질문이 있습니다.

작성

·

361

0

React.memo 가 props 비교를 통해 리렌더링을 막아줄 수 있는 유용한 기능이라는 것을 알게되었는데요,

그렇다면 리액트에서는 왜 React.memo 적용을
모든 컴포넌트에 default로 제공하지 않는지 궁금합니다.

제가 구글링을 해본 결과
2년 전에 Dan Abramov가 트위터에 이런 글을 올렸더라구요..

``` Ask yourself:
Why don’t you put Lodash memoize() around every function? Wouldn’t that make all functions faster? Do we need a benchmark for this? Why not?
```

저는 React.memo가 특정 컴포넌트의 이전 상태의 props를 기억하고 있다가 새로 렌더되어야할 상황에 전달된 props와의 비교를 통해 선택적으로 렌더링을 결정하는것이라고 생각했는데, 저 트위터를 보면 마치 React.memo가 컴포넌트 전체를 메모리 어딘가에 기억해야하고 이 작업이 오히려 성능에 악영향을 줄 수 있다는 뉘앙스로 들렸습니다.

횡설수설 서론이 길어진 것 같아서 죄송합니다. React.memo를 왜 모든 컴포넌트에 적용하면 안좋은지 궁금합니다! 

답변 1

1

이재승님의 프로필 이미지
이재승
지식공유자

안녕하세요
memo 기능을 사용하면 필연적으로 추가 연산(props 비교)이 필요합니다
하지만 어떤 상황에서는 이러한 연산이 불필요할 수도 있습니다
예를 들면, props 가 항상 바뀌는 상황이 있을 수 있겠네요

아래 링크 참고하시면 좋을 것 같습니다

https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#memoize-everything

jotace님의 프로필 이미지
jotace
질문자

답변 감사드립니다.
올려주신 링크 꼼꼼하게 읽어보겠습니다.

jotace님의 프로필 이미지
jotace

작성한 질문수

질문하기