React(3) 〓 useState

useState

useState는 기존에 화면을 보여 줄 때 텍스트 따위가 즉각적으로 변하지 않는 문제가 있어 그걸 보완하고자 해서 사용하는 함수입니다.

import "./styles.css";
import React from "react";

export default function App() {
  let a = 0;

  function plus() {
    a++;
    console.log(a);
  }

  return (
    <div className="App">
      <button onClick={plus}>plus</button>
      {a}
    </div>
  );
}

예를 코드로 들자면 이렇습니다.
화면에서 버튼을 누르면 즉각 1씩 증가하는 모습을 보여 주어야 하는데, 그렇지 않습니다.
console에는 값이 분명히 변하고 있는데, 화면에는 출력된 0이 그대로 유지되는 것을 볼 수 있습니다.

이걸 해결하고자 쓰는 게 useState인 거죠.

import "./styles.css";
import React from "react";

export default function App() {
  let [result, func] = React.useState(0);

  function Plus() {
    let a = 0;
    if (a == 0) a = 1;
    func((result) => result + a);
  }

  return (
    <div className="App">
      {result}
      <button onClick={Plus}>Click</button>
    </div>
  );
}

useState는 React를 불러와서 써야 합니다.
이렇게 let [(a), (b)] = React.useState([자기가 쓰려고 하는 a 형식에 맞는 값]);으로 선언하는데,
값을 변화시키려면 func(b)를 쓰셔야 합니다. 위의 경우 Arrow Function으로 1씩 result의 값을 증가시키겠죠.

onClick으로 함수를 부르실 때에는 중괄호로 묶고 함수 이름을 작성하시면 잘 작동합니다.

import "./styles.css";
import React from "react";

export default function App() {
  const [something, setThings] = React.useState(["Thing 1"]);
  // destructuring
  // setter function
  console.log(something);

  const func = something.map((element) => {
    return <p key={element}>{element}</p>;
  });

  function addItem() {
    const newThingText = `Thing ${something.length + 1}`;
    setThings((prev) => [...prev, newThingText]);
    console.log(something);
  }

  return (
    <div className="App">
      <button onClick={addItem}>Add Item</button>
      {func}
    </div>
  );
}

배열이면 배열 형식으로 쓰시면 되고요, 배열 안에 추가하실 때는 [...prev(= 전에 있던 거), (지금 넣을 거)] 이렇게 쓰시면 됩니다.