React - 리액트를 다루는 기술(3)

리액트를 다루는 기술 3탄 까지 와버렸네요...
이번편은 2탄에서 이어지는 편입니다.

한 컴포넌트에서 useState 여러 번 사용하기

useState는 한 컴포넌트에서 여러번 사용이 가능합니다.

import { useState } from "react";

const Say = () => {
  const [message, setMessage] = useState("");

  const onClickEnter = () => setMessage("안녕하세요!");
  const onClickLeave = () => setMessage("안녕히 가세요!");

  const [color, setColor] = useState("black");

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>

      <h1 style={{ color }}>{message}</h1>

      <button
        style={{ color: "red" }}
        onClick={() => {
          setColor("red");
        }}
      >
        빨간색
      </button>
      <button
        style={{ color: "blue" }}
        onClick={() => {
          setColor("blue");
        }}
      >
        파랑색
      </button>
      <button
        style={{ color: "yellow" }}
        onClick={() => {
          setColor("yellow");
        }}
      >
        노랑색
      </button>
      <button
        style={{ color: "pink" }}
        onClick={() => {
          setColor("pink");
        }}
      >
        핑크색
      </button>
    </div>
  );
};

export default Say;

해당 컴포넌트에는 state를 하나더 추가하여 message 의 색상을 변경해주는 이벤트를 추가하였다.
위 와 같이 한개의 useState를 선언하여 여러개의 button에 사용하였고 잘 작동되는것을 볼 수있다.

결과 화면