log4me

참조(이미지 포함): When to useCallback & useMemo hooks ? 이 글은 [React] 똑똑하게 useCallback 사용하기에서 이어지는 글이다. 리액트의 성능 최적화에 대한 이야기와 useCallback 훅을 사용해 최적화 한 예시를 보고 싶다면, 위 글을 먼저 보고 오기를 추천한다! useMemo란 useMemo는 재사용된(memoized) 값을 반환하는 훅이다. 이 훅은 데이터의 많은 가공이 필요할 때 적합하다. 예를 들면, 복잡한 수학적 계산이 사용되는 경우나 계산하는데 오랜 시간이 걸리는 로직을 다루는 경우가 이에 해당된다. 먼저 이 함수는 컴포넌트의 첫 렌더 때 실행되고, 이후 리렌더가 될 때마다 캐시된 데이터를 반환해 보여준다. 매번 함수를 실행해서 내부 로직을 다..

이 글은 When to useCallback & useMemo hooks ? 의 번역글입니다. (이미지 포함) 개발자의 숙명, 어플리케이션 성능 최적화 성능 최적화는 개발자라면 누구든 어플리케이션 빌드 이후 마주하게 되는 흔한 이슈이다. 하지만 개발할 때는 완벽하게 동작했던 시스템이 배포 후 운영 시에 더 느려지는 느낌이 드는 건 단순한 착각일까? 개발 모드일 때 더 빠르게 느껴지는 이유 어플리케이션이 개발 모드일 때는 모든 파일들이 로컬 머신 즉, 내 컴퓨터를 통해 로컬 포트 3000번(React 기준)에 호스팅이 된다. 로컬에서 개발을 하기 때문에 인터넷 속도에 그다지 영향을 받지 않는 경우, 번들 파일들을 다운로드 받는 것은 굉장히 효율적이며 빠르게 동작한다. 하지만 운영 시에는 인터넷이 굉장히 느..

리액트에서 성능을 최적화 할 수 있는 방법에는 여러 가지가 있다. 이번엔 그 중에서도 리액트 컴포넌트를 메모리에 저장하여(memoization) 불필요한 리렌더를 방지하는 방법에 대해 알아보겠다. Memoization이란 메모이제이션은 연산의 실행 결과를 캐시에 저장해두고 동일한 연산이 반복될 때, 입력값이 전과 같다면 캐시된 결과를 반환하고 다르다면 연산을 재수행하여 새로운 결과를 반환하는 최적화 기법이다. 리액트 컴포넌트의 Memoization 기본적으로 리액트는 내부 state나 전달받은 props가 변경될 때 부모 컴포넌트가 리렌더 될 때 shouldComponentUpdate() 메서드의 리턴값 혹은 React.memo 의 두번째 인자로 전달한 비교 함수(함수형 컴포넌트)의 리턴값이 true일 ..