[React] state로 스타일 변경하기

state로 데이터 바인딩만 할 줄 알았지..
버튼에 붙여서 스타일 변경하는 것도 가능하다!

1. App.js (부모 컴포넌트)

<App.js>
import Input from "./Input";
import "./styles.css";

export default function App() {
  //전체데이터
  //map으로 데이터갯수만큼 UI생성
  const data = ["하이", "바이"];
  return (
    <div className="App">
      <h1>state로 스타일 변경하기</h1>
      {data.map((el, i) => {
        return <Input el={el} i={i} />;
      })}
    </div>
  );
}

2. styles.css(스타일)

/* 상태에 따라 추가될 스타일 */
.Line {
  text-decoration: line-through;
}

3. Input.js(자식 컴포넌트)

<Input.js>
import { useState } from "react";

const Input = ({ el }) => {
  // state 만들기
  // 버튼에 연결된 함수 만들기
  const [check, isCheck] = useState(false);
  const setting = () => {
    isCheck(!check);
  };

  return (
    <div>
      <input type="checkbox" onChange={setting} />
      <span className={check ? "Line" : ""}>{el}</span>
    </div>
  );
};

export default Input;

단순화 해서 정리해보니 훨씬 보기에 좋구나 :-)