반응형 렌더링최적화1 React.memo, useCallback, useMemo 이용한 최적화 [React.memo] : 렌더링 최적화 하나의 view 페이지에서 컴포넌트를 각 분리해서 사용할 때는 재사용성을 위해서도 이지만 각 컴포넌트의 렌더링 최적화를 위해서 이기도 하다. 예를들어 state값을 사용하는 하나의 자식 컴포넌트와 state를 가지고 있는 부모 컴포넌트만 렌더링이 되어야 하는데 react의 주된 특징(?)중 하나라고 볼 수 있는, 부모 컴포넌트에서 import된 (렌더링 하지 않아도 되는) 모든 컴포넌트까지 같이 렌더링이 된다. 불 필요한 컴포넌트까지 렌더링이 지속되면 성능 저하의 주요인이 되기 때문에 이를 위해 react.memo를 적용하므로써 문제를 해결 할 수 있다. React.memo의 적용방법: 원하는 컴포넌트(예제에서는 satate에 주 사용되는 컴포넌트) 에 React.. 2023. 7. 24. 이전 1 다음 728x90 반응형