💙 useCallback

• React.memo는 컴포넌트를 메머이제이션 했다면,
• useCallback은 인자로 들어오는 함수 자체를 기억(메모이제이션)한다.

예제

• Box1 : count를 초기화 해 주는 코드
• 기존 코드
  📁 App.jsx

	...기존 코드
    
  // count를 초기화해주는 함수
  const initCount = () => {
    setCount(0)
  }
  
	...기존 코드
    
  return (
  
    ...기존 코드
    
        <Box1 initCount={initCount} />
        
	...기존 코드
  )
}

export default App

📁 components / Box1

import React from 'react'

const style = {
  width: '100px',
  height: '100px',
  backgroundColor: '#01c49f',
  color: "white"
}

function Box1({ initCount }) {
  console.log('Box1 컴포넌트가 렌더링 되었습니다')
  return (
    <div style={style}>
      <button
        onClick={() => {
          initCount();
        }}>초기화</button>
    </div>
  )
}

export default React.memo(Box1)

---

💙 useCallback

• React.Memo(Box1) 이 되어있음에도 불구하고 +,- 버튼을 누르면 Box1이 리렌더링된다.
• 함수형 컴포넌트를 사용했기 때문 ( function App() )
• 객체의 불변성 때문. 함수도 객체이다.
• App 컴포넌트가 리렌더링 될 때 마다 initCount함수는 새로운 주소 값을 갖게 된다.
• Box1은 props가 바뀌었구나! 하고 인식하여 리렌더링이 된다.
• 이런 상황을 방지하기 위해 useCallback 을 사용하여 함수 자체를 별도 메모리 공간에 저장하는 방법을 사용

📁 App.jsx

// 변경 전
const initCount = () => {
  setCount(0)
}

//변경 후
const initCount = useCallback(() => {
  setCount(0)
},[])

• 함수를 useCallback으로 감싼다.
• 의존성 배열 추가
• 특정 state가 변경 될 때 처음에 저장했컨 콜백 함수가 갱신되어야 하면 해당 state를 넣어야 한다.

const initCount = useCallback(() => {
  console.log(`${count}에서 0으로 변경 되었습니다.`)
  setCount(0)
},[])

• ${count}가 0으로 나오는 이유
• App컴포넌트가 그려질 때. 즉, 처음 initCount가 메모리에 저장 되었을때는 count가 0이었다.
• 리렌더링 됐을 때 initCount가 새로 저장되는것이 아니므로 처음 저장 된 값 그대로 갖는다
• 스냅샷이 찍혔다고 생각하자
  
  
• count가 바뀌었을 때는 initCount도 갱신되어야하므로
• 의존성배열에 count를 넣어준다.

const initCount = useCallback(() => {
  console.log(`${count}에서 0으로 변경 되었습니다.`)
  setCount(0)
},[count])

지금 결과는 맨 위에서 했던거랑 같은 결과 아닌가..?