const Counter = () => {
const [count, setCount] = useState(0);
return (
<>
count: {count}
{
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);
}}
)
}
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleClick = () => {
this.setState(prevState => ({
count: prevState.count + 1
}));
};
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
}
이 예제에서는 setState 함수를 호출할 때, 이전 state 값을 받아와서 { count: prevState.count + 1 } 객체를 반환하도록 설정하고 있다. 이렇게 하면 현재 state 값을 직접 참조하지 않고도 이전 state 값을 활용하여 새로운 값을 계산할 수 있다.
그리고 이전 state 값을 기반으로 새로운 값을 계산하기 때문에, 여러번 setState 함수를 호출할 경우 발생할 수 있는 동기화 문제를 방지할 수 있다.
'React Native' 카테고리의 다른 글
createElement()/jsx/babel (0) | 2023.04.05 |
---|---|
React render (0) | 2023.04.05 |
attrs in React-native (0) | 2023.04.04 |