[React] useCallback 이용하기

1. useCallback이란?

이제부터 최적화를 시작해봅시다! 어떤 부분을 미리 기억을 해서, 필요할 때 꺼내 쓴다는 형식으로 이해하기 쉽다.
얘네를 꺼내 쓰지 않고, 쌩으로 선언하게 되면 state값이 바뀌어서 랜더링이 될 때마다 새로이 함수 주소값을 할당해주어서 사용하게 된다. 그래서 당연히 느려질 수 밖에 없으니까 신경써주어야 함!!

   const addPost = () => {
        setPostList((postList) => [
            ...postList, {id : 4, title :'공부는 열심히 하면 좋아.'},
        ]);
    };

props가 새로 달라진다거나 state가 setState로 변하면 Component의 위와 같은 함수가 재생성된다. postList가 변하지도 않았는데, 이럴 때마다 addPost를 새로 만든다면 너무 비효율적이죠. 이러한 함수를 memorize하여, 연산이 오래 걸리고 복잡한 함수를 효율적으로 미리미리 처리하는 기법을 useCallback이라고 해요!

어떻게 사용하나욤

먼저 useCallback을 import해야 한다.

   const addPost = () => {
        setPostList((postList) => [
            ...postList, {id : 4, title :'공부는 열심히 하면 좋아.'},
        ]);
    };

위의 함수를 useCallback으로 감싸주면 된다. dependency array(Deps) 를 추가하여 postList가 변하면 addPost를 새롭게 연산해야 한다는 것을 알려주어야 한다. (얘네가 바뀌지 않는 한, 메모라이즈 했던 것을 그대로 사용)

   const addPost = useCallback(() => {
        setPostList((postList) => [
            ...postList, 
          {id : 4, title :'공부는 열심히 하면 좋아.'},
        ]);
    }, [postList]);

이 함수 때문에 랜더링이 매우 느려진다면 useCallback을 사용하는 것을 추천한다!

여기서 빈 배열을 사용하게 된다면 컴포넌트가 처음 랜더링 될 때만 처음 만들어진 함수를 계속 사용하겠다는 의미로 사용할 수 있다. 그래서 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두번째 파라미터에 넣어 사용해야한다.