[리액트 훅(ReactHooks)] useMemo와 useCallback

[주의 : 이해를 해가는 과정을 적은거라 정확하지 않은 추상적인 설명이 있을수 있습니다.]

-지나가시던 고수분들 틀린 부분 지적해주시면 반영하겠습니다.

 

useCallback은 useMemo와 비슷하다. 불필요한 호출이나 랜더링을 최적화해주는넘

.

useMemo가 인풋에 무언가가 써지고 있을때 평균값 계산을 계속하고 있던것을

인풋이 수정되다가 최종적으로 컨켓한후 list배열에 list로 안착이 되었을때 호출토록 했다면

 

useCallback에서는 컴포넌트가 랜더링 되는걸 지금은 꽤 숫자를 줄이긴했지만

그래도 리랜더링이 될때마다 함수 onChange와 onInsert가 계속 생성 되는 낭비를

줄여보도록 할 수 있다.

 

useCallback의 첫 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣는다.

이 배열에는 어떤 값이 바뀌었을때 함수를 새로 생성해야 하는지 명시해야 한다. 감시 대상 값.

onChange처럼 비어 있는 배열을 넣게 되면 컴포넌트가 렌더링 될 때 단 한번만 함수가 생성된다.

onInsert처럼 배열 안에 number와 list를 넣게 되면

인풋 내용이 바뀌거나(number감시) 새로운 항목이 추가될때마다(list감시) 함수가 생성된다.

 

함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터안에 포함시켜 주어야 한다.

 

예를들어 onChange의 경우 기존의 값을 조회하지 않고 바로 설정만 하기 때문에 배열이 비어

있어도 상관없지만, onInsert는 기존의 number와 list를 조회해서 nextList를 생성하기 때문에

배열 안에 number와 list를 꼭 넣어주어야 한다.

useCallback은 결국 useMemo 함수를 반환하는 상황에서 더 편하게 해준다.

즉 useMemo로 필요이상으로 예민한 리렌더링을 막아 리소스 낭비를 줄였다면

useCallback은 그런 리렌더링 자체에서도 발생할 수 있는 불필요한 함수생성을 막아준다.

 

빈 배열을 넣으면 한번만 실행된다는 논리는. 빈 배열을 감시하려는데, 이놈은

한번 변하면 더이상 빈 배열이 아니기 때문에 감시대상에서 벗어난다.

 

그래서 한번만 쓰고 싶을때는 두번째 인자로 빈배열을 넣으라고 하는 것이다.

 

리액트를 다루는 기술에서 발췌한 샘플코드.

 

 

아래 두 코드는 완전히 똑같은 코드이다.

 

useCallback(() => {
	console.log('hello world!');
}, [])


useMemo(() => {
	const fn = () => {
    	console.log('hello world');
    };
    return fn;
}, [])

 

아직 100% 이해한게 아니지만, 결국 useMemo를 좀더 간단하게 사용토록 한게 useCallback이라는것 같은데

 

그렇다면 그냥 useMemo사용법부터 완전히 익히는게 나을것 같다.

 

생각해보면 useCallback이라는 말은

useMemo메서드 안에 첫번째 인자인 화살표 함수 안에 다시 화살표 함수를 콜백함수로 넣어서 사용해서 유즈콜백이 된것 같다.

 

결국 콜백함수를 통해 함수 실행횟수를 줄여주는게 유즈콜백 또는 유즈메모에 콜백함수 심기.

 

특정 숫자, 문자열, 객체처럼 값의 변화를 감시 추적해서 잦은 렌더링을 막고 딱 필요할때만 렌더링을 하면서

 

기존의 저장된 값을 활용하는것이 useMemo인것 같다.

 

이걸 책에서는 일반값 재사용엔 useMemo, 함수 재사용엔 useCallback이라 한다.

 

하지만 이 문장을 100% 이해하려면 좀더 리액트와 ES6에 익숙해지는 시간이 필요할 것 같다.

 

일단 패스후 진행..