React Hooks - useState

뒤돌면 까먹을 나를 위해,,,
확실히 내가 쓴 블로깅은 내가썼기 때문에 이해가 잘된다. 하지만 너무.. 피곤한일이긴 하다. 그래도 어쩌겠어? 해야지.
https://codesandbox.io/s/react-usestate-7gw2k9?file=/src/App.js
샌드박스 적극이용중 ~ 참 좋다.

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [names, setNames] = useState(["Lia"]);
  const [input, setInput] = useState(""); // 현재 인풋안에 어떤값이 들어있는지 알려주는 useState

  const handleInput = (e) => {
    // console.log(e);
    setInput(e.target.value);
    // console.log(input);
  };

  const handleClick = () => {
    // 콜백의 인자로는 업데이트 전 state를 준다.
    setNames((prevState) => {
      // retuen하는 값은 새롭게 업데이트 될 state
      return [input, ...prevState];
    });
  };

  return (
    <div>
      <input type="text" value={input} onChange={handleInput} />
      <button onClick={handleClick}> Enter</button>
      {names.map((name, idx) => {
        return <p key={idx}>{name}</p>;
      })}
    </div>
  );
}

// State를 변경할 때 이전에 존재하는 State값과 관계가 있다면 값을 주는게 아니라 콜백함수를 전달해준다.
// names의 초기값이 ["Lia, John"]이라면 handleClick 함수에서 setNames의 인자로 ["Lia, John"] 이걸 전달해주는 것이 아님!
// Setstae 인자로 새로운 state를 리턴하는 콜백함수를 넣어주면 좋다. 재사용가능
// useState 사용시 초기값이 무거운 작업이라면 useState의 인자로 콜백함수를 넣어주면 처음에만 렌더링 되기때문에 효율적이다.
// prevState는 초기값이 들어있다.  ["Lia"]