useState, useEffect

- useState

import React, { useState } from "react";

function App() {
  const [number, setNumber] = useState(0);

  return (
    <div>
      <div>Number State: {number}</div>
      <button
        onClick={() => {
          // 기존 업데이트 방법
          // 배치성으로 처리된다.
          // 배치 업데이트
          // setNumber(number + 1)

          // 함수형 업데이트 방법
          setNumber((currentNumber) => {
            return currentNumber + 1
          });
        }}
      >
        누르면 Up
      </button>
    </div>
  );
}

export default App;

- useEffect

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

function App() {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log(`Hello useEffect : ${value}`);

    return () => {
      console.log("사라진당")
    }

  }, [value]);
  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;