버튼색상 변경

토이 프로젝트 중에 

한분이 나에게 물어보았다. 

 

어떤 버튼을 눌렀을떄 

그 버튼만 검은색이고 나머지는 회색으로 바꾸고 싶다고 

 

useState만 쓰면 되는 간단한거 였는데 

컴터를 너무 많이 해서 머리가 안돌아갔다

그분한테 자고 일어나서 내일 알려드린다고 했는데 

 

그분이 나가자마자 아차 싶으면서 머리가 돌았다. 

그냥 state값만 바꿔주면되는거...

 

// src/App.js

import React from "react";
import { useState } from "react";

const App = () => {
  const [all, setAll] = useState(true);
  const [공연, set공연] = useState(false);
  const [국악, set국악] = useState(false);
  const [콘서트, set콘서트] = useState(false);

  return (
    <div>
      <button
        onClick={() => {
          setAll(true);
          set공연(false);
          set국악(false);
          set콘서트(false);
        }}
        style={{ color: all === true ? "black" : "gray" }}
      >
        All
      </button>
      <button
        onClick={() => {
          setAll(false);
          set공연(true);
          set국악(false);
          set콘서트(false);
        }}
        style={{ color: 공연 === true ? "black" : "gray" }}
      >
        공연
      </button>
      <button
        onClick={() => {
          setAll(false);
          set공연(false);
          set국악(true);
          set콘서트(false);
        }}
        style={{ color: 국악 === true ? "black" : "gray" }}
      >
        국악
      </button>
      <button
        onClick={() => {
          setAll(false);
          set공연(false);
          set국악(false);
          set콘서트(true);
        }}
        style={{ color: 콘서트 === true ? "black" : "gray" }}
      >
        콘서트
      </button>

    </div>
  );
};

 

디폴트 값을 All로 주기위해 All 만  트루 값을 주었다.

 

이렇게 간단한걸... 하 .. 당시엔 왜 그렇게 복잡하게 생각했을까?