반응형 React.memo2 React.memo, useCallback, useMemo 이용한 최적화 [React.memo] : 렌더링 최적화 하나의 view 페이지에서 컴포넌트를 각 분리해서 사용할 때는 재사용성을 위해서도 이지만 각 컴포넌트의 렌더링 최적화를 위해서 이기도 하다. 예를들어 state값을 사용하는 하나의 자식 컴포넌트와 state를 가지고 있는 부모 컴포넌트만 렌더링이 되어야 하는데 react의 주된 특징(?)중 하나라고 볼 수 있는, 부모 컴포넌트에서 import된 (렌더링 하지 않아도 되는) 모든 컴포넌트까지 같이 렌더링이 된다. 불 필요한 컴포넌트까지 렌더링이 지속되면 성능 저하의 주요인이 되기 때문에 이를 위해 react.memo를 적용하므로써 문제를 해결 할 수 있다. React.memo의 적용방법: 원하는 컴포넌트(예제에서는 satate에 주 사용되는 컴포넌트) 에 React.. 2023. 7. 24. React.memo, useCallback(), useMemo() 리액트는 컴포넌트를 렌더링 한 뒤에 이전 결과와 비교하여 DOM을 업데이트 한다. 컴포넌트를 나누는것은 재사용성을 위해서 이지만, 컴포넌트의 렌더링 최적화를 위해서 이기도 하다. 결국 렌더링이 최대한 덜 될 수 있있게 해야하는데, 이때 리 렌더링이 필요없는 컴포넌트의 렌더링을 방지하여 성능을 높일 수 있는 방법들이 있다. React.memo 컴포넌트 렌더링 최적화 리 렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. 예를들어 todoList 리액트 앱에서 todo list form영역에서 input에 입력을 하게 된다면, value를 가지고 있는 부분만 렌더링이 아닌 연관이 없는 컴포넌트까지 같이 렌더링이 되는것을 확인할 수 있다. 이러한 부분은 react.memo를 적용해서 컴포넌트에.. 2022. 10. 26. 이전 1 다음 728x90 반응형