Front End Develop Front End Develop

리액트를 사용함에 있어서 여러가지 performance 측면의 개선 방법에 대한 글들이 많습니다. 그 중에서 많이 사용되고 있는 React memo에 대한 이야기입니다. 리액트 메모를 사용하기 전에 체크해볼 수 있는 몇 가지 사항들은 다음과 같습니다. production 빌드를 실행 중인지 확인합니다. (개발 빌드는 매우 느립니다.) 상태를 렌더링 트리에서 불필요하게 상속받고 있는지 확인합니다. React DevTools Profiler를 실행해서 리렌더링 되는 부분을 확인해보세요. (Highlight 옵션을 통해서 확인 가능) 만약에 비용이 비싸다면, 컴포넌트 자체를 memo()로 감쌉니다. 그리고 필요한 함수에 useMemo도 추가합니다. 그 외에도, 심각하게 느린 컴포넌트 환경은 많습니다. 그 때,..