memoization

렌더링 성능 최적화 - Bottleneck code

Bottleneck 코드 최적화 1 - 작업양 줄이기 Bottleneck 코드 찾기 크롬 Performance를 활용해서 페이지가 렌더링될 때 각 컴포넌트 등의 실행시간을 체크해볼 수 있다. 이를 활용해 실행이 오래 걸리는 함수, 컴포넌트 등 Bottleneck 코드를 찾을 수 있다. 여기서 보면, Article 컴포넌트 mount 작업이 오래걸리는데, 아래에서 상세한 수행내역을 보면 removeSpecialCharacter 함수가 실행시간을 다 차지하고 있는 것을 확인할 수 있다. 이런식으로 Bottleneck코드를 찾을 수 있다. Bottleneck 코드 분석 /* * 파라미터로 넘어온 문자열에서 일부 특수문자를 제거하는 함수 * (Markdown으로 된 문자열의 특수문자를 제거하기 위함) * */ ..

Memoization

메모이제이션이란, 동일한 계산을 반복할 때 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 해주는 것이다. 리액트에서 메모이제이션은 어떻게 할까? React.memo를 활용해서 할 수 있다. const MyComponent = React.memo(function MyComponent(props){}); React.memo는 HOC이다. 얘에게 컴포넌트를 인자로 전달하면 동일한 props를 전달 받으면 다시 렌더링하지 않고, 기존에 저장해둔 컴포넌트를 바로 뱉는 애를 리턴한다. 보통 부모 컴포넌트에 상태를 많이 끌어올려 놓고 자식에 props로 주는 경우가 많기 때문에 그럴 경우에는 쓰임새가 많다. React.memo의 좋은 점은 또 있다. 얘는 p..