[React] State & React Hooks - useState

State란 무엇일까?

비유로 한 번 이해해보자. State는 상태를 의미하는데, 예를 들어 온도가 State라고 할 때, 온도에 따라서 우리는 얼음을 볼 수도 있고, 물을 볼 수도 있다. 이 때, UI는 상태에 따라 변화하는 그 UI를 의미한다.

👉  Hook이란 이런 State를 hook해서 상태 변경을 효과적으로 도와주는 function이다.

Hooks API Reference - React

간단한 적용 예시

예시) “+” 버튼을 누르면 번호가 올라가게 만들기! “-”버튼을 누르면 번호가 내려가게 만들기!!

//index.js
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <div className="container">
    <h1>0</h1>
    <button>+</button>
  </div>,
  document.getElementById("root")
);

//App.jsx
import React from "react";

function App() {
  return <div />;
}

export default App;

⬇

Refactoring with useState

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.jsx";

ReactDOM.render(<App />, document.getElementById("root"));

//App.jsx
import React, { useState } from "react";

function App() {
  //const [state, setState] = useState(initialState);
  const [count, setCount] = useState(0);

  function increase() {
    setCount(count + 1);
  }

  function decrease() {
    setCount(count - 1);
  }

  return (
    <div className="container">
      <h1>{count}</h1>
      <button onClick={decrease}>-</button>
      <button onClick={increase}>+</button>
    </div>
  );
}

export default App;