React State 관리

Boolean State 관리

import React, { useState } from "react";

const App = () => {
  const [isFlex, setIsFlex] = useState(false);
  const handleFlex = () => setIsFlex((value) => !value);
  return (
    <div>
      <div
        className="flex justify-center items-center w-40 h-10 bg-black text-white"
        onClick={handleFlex}
      >
        {isFlex ? "FLEX" : "BLOCK"}
      </div>
      <BoxWrapper flex={isFlex}>
        <div className="flex justify-center items-center text-2xl text-white w-40 h-40 bg-slate-500">
          1
        </div>
        <div className="flex justify-center items-center text-2xl text-white w-40 h-40 bg-pink-500">
          2
        </div>
        <div className="flex justify-center items-center text-2xl text-white w-40 h-40 bg-lime-500">
          3
        </div>
      </BoxWrapper>
    </div>
  );
}

export default App;

Select State 관리

 ...
  const [mainAxis, setMainAxis] = useState("");
  const mainAxisList = [
    "justify-start",
    "justify-center",
    "justify-between",
    "justify-around",
    "justify-end",
  ];
  const handleMainAxis = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setMainAxis(e.target.value);
  };
  return (
  ...
    <select className=" w-40" onChange={handleMainAxis} value={mainAxis}>
        {mainAxisList.map((item) => (
          <option value={item} key={item}>
            {item}
          </option>
        ))}
    </select>

결과 화면