모던 리액트 Deep Dive - useCallback

* 해당 게시글은 모던 리액트 Deep Dive 도서를 공부하며 정리한 내용입니다.

* 몰랐거나, 헷갈리는 부분들만 정리되어있습니다. 책에는 더 자세히 나와있습니다

useCallback

• 인수로 넘겨받은 콜백 자체를 기억함

function Child = memo((num, onChange) => {
 return (
  <>
   <div>{num}</div>
   <button onChange={onChange}>버튼</button>
  </>
 )
})

function Parent = () => {
  const [total, setTotal] = useState(0);
  const [total2, setTotal2] = useState(0);
  const [toggled, setToggled] = useState(true);
  const [toggeld2, setToggled2] = useState(true);
  
  const onChnage1 = () => {
   setToggled(!toggled);
   setTotal((prev) => prev + 1);
  }
  
  const onChnage2 = () => {
   setToggled2(!toggled2);
   setTotal2((prev) => prev + 1);
  }
  
  return (
   <>
    <Child num={total} onChange={onChnage1}/>
    <Child num={total2} onChange={onChnage2}/>
   </>
  )
}

// Child가 memo가 되어있더라도 total 값 변경 후 리렌더링 되면 onChnage1, onChange2 함수는 재생성됨