🟡 useCallback
React.useCallback( (콜백) => {함수}, [ 의존성배열 ])생긴건 useEffect와 비슷하지만 사용은 다르다.
useCallback의 첫번째 인자 = 콜백함수
useCallback의 두번째 인자 = 의존성 배열(dependency array)
useCallback은 memoization 할 때 쓰는 훅이다.
memoization 메모이제이션이란 메모리 어딘가에 저장해두고 꺼내 쓴다는 뜻이다.
컴포넌트도 결국 함수다.
컴포넌트를 불러온다는 건 함수를 불러온다는 것이고, 함수는 호출되면 랜더링 시 함수 안의 코드를 전부 읽는다.
즉, 컴포넌트는 랜더링 될 때마다 안에 작성한 코드가 전부 읽혀진다는 것이다.
예를 들어 A컴포넌트에 다음의 함수가 있다고 하자.
const one = ()=>{}컴포넌트가 불려오면 one이라는 함수를 읽고 메모리에 넣어둔다.
그래야 one이라는 함수를 부르면 꺼내서 쓸 수 있다.
그럼 함수 one의 결과값은 영원히 동일할까? 아니면 랜더링 될 때마다 바뀔까? 그건 알 수 없다. 함수 one의 결과값은 랜더링이 될 때 바뀔 수도 있고 아닐 수도 있다.
이런 불확실한 상황에서 랜더링이 일어날 때마다 함수 one을 메모리에 넣었다 뺐다를 반복하는 것은 비효율적이라 할 수 있다. 함수의 값이 변화했을 때만 메모리에 넣어야 효율적으로 사용할 수 있다.
그래서 useCallback은 두번째 인자인 [ 의존성 배열 ] 의 값이 바뀔 때에만 첫번째 인자인 콜백함수를 호출하도록 메모이제이션 할 수 있게 만드는 함수이다.
쓸일이 있을까? 싶지만 프로젝트 스코프가 넓어지면 자연스럽게 프론트의 최대 고민인 불필요한 랜더링을 막기위해 사용하게 된다(고 한다.ㅋ...)
