2022/06/04 (3) 썸네일형 리스트형 리액트 성능 최적화 : React.useMemo TLDR : CPU 자원을 많이 소비하는 연산에 useMemo를 사용한다. 사용자에게 최적의 경험을 선사하려면 60fps이상을 제공해야 한다. (1000ms/60) = 약 16.7ms 이니, 하나의 연산이 이 시간 이상 걸리면 안된다는 것을 의미한다. npm run build / npm run serve를 통해 해당 최적화 조건을 확인한다. 크롬 개발자 도구의 성능 탭 > CPU를 6배 느리게 (본인은 맥os + edge를 활용함을 유의) 위 화면의 문제점은 리렌더링이 발생할 때마다 300ms정도 걸리는 연산을 계속 수행한다는 것이다. 다른 상태의 변화에 의해 해당 컴포넌트가 다시 호출될 때마다 300ms가 걸린다면 끔찍하다. 자세히 살펴보면 match-sorter의 연산이 많은 시간을 잡아먹고 있다. .. 리액트 디자인 패턴 : Container pattern (컨테이너 패턴) 데이터 가져오기, 인증, 레이아웃 제공 등과 같은 커스텀 기능을 재사용하는 선언적 방법을 구현할 수 있습니다. 컨테이너 패턴이란? 커스텀 기능을 제공하고 children prop으로 전달된 React 노드를 렌더링하는 컨테이너 컴포넌트를 사용합니다. 패턴의 일부 사용 사례는 다음과 같습니다. 로더 - 컨테이너는 특정 조건이 true인 동안 로더를 표시하고, 그렇지 않으면 콘텐츠를 렌더링합니다. 인증 게이트 - 사용자가 인증되지 않은 경우 컨테이너는 자식을 렌더링하지 않습니다. 레이아웃 및 스타일 제공 (플레이스홀더) - 컨테이너는 일관된 스타일을 제공하는 래퍼 역할을 합니다. 콘텐츠가 다른 여러 대시보드 페이지 컴포넌트가 있고, 각 페이지에 동일한 레이아웃을 제공하고 싶을 때 사용합니다. 컨테이너 패턴 .. 리액트 디자인패턴 : Layout Component (레이아웃 컴포넌트 패턴) TLDR : 레이아웃 컴포넌트 패턴은 불필요한 렌더링을 없애 성능을 개선한다. 컴포넌트 트리의 높이를 낮추어 props drilling의 고통을 해결하고, 유지보수성을 향상시킨다. 사람들이 간과하는 리액트의 성능 최적화 팩터 당신의 리액트 앱을 느리게 하는 실수 위 두가지 게시물이 지적하는 요소는 컴포넌트의 위치다. 자주 바뀌는 공통 상태가 위에 있을 수록 하위 컴포넌트들은 더 많이, 자주 그려질 가능성이 크다. 이를 피하기 위한 방법은 다음과 같다 리렌더링이 불필요한 엘리먼트를 리렌더링 하지 않는다. 리렌더링을 유발하는 관심사에 따라 컴포넌트를 분리한다. 당신의 리액트 앱을 느리게 하는 실수에서 글쓴이는 일반인들이 컴포넌트를 구조화하는 방식을 지적한다. function App() { return (.. 이전 1 다음
