📖[React]state, useState

✔️ state = component가 가진 속성값

속성값이 변하면, react는 자동으로 ui를 업데이트함!
따라서 화면을 다시 그려주지 않아도 됨.

export default function Hello() {
  let name = "Mike";

  function changeName(){
    name = name === "Mike" ? "Jane" : "Mike"
  }
  return (
    <div>
      <h1>state</h1>
      <h2>{name}</h2>
      <button onClick={changeName}>Change</button> //이름을바꾸는 버튼
    </div>
  );
}

그러나 결과는 이름이 바뀌지 않음, 이름은 그냥 변수값이고, 컴포넌트가 관리하는 값이 아님

✔️ useState활용

useState('초기값'), 동일한 컴포넌트라도 state는 각각 관리됨

import {useState} from "react";

export default function Hello() {
  const [name, setName] = useState('Mike');
  
  function changeName(){
    const newName = name === "Mike" ? "Jane" : "Mike"
    setName(newName)
  }
  return (
    <div>
      <h1>state</h1>
      <h2>{name}</h2>
      <button onClick={changeName}>Change</button> //이름을바꾸는 버튼
    </div>
  );
}