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;
굳이 콜백함수로 사용할 필요는 없다 !
Author And Source
이 문제에 관하여(TIL 25. setState), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rhdwnals1/TIL-25.-setState저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)