강의 유튜브 주소 :
https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn
useMemo와 useCallback
Class에서 작업했던 것들을 Hooks로 옮기다보면 Class에서 문제가 되지 않던 부분들이 문제가 되는 경우가 있다.
Hooks는 함수안에 있는 내용이 재 렌더링이 되는데,
getNumbers라는 함수가 Hooks의 특성으로 인해서 재 렌더링이될 수 있다.
import React, { useState, useRef, useEffect } from 'react';
function getNumbers(){
// ......
}
const Test = () => {
const numbers =() => getWinNumbers(
);
// .....이때 getNumbers가 캐싱될 수 있도록 useMemo를 써주는게 좋다.
import React, { useState, useRef, useEffect } from 'react';
function getNumbers(){
// ......
}
const Test = () => {
const numbers = useMemo(() => getNumbers(
), [ state ]);
// .....
useEffect와 같이 useMemo나 useCallback에도 두번째 인자값을 넣을 수 있다.
두번째 인자값이 바뀌면 재렌더링이되고 그렇지 않다면 재렌더링이 되지 않는다.
위와 같이 useMemo를 썼을 경우 (useMemo처럼 한번 더 함수를 감싸면 high order component가 된다, hoc)
getNumbers를 캐싱한다.
요소가 바뀌기 전까지는 캐싱한 값을 가져온다.
useCallback과 useMemo를 헷갈려하는 경우가 많다는데,
useMemo는 값을 기억하는 것이다.
리턴값. 즉 getNumbers에서 넘어오는 number값을 기억한다.
useCallback은 함수자체를 캐싱하는 것이다.
이벤트 핸들러같은것을 캐싱할 수 있다.
const onClickRedo = useCallback(() => {
// ....
}, []);
함수의 비용이 클때 사용한다.
그렇다면 함수마다 useCallback을 쓰면 이득인가? 생각할 수 있다는데, 이것은 반반이다.
useCallback을 모든 함수에 감쌀 경우 첫번째 동작은 늘 같을 수 있다.
하지만 문제가 캐싱을 너무 잘해서 값이 바뀌었을 경우 인식하지 못하는 경우라고 한다.
그래서 useCallback을 쓸때 두번째 인자값에 유의해야한다.
두번째 인자값역시 useEffect나 useMemo와 같이 재렌더링을 하려고하는 state나 props, 그리고 조건문을 넣으면 된다고 한다.
const onClickRedo = useCallback(() => {
// ....
}, [ state ]);
useEffect, useMemo, useCallback모두 빈배열이 default값이다.
아 그리고 useCallback을 필수로 적용해야하는 경우가 있는데, 자식 컴포넌트에 props를 함수로 넘기는 경우 useCallback을 필수로 적용해줘야한다고 한다.
매번 새로운 함수가 랜더링되면 비용이 크기때문에 자식컴포넌트에 넘기는 함수에 적용하도록 하자.
그래서 부모로 부터 전달받는 함수가 매번 같을 경우 재 렌더링이 일어나는 것을 방지해줘야한다.
// onClick 함수에 useCallback을 적용한다
const onClick = useCallback(() => {
// ....
}, [ state ]);
// ....
<Test number={props} onClick={onClick} />