콜백함수

[자바스크립트] 콜백함수란 ?

콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다.
리액트에서 콜백함수는 어떻게 사용될까?

setState를 사용하여 값을 업데이트하고 난 후, 특정작업을 하고 싶을 때는 setState의 두번째 파라미터로 👌🏻콜백함수 를 등록하여 작업을 처리할 수있다.

코드로 살펴보자!😎

• Counter.js

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
      fixedNumber: 0,
    };
  }
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1> {number} </h1>
        <h2> 변화하지 않는 값 : {fixedNumber} </h2>
        <button
          onClick={() => {
            this.setState(
              {
                number: number + 1,
              },
              () => {
                console.log('방금 setState가 호출되었습니다');
                console.log(this.state);
              }
            );
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

방금 setState가 호출된이후,
number 와 fixedNumber 의 값이 들어온다.