[React] useCallback을 사용한 최적화 ?

리다기 공부중,, 기존의 코드에서 useMemo를 사용해 최적화 하는 부분은 어느정도 이해를 했는데,  + useCallback으로 최적화 하는 부분이 영 이해가 안가서, 따로 정리해본다

 

 

기존 함수부분

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

const onInsert = (e) => {
  const nextList = list.concat(parseInt(number));
  setList(nextList);
  setNumber("");
};

 

 

 

useCallback 사용

const onChange = useCallback((e) => {
  setNumber(e.target.value);
}, []); // 컴포넌트가 처음 렌더링될 때만 함수 생성

const onInsert = useCallback(
  (e) => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
  },
  [number, list]
); // number 혹은 list가 바뀌었을 때만 함수 생성

 

사용 전 첫 번째 코드에서는 onChange, onInsert함수 모두 렌더링마다 새로운 함수를 호출하고 (매 렌더링마다 새로운 함수를 생성)
onInsert는 number과 list두 상태 중 하나라도 변경되면 함수가 다시 생성된다 

→ 불필요한 리렌더링을 유발할 수 있음

 

두 번째 코드에서 onChage함수는 useCallback을 사용해 함수가 한 번 생성되고, 빈 배열 '[]'을 두 번째 매개변수로 전달하여 
컴포넌트가 처음 렌더링 될 때만 함수를 생성하도록 하며, onInsert 함수는 number과 list를 의존성 배열로 갖고 있어 이 배열에 있는 상태 중 하나가 변경될 때만 함수를 재생성한다. 
→ 필요한 경우에만 함수가 다시 생성! 성능이 향상된다

 

사실.. 모..

최적화를 계속 해봐야 확실하게 머리에 들어올 것 같긴 하다