useCallback

useCallback

다음의 경우 버튼이 클릭될 때마다, Clicked와 Button rendered가 둘다 출력된다. App이 리렌더링될 때마다 Button도 리렌더링된다.

class App extends Component {
  handleClick() {
    console.log("Clicked")
  }
  render() {
    return (
    	<div>
      	<Button onClick={() => this.handleClick} />
      </div>
    )
  }
}

class Button extends Component {
  render() {
    console.log('Button rendered');
    return <button onClick={this.props.onClick}>버튼</button>
  }
}

 

그러나 constructor 을 만들어 bind하면 버튼은 최초에 렌더된 후 버튼이 클릭될 때마다 Clicked만 출력된다. handleClick이라는 함수가 한 번만 만들어진 뒤 재사용되는 것이다.

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log("Clicked")
  }
  render() {
    return (
    	<div>
      	<Button onClick={this.handleClick} />
      </div>
    )
  }
}

 

함수형 컴포넌트 내에서 useCallback을 사용하면 마찬가지로 함수를 한 번 만든 뒤 재활용한다.

const App = () => {
  const handleClick = useCallback(() => console.log('Clicked'), []);
  return <Button onClick={handleClick} />
}

useCallback에 pass되는 두번째 아규먼트를 의도적으로 빈 어레이로 두면, handleClick 함수는 한 번 만들어진 뒤 갱신되지 않는다.