React(43) 리액트 훅 - useCallback 이란

내가 사용하면서 느낀 useCallback 은 리액트 전용 콜백함수라는 느낌이 강했다.

보통 자바스크립트만 사용하다가 callback 지옥을 경험해봤다는 목격담을 많이 전해들었다. (후덜덜)

다행히도 리액트에서는 콜백함수가 쓰이지 않는다. 그렇지만 가끔씩 비슷하게 써야할 때가 있다.

자 그럼 useCallback() 이 무엇인지 알아보자.

 

 

---

React(43) 리액트 훅 - useCallback 이란

 

- 내가 이해해본 useCallback()

useEffect 는 (() => {
    두번째 배열 [test] 라는 변수에 변화가 있을 때만 렌더링을 새로 하는 것 처럼
}, [ test ])

useCallback 도 (function() {
    두번째 배열 [test] 라는 변수에 특정 변화가 있을 때만 함수를 새로 생성한다.
}, [ test ]

 

쉽게 말해서 나는 useEffect 와 비스무레한 느낌으로 이해했었다.

둘의 공통점은 렌더링이다. 렌더링을 많이하면 성능이 떨어지기 때문이다. 꼭 필요할 때만 렌더링해야 좋다.

렌더링을 하면 함수는 매번 새로 만들어진다. useCallback() 을 사용하면 필요할 때만 함수를 재생성할 수 있다. 

 

하위 컴포넌트에 props 로 함수를 전달할 때 useCallback() 을 많이 사용한다. 

하위 컴포넌트에 전달하는 콜백 함수는 inline 함수로 사용되거나, 컴포넌트 내에서 함수를 생성한다면,

리렌더링 될 때 마다 새로 만들어진다. 그래서 필요할 때만 생성하는 useCallback() 을 사용한다.

 

리렌더링 될 때마다 새로 생성되는 일반 함수를 자식한테 물려준다 ?

그럼 자식도 부모님따라 쌍쌍바처럼 같이 생성 될 것이다. (대충만 봐도 that's no no)

 

 

함수를 매번 만든다고 해서 성능이 눈에 띄게 떨어지는 건 아니지만
한번 만든 함수를 재 사용하고, 필요할 때만 재 생성 하는 것은 중요하다. 

 

 

React가 리렌더링을 하는 조건이다. (여튼 렌더링될 조건이 괴엥~장히 많다는 뜻)

• props가 변경되었을 때
• state가 변경되었을 때
• 부모 컴포넌트가 렌더링되었을 때
• forceUpdate() 를 실행하였을 때

 

- useCallback() 의 문법

useCallback은 ( function() {

    인라인 콜백함수와

}, [의존성 값의 배열] ) 을 받는다.

 

의존성 배열인 deps에 변경을 감지해야할 값 [item] 을 넣어주게 되면 얘가 변경될 때마다 콜백 함수를 새로 생성한다.

useCallback(function(){
   함수내용 어쩌고저쩌고 
}, [item])

 

간단하고 말이 안되지만 한눈에 들어오는 쉬운 예제이다. (그러니 코드해석은 깊이 하지 마시길ㅠㅠ)

useCallback 함수를 선언하고 자식컴포넌트에 props 로 물려줘서 사용한다.

// useCallback() 함수 선언
const setPageInfo = useCallback(
  (page: number) => {
    setPage({
      ...pageInfo,
      page,
    });
  },
  [pageInfo]
);

// 사용은 자식컴포넌트에 함수를 물려줄 때
return (
  {pageInfo.total !== 0 && (
    <Paginator {...pageInfo} setPage={setPage} />
  )}
)

 

 

 

ref : https://velog.io/@rjsdnql123/TIL-React.useCallback-%EC%9D%B4%EB%9E%80