[React Hooks] useState

State

• 컴포넌트의 상태

const [state, setState] = useState(초기값);

• state : 현재상태

• setState : state 변경함수

• state를 배열형태로 반환해준다

• setState로 state를 변경하면 컴포넌트가 업데이트(렌더링) 된다

• 즉, setState 함수로 state를 변경할 때마다 컴포넌트가 리렌더링된다!

• state를 변경할 때, 새로 변경될 state 값이 이전 state값과 연관이 있다면 setState의 인자로 새로운 state를 넘겨주는 콜백함수를 넘겨준다

setState((prevState) => {
	// 코드
	return newState;
	});

• 초기값을 불러올 때, 엄청 무거운 데이터가 들어온다면 useState()안에 바로 값을 넣는게 아니라 콜백함수를 넣어주면 된다. 그러면 맨 처음 렌더링 될 때만 실행이 된다.

useState(()=>{
	return heavyWorks();
})

import { useState } from "react";

import "./App.css";

const heavyWork = () => {
  console.log("엄청 무거운 작업");
  return ["홍길동", "김민수"];
};

function App() {
  const [time, setTime] = useState(1);
  const handleClick = () => {
    let newTime;
    if (time >= 24) {
      newTime = 1;
    } else {
      newTime = time + 1;
    }
    setTime(newTime);
  };

  const [names, setNames] = useState(() => {
    return heavyWork();
  });
  const [input, setInput] = useState("");
  const handleInputChange = (e) => {
    setInput(e.target.value);
  };
  const handleUpload = () => {
    setNames((prevState) => {
      return [input, ...prevState];
    });
  };

  console.log(input);

  return (
    <>
      <div>
        <div>현재시각 : {time}시</div>
        <button onClick={handleClick}>Update</button>
        <div>
          <input value={input} onChange={handleInputChange} type="text" />
        </div>
        <button onClick={handleUpload}>Upload</button>
        {names.map((name, idx) => {
          return <p key={idx}>{name}</p>;
        })}
      </div>
    </>
  );
}

export default App;