리액트 useState를 이용하여 글자 색상 변경하기

 

www.codingfactory.net/10283

JavaScript / Object / Element.getAttribute() / 요소의 속성 값을 가져오는 메서드

 

참고한 사이트

JavaScript / Object / Element.getAttribute() / 요소의 속성 값을 가져오는 메서드

 

 

 

나의 코드

import React, { useState } from "react";

const Say = () => {
  const [message, setMessage] = useState("");
  const [color, setColor] = useState({ color: "black" });

  const onClickEnter = () => setMessage("Enter");
  const onClickLeave = () => setMessage("Leave");

  // 구글 검색 - javascript event.target css 속성
  // JavaScript / Object / Element.getAttribute() / 요소의 속성 값을 ...
  // https://www.codingfactory.net/10283

  const handleClick = (event) => {
    const getStyleAttr = event.target.getAttribute("style");
    const message = document.getElementById("message");

    console.log("getStyleAttr", getStyleAttr);

    let sliceColor = getStyleAttr.split(";");

    console.log("sliceColor", sliceColor);

    console.log("컬러", color);
    console.log("슬라이스컬러[0]", sliceColor[0]);

    sliceColor = sliceColor[0].split(":");

    console.log('":"로 자른 sliceColor', sliceColor);

    console.log("message", message.getAttribute("style"));

    const messageColor = message.getAttribute("style");

    if (messageColor === getStyleAttr) {
      setColor({ color: "black" });
    } else {
      setColor({ color: sliceColor[1] });
    }
  };

  return (
    <div>
      <h1>Say</h1>
      <h2 id="message" style={color}>
        {message}
      </h2>
      <button onClick={onClickEnter}>클릭</button>
      <button onClick={onClickLeave}>퇴장</button>

      <button onClick={handleClick} style={{ color: "red" }}>
        빨간색
      </button>
      <button onClick={handleClick} style={{ color: "green" }}>
        초록색
      </button>
      <button onClick={handleClick} style={{ color: "blue" }}>
        파란색
      </button>
      <button onClick={handleClick} style={{ color: "grey" }}>
        회색
      </button>
    </div>
  );
};

export default Say;