areHookEquals2 [React] Optimization, useMemo, useCallback, memo - (2) 반갑습니다 ^^ 2탄을 이어서 작성해 보겠습니다. React.memo는 컴포넌트를 넣으면 컴포넌트를 반환해주는 함수인데요. (HOC) 이것들에 대한 설명을 찾아보면, memo는 props를 비교하고 얕은 비교를 한다. 이런 설명이 전부입니다. 이렇게만 알고 가면, 이 케이스에는 렌더링이 일어날까? 이런 것들이 대한 답이 되지 않았습니다. 제가 직접 찾아보고 나니 이제는 대답을 할 수 있을것 같더라구요. memo에 props를 50개를 넣었지만, 실제로 호출시에 3개만 넘겨준다면, 그 3개만 비교하게 될 것입니다. React.memo 이 HOC는 주어진 props를 비교하지만 좀 더 자세히 비교를 합니다. 그리고 시간이 꽤나 걸릴것 같은 작업입니다. areHookEquals보다 가격이 훨씬 비싸답니다. d.. 2022. 3. 9. [React] Optimization, useMemo, useCallback, memo - (1) 반갑습니다 ^^ 최근에는 chrome profiler 사용법을 익히고, 렌더링에 얼마나 걸리나 이런것들을 보는 재미로 지내고 있습니다. Profiler 보는법은 다음번에 포스팅을 해보도록 하겠습니다. 서론이 좀 길 수 있지만, 참고 읽어보시면 분명 도움이 될 것이라고 확신합니다. 일반적인 사람들의 오해 렌더링이 적으면 무조건 속도가 빠르다 -> React.memo 등 최적화를 위한 HOC나 hook들을 사용합니다. 하지만 이 말은 틀렸다고 생각합니다. 잘못된 케이스의 경우를 생각해보겠습니다. - deps가 어떻게 비교되어 작동되는지 모른다면, 무조건 렌더링이 되고, 비교함수도 호출 되므로 더 느려집니다. - 렌더링을 방지하려고 deps에서 비교하는 시간이 더 들 수 있습니다. 어떻게 사용해야 할까? 이미.. 2022. 3. 7. 이전 1 다음 728x90
