[React] useCallback 함수

다음 내용은 책 '리액트를 다루는 기술'을 바탕으로 작성된 글입니다.

---

useCallback 함수는 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다.

주요 기능은, 만들어 놨던 함수를 재사용할 수 있다는 것이다.

 

컴포넌트 내에서 일반적으로 함수를 선언하면,

컴포넌트가 리렌더링될 때마다 새로 만들어진 함수를 사용하게 된다.

대부분의 경우 문제가 없지만 렌더링이 자주 발생하거나 렌더링 해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해주는 것이 좋다.

useCallback 함수를 사용하면,

컴포넌트 리렌더링이 이루어질 때마다 함수를 재생성하지 않고, 기존에 만들어놨던 함수를 사용할 수 있다.

 

👉 기본 함수 선언

const onChange = () => {                 
  setNumber(e.target.value);               
}

 

👉 useCallback 사용 함수 선언

const onChange = useCallback(e=> {
  setNumber(e.target.value);
}, [])

 

---

useCallback

첫 번째 파라미터

> 생성할 함수

두 번째 파라미터

> 어떤 값이 바뀌었을 때 함수를 새로 생성하는지 명시

 

위 코드의 onChange 처럼 두 번째 파라미터에 비어있는 배열을 넣게 되면, 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용하게 된다.

 

const onInsert = useCallback(()=> {
	const nextList = list.concat(parseInt(number));
	setList(nextList);
    setNumber('');
}, [number,list]);

반면 위의 코드처럼 두 번째 파라미터의 배열 안에 변수를 넣게 되면, 해당 변수가 바뀌거나 새로운 항목이 추가될 때마다 함수가 새로 만들어진다.

 

 

함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다.