React.memo, useCallback, useMemo 이용한 최적화

[React.memo] : 렌더링 최적화

하나의 view 페이지에서 컴포넌트를 각 분리해서 사용할 때는 재사용성을 위해서도 이지만 각 컴포넌트의 렌더링 최적화를 위해서 이기도 하다.

 

예를들어 state값을 사용하는 하나의 자식 컴포넌트와 state를 가지고 있는 부모 컴포넌트만 렌더링이 되어야 하는데  react의 주된 특징(?)중 하나라고 볼 수 있는, 부모 컴포넌트에서 import된 (렌더링 하지 않아도 되는) 모든 컴포넌트까지 같이 렌더링이 된다. 

불 필요한 컴포넌트까지 렌더링이 지속되면 성능 저하의 주요인이 되기 때문에 이를 위해 react.memo를 적용하므로써 문제를 해결 할 수 있다. 

 

React.memo의 적용방법: 원하는 컴포넌트(예제에서는 satate에 주 사용되는 컴포넌트) 에 React.memo로 감싸준다.

 

 

---

 

 

[useCallback] : 렌더링 최적화

문제점: 컴포넌트가 렌더링 될 때 해당 컴포넌트 안에 있는 함수들도 다시 그리게 된다. 하지만 렌더링이 될 때마다 똑같은 함수를 컴포넌트가 계속 리 렌더링을 하게 되는 것 또한 성능 저하를 야기시킨다. 

예를들어 컴포넌트에 props로 데이터를 내려 준다면 함수가 포함하고 있는 컴포넌트가 리 렌더링 될 때마다 자식 컴포넌트에서도 해당 함수를 필요로 하기 때문에 함수가 계속해서 새롭게 만들어져서 계속해서 리 렌더링을 하게 된다. 

 

이러한 부분을 막기 위해서 useCallback함수를 사용하게 된다. 

 

useCallback의 적용 방법: 최 상위 컴포넌트에서 내려주는 함수에 대해 useCallback을 감싸서 재생성을 막는다. 

- 해당 함수에 인수로 useCallback 함수를 넣는다.

- 함수 내에서 참조하는 state, props가 있다면 의존성 배열에 추가해준다. 

 

useCallback으로 인해서 data가 변하지 않는다면 함수는 새로 생성되지 않는다. 그렇기에 메모리에 새로 할당되지 않고 동일 참조 값을 사용하게 된다. 또한 의존성 배열에 아무것도 넣지 않는다면 컴포넌트가 최초 렌더링시에만 함수가 생성되고 그 이후는 동일한 참조 값을 사용하는 함수가 된다.

 

* point * 의존성배열에 넣은 값이 바뀔때만  함수가 재실행 되는 것임.

 

 

---

 

 

[useMemo] : 결과 값 최적화

메모이제이션은 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램 속도를 높여주는 최적화 기술이다. 

 

예를들어 컴포넌트내에 함수가 복잡한 연산을 수행할 경우 값을 리턴하는데 오랜 시간이 걸리게 된다. 

이럴 때 컴포넌트가 계속해서 리 렌더링을 하게 된다면 연산이 계속해서 수행되는데 오랜 시간이 걸려 성능에 안 좋은 영향을 미치게 된다. 결국 UI지연 현상이 발생하게 된다. 

 

그렇다면 useMemo가 여기서 어떤 역할을 하게 되는가?  함수가 넘겨주는 값이 동일하다면 컴포넌트가 리 렌더링이 되더라도 연산을 다시 하지 않고 이전에 저장해두었던 렌더링 때의 값을 재활용할 수 있게 한다. 

 

useMemo 적용방법: 해당 결과값에 userMemo로 감싸주고 첫번째 인수 의존성 배열의 값을  넣어준다.