useState HOOK

간단하게 버튼을 누르면 카운트가 올라가는 코드를 짜보자

 

App.jsx

 

import './App.css';
import {useState} from "react";

function App() {

    const [count, setCount] = useState(0);

    return (
        <div style={{ margin: "30px" }}>
            <p>You click {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me (+)</button>
            <button onClick={() => setCount(count - 1)}>Click me (-)</button>
        </div>
    );
}
export default App;

 

useState 함수 호출 시 배열이 반환

첫 번째 원소는 현재 값, 두 번째 원소는 Setter 함수, 총 2개의 값을 가지고 있따

useState(0)은 변수의 초기 값을 0으로 설정하겠다. 이말임

 

useState에는 함수도 들어갈 수 있다.

 

 

결과

기본

+ 버튼을 눌렸을 때 카운트가 증가한다

- 버튼을 눌릴때 카운트가 감소한다

---

 

추가 ::

이런식으로 여러개의 state 를 선언 할 수 있다.

당연하지만 변수선언이 각각 age, fruit, todos 로 선언을 했기 때문

  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);