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

+ Recent posts