TIL 25. setState

❗️setState는 비동기 함수이다 !

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({
      number: this.state.number + 1
    });
    console.log(this.state.number);
  }
  
  render() {
    return(
      <div className="App">
      	<h1>Hello World!</h1>
      	<h2>Current Number: {this.state.number}</h2>
	  	<button onClick={this.handleClick} type="button" className="btn">
	    </button>
	  </div>
	);
     }
  }

위 처럼 코드를 짜면 이렇게 화면이 나온다

🔥 console을 찍으면 화면 숫자는 1이지만 console은 0 !!

🤷🏻‍♀️ 🤷🏻‍♀️ 왜 일까?

handleClick() {
    this.setState({
      number: this.state.number + 1
    });
    console.log(this.state.number);
  }

setState는 비동기 함수이기 때문에 console을 setState 바로 아래 찍으면 render되기 전에 바로 찍히기 때문에 시간이 걸리는것을 무시하고 이전 값이 출력되는 것 !

🙋🏻‍♀️ 🙋🏻‍♀️ 해결 방법

handleClick() {
    this.setState({
      number: this.state.number + 1
    }, () => {
      console.log(this.state.number);
      }
    );
  }

두번째 인자로 넘겨주는 콜백함수를 사용. 업데이트가 끝나면 함수가 실행되도록 !!

+ 더 좋은 방법

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
      text: ''
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({
      number: this.state.number + 1
    });
    console.log(this.state.number);
  }
  
  handleChange(e) {
  	this.setState({
      text: e.target.value
    });
    
    console.log(e.target.value);
  }
  
  render() {
    return(
      <div className="App">
      	<h1>Hello World!</h1>
      	<h2>Current Number: {this.state.number}</h2>
	  <button onClick={this.handleClick} type="button" className="btn">
	  </button>

	   <div>
        <h2>Text 입력:</h2>
            <input onChange={this.handleChange} type="text" className="input" />
           </div>
	  </div>
	);
     }
  }
  
  export default App;

굳이 콜백함수로 사용할 필요는 없다 !