[React]State

State

• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
  => 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값
• 컴포넌틑 내에서 정의하고 사용하며 얼마든지 변경할 수 있다.

Main.js

import React, { useState } from "react";

const Main = () => {
  const [color, setColor] = useState("red");

  return (
    <div>
      <h1 style={{ backgroundColor: color }}>여기는 메인페이지입니다..</h1>
      <button onClick={() => setColor("blue")}>배경색 변경</button>
    </div>
  );
};

export default Main;

호출을 하게 되면 반환값으로 두 가지 값이 담긴 배열을 반환한다.
반환한 값을 구조분해 할당을 이용해 각각의 변수에 반환 값을 담아준다.
useState훅을 호출해서 반환된 첫번째 값을 state 라는 변수에 할당하게 되고 두번째 값을 setState라는 변수에 할당하게 된다.

첫번째 값(color) => 동적으로 관리할 상태값
useState로 호출 할 때 넣은 인자로 입력한 값
두번째 값(setColor) => 첫번째 요소인 상태값을 업데이트하는 함수 값

button click 후