[React] useMemo와 useCallback (feat React.memo와 차이점)

useMemo

유즈 메모는 메모이제이션된 값을 반환한다. 

메모이제이션이란 동일한 값을 반복적으로 리턴하는 함수를 호출해야 한다면 맨 처음 계산한 값을 메모리에 저장해서 필요할 때 마다 재계산하지 않고 재사용 하는 방법이다.

 

함수형 컴포넌트는 함수일 뿐이다. 렌더링 된다는 것은 컴포넌트 함수를 호출한다는 의미이고 모든 내부 변수를 초기화 하게 된다. 

 

const value = useMemo(()=>{
	return calculate();
},[item]);

유즈 메모는 위처럼 두개의 인자를 받는다.

첫번째 인자는 콜백함수는 메모이제이션된 값을 리턴하는 것이다.

두번째 인자의 배열은 의존성배열이라고 한다. 배열안의 요소의 값이 업데이트 될때만 메모이제이션 한다.

만약 빈 배열일 경우 맨 처음 컴포넌트가 마운트 될 때 한번만 실행 된다.

 

하지만 유즈 메모도 필요할 때만 사용해야한다.

유즈메모는 값을 저장해서 다시 쓰는 개념인데, 만약 다시 쓰는 일이 없다면 불필요한 메모리를 차지하고 있게 되기 때문이다. 따라서 꼭 필요한 부분에만 사용하도록 한다.

 

 

useCallback

유즈 콜백또한 메모이제이션을 통한 컴포넌트를 최적화 해준다.

유즈 메모는 자주 쓰이는 값을 메모이제이션(캐싱)해서 재사용 한다.

 

유즈 콜백은 뭐가 다를까?

유즈 콜백도 똑같다. 대신 유즈콜백은 인자로 전달한 콜백함수 그 자체를 메모이제이션 해둔다. 따라서 함수를 새로 생성하는 것이아니라 필요할때마다 다시 가져와서 재사용 하는 것이다.

자바스크립트에서 함수는 객체의 한 종류이다.

useCallback(()=>{
	return value;
},[item])

유즈콜백은 두개의 인자를 받는다.

첫번째 인자로는 우리가 메모이제이션할 콜백함수,

두번째 인자로는 의존성 배열을 받는다.

 

useMemo vs useCallback vs React.memo

• 유즈 메모는 함수의 연산량이 많을 때, 이전 결과값을 재사용 하는 목적이다.
• 유즈 콜백은 함수가 재생성 되는것을 방지하기 위한 목적이다.
• 리액트 메모는 HOC(고차컴포넌트)이고, 유즈 메모와 유즈콜백은 hook이다.
• 리액트 메모는 HOC이기 때문에 클래스형컴포넌트, 함수형 컴포넌트 모두 사용 가능하지만, 나머지는 hook이기 때문에 함수형 컴포넌트에서만 사용 가능하다.
• 리액트 메모는 props check를 통해 props값의 변화가 있는지만 확인하여 최적화 시킬 수 있다.

하지만 모두 불필요한 렌더링 혹은 연산을 제어하는 용도로, 성능 최적화에 목적이 있다.

또한 무분별하게 사용하게 되면 재사용하기 위해 저장하는 메모리 소모가 있으므로 꼭 필요한 부분에서만 사용해야 한다.

 

 

예제를 보려면 아래 링크를 따라가보세요!

https://huirin.tistory.com/145

[React] Memoization