useMemo
-
[React] 컴포넌트 렌더링 최적화Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 13. 04:40
React를 사용하면 렌더링 성능에 대해 고민할 수 밖에 없다. 최적화를 위해선, React 컴포넌트의 리렌더링 조건을 먼저 복기하자! 본인의 state가 변경될 때 부모 컴포넌트로부터 받아오는 props가 변경될 때 부모 컴포넌트가 리렌더링 될 떄 shouldComponentUpdate(), forceUpdate() 등 강제 업데이트 메서드 호출 지금까지 나도 state, props를 단순히 데이터를 다루기 위해 적용하다보니, 데이터의 할당이나 위치가 부적절했을때 불필요한 리렌더링이 유발되었을 거라고 생각한다. 리렌더링을 하면 컴포넌트를 reflow & repaint 를 함에 따른 브라우저 성능 저하가 발생할 뿐만 아니라, 다른 이슈도 동반된다. 함수형 컴포넌트의 경우, 리렌더링을 할 경우 내부 로직들..
-
[React.js] Hooks - useCallback, useMemoFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 27. 17:37
기본 프로젝트의 마지막으로, useCallback 훅에 대한 사용이 주어져서 이 글의 포스팅을 시작하게 되었다. 간단히 검색해보니, 이 훅들은 공통적으로 '최적화'의 역할을 담당한다고 한다. 반대로 말하면 필수적이지는 않다는? 최적화의 원리가 되는 'Memoization' 과 여기에 해당되는 위 훅들에 대해 간단하게 정리한 뒤 프로젝트에 돌입하겠다. 📒 useCallback - Memoization 이 필요한 이유? React 컴포넌트가 렌더링(부모 렌더링, state 변경 등) 될 때마다, 내부의 함수들도 새로 선언한다는 단점이 있다. 여기서 state와 무관한 함수들의 재선언을 최소화하여 메모리 낭비를 줄이는 최적화의 목적으로 이 Hooks 들이 사용되는 것이다. - 문법 useCallback 은 컴..