[REACT] 함수형 컴포넌트에서 상태값 가지기 변화하기 useState

Counter.js

import React, { useState } from 'react';
 
function Counter() {
  const [number, setNumber] = useState(0);
 
  const onIncrease = () => {
    setNumber(number + 1);
  }
 
  const onDecrease = () => {
    setNumber(number - 1);
  }
 
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}
 
export default Counter;

 

 

---

이 부분에서

number는 변수명 setNumber는 함수명이다.

useState에는 초기값을 넣어준다.

즉 number= 0이라는 상태이다.

 

 

이 부분은 함수인데

setNumber의 ()안에 있는 값이 아까 위에서 정했던 setNumber라는 함수가 작동하는 것이다.

 

 

그래서 이 버튼을 눌렀을때 아까 만든 함수를 불러온다.

그러면 그 안에있던 setNumber을 실행하고

setNumber에서 number을 변화시켜준다.

 

주의할 점은 JSX에서 함수명만 넣어줘야한다.

onIncrease()이렇게 함수를 호출하면 안된다는 것이다.

호출하면 렌더링 시에 바로 실행이 된다.