2023.09.15 useMemo로 최적화 해보기

 
23. 12. 12 - 리팩토링을 하다보니 잘못 설명된 부분이 있어서 수정했다. 코드 자체도 수정해야 하지만, 우선 memo와 관련된 글 먼저 수정하겠다.
 
수정 전 글. 쪽팔리니까 접은글로 접어놨다.

useMemo를 통해, 코드를 최적화 하기로 했다.

 

useMemo는 React 컴포넌트의 성능 최적화를 위해 사용되며, 불필요한 계산을 방지하고 렌더링 속도를 향상시키는 데 사용된다.

 

1. 성능 최적화: useMemo를 사용하면 계산 비용이 높은 연산을 최적화할 수 있다. 함수나 계산 결과를 메모이제이션하여, 해당 값이 변경되지 않는 한 이전 값을 재사용 하는것으로 불필요한 계산을 줄여 성능을 향상시킬 수 있다.

2. 렌더링 최적화: useMemo를 사용하면 컴포넌트가 다시 렌더링될 때 해당 값이 변경되지 않으면 해당 값은 새로 계산하지 않고 이전 값을 재사용한다. 이로 인해 렌더링 사이클 동안 불필요한 계산을 방지할 수 있으며, 컴포넌트의 렌더링 속도를 향상시킬 수 있다.

3. 의존성 배열: useMemo를 사용할 때는 의존성 배열을 함께 제공해야 한다. 이 배열에는 해당 값이 의존하는 변수나 상태를 포함해야 한다. 이를 통해 의존성 배열에 있는 값 중 하나라도 변경되었을 때에만 값을 다시 계산하게 된다. 이는 불필요한 재계산을 방지하는데 도움을 준다.

 

useMemo는 주로 계산이 많이 필요한 상황에서 사용된다. 예를 들어, 배열의 길이를 계산하거나, 데이터를 필터링하거나 정렬하는 등의 작업에서 useMemo를 사용할 수 있다. 또한 컴포넌트가 불필요하게 다시 렌더링되지 않도록 도와준다.  

 

 

기존 코드이다.

컴포넌트가 렌더링 될 때 마다 likesCount가 실행되서 데이터가 변경되지 않아도 렌더링이 한번 더 발생됬다.

 

변경된 코드이다.

useMemo를 통해 likesData가 변경되야만 실행되도록 했다.

콘솔을 잘못 찍어서 한번만 찍히지만 실제론 filter 자체는 18번 돌고 있고, 여러번 호출되던 likesCount가 한번만 호출되게 되었다.

 

댓글 또한 같은 방식을 사용하여 최적화 했다. 렌더링 횟수가 눈에띄게 줄었다!

기존 코드

memo 코드

 

 
 
 
 
 
 
useMemo를 통해, 코드를 최적화 하기로 했다.
 
useMemo는 React 컴포넌트의 성능 최적화를 위해 사용되며, 불필요한 계산을 방지하고 렌더링 속도를 향상시키는 데 사용된다.
 
1. 성능 최적화: useMemo를 사용하면 계산 비용이 높은 연산을 최적화할 수 있다. 함수나 계산 결과를 메모이제이션하여, 해당 값이 변경되지 않는 한 이전 값을 재사용 하는것으로 불필요한 계산을 줄여 성능을 향상시킬 수 있다.
2. 렌더링 최적화: useMemo를 사용하면 컴포넌트가 다시 렌더링될 때 해당 값이 변경되지 않으면 해당 값은 새로 계산하지 않고 이전 값을 재사용한다. 이로 인해 렌더링 사이클 동안 불필요한 계산을 방지할 수 있으며, 컴포넌트의 렌더링 속도를 향상시킬 수 있다.
3. 의존성 배열: useMemo를 사용할 때는 의존성 배열을 함께 제공해야 한다. 이 배열에는 해당 값이 의존하는 변수나 상태를 포함해야 한다. 이를 통해 의존성 배열에 있는 값 중 하나라도 변경되었을 때에만 값을 다시 계산하게 된다. 이는 불필요한 재계산을 방지하는데 도움을 준다.
 
useMemo는 주로 계산이 많이 필요한 상황에서 사용된다. 예를 들어, 배열의 길이를 계산하거나, 데이터를 필터링하거나 정렬하는 등의 작업에서 useMemo를 사용할 수 있다. 또한 컴포넌트가 불필요하게 다시 렌더링되지 않도록 도와준다.  
 
 

기존 코드이다.
좋아요를 클릭했더니 컴포넌트가 렌더링 될 때 마다 likesCount가 실행되서 데이터가 변경되지 않아도 함수가 계속해서 호출됬다.
 

 

변경된 코드이다.
useMemo를 통해 likesData가 변경되야만 실행되도록 했다.
likesData의 경우 현재는 DB호출을 줄이기 위해 최초에 모든 데이터를 받고, 좋아요가 클릭 되었을 때 다시 호출하고 있어 좋아요를 클릭하지 않는 한 변하지 않는다.
덕분에 좋아요를 클릭할 때 한번만 호출된다!
 
호출 횟수를 3번 > 1번으로 절감한것!
 
 
 
개발환경에서 lighthouse를 쟀을 때
 
개선 전

 
개선 후

 
성능 점수가 소소하게 5점정도 올랐다!