[Fast Campus , React] 15. React useCallback & useMemo

useCallback을 이용한 함수 최적화

원래 컴포넌트가 렌더링 될 때 그 안에 있는 함수도 다시 만들게 된다.

똑같은 함수를 컴포넌트가 렌더링 된다고 해서 계속 다시 만드는 것은 좋은 현상은 아니다.

만약 이 함수가 자식 컴포넌트에 props로 내려준다면 함수를 포함하고 있는 컴포넌트가

리렌더링 될 때마다 자식컴포넌트도 함수가 새롭게 만들어지니 계속 리렌더링 하게 된다.

React.memo를 사용해도 리렌더링 되는 현상이 발생하기 함.

 

React.useCallback

메모이제이션된 함수를 반환하는 함수

useCallback안에 콜백함수와 의존성 배열을 순서대로 넣어주면 된다

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

useCallback으로 인해 의존성 배열에 추가해 준 state나 props가 변하지 않는다면 함수는 새로 생성되지 않는다.

의존성 배열에 아무것도 없다면 컴포넌트가 최초 렌더링 시에만 함수가 생성되며 그 이후에는 동일한 참조값을 사용하는 함수가 된다.

 

useMemo를 이용한 결과 값 최적화

Memoization?

비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환해 프로그램의 속도를 높이는데 주로 사용되는 최적화 기술.

 

function Test({a,b}) {

    const result = compute(a,b)

    return <div>{result}</div>

}

만약에 Component내의 compute함수가 오랜시간이 걸리는 함수라면  컴포넌트가 계속 리렌더링된다면 연산을 계속 수행하는데 오랜 시간이 걸려서 성능 문제 발생.

compute함수에 넘겨주는 a, b의 값이 이전과 동일하다면 컴포넌트가 리렌더링 되더라도 연산을 다시 하지 않고 이전 렌더링 때의 저장해 두었던 값을 재활용하게 된다.

 

useMemo 적용.

useMemo로 감싸준 후에

첫번째 인수에 처리할 함수 내용을

두번째 인수 의존성 배열에 처리할 함수가 사용하는 값을 넣어준다.

 

=> useMemo를 사용하기

function Test({a,b}) {

    const result = useMemo( ()=> compute(a,b), [a,b])

    return <div>{result}</div>

}