React에서 버튼 클릭하면 스타일 변경하기

버튼 클릭 하면 스타일 변경하기

버튼을 클릭할 때 배경색을 변경하고 싶나요? 웹 개발에서 흔한 요구사항이며, 운좋게도 이를 구현하는 여러 가지 방법이 있습니다.

상태를 사용하여 버튼 스타일 토글하기

React에서 상태(state)를 사용하여 버튼 스타일을 토글하는 방법 중 하나입니다. 다음은 예시입니다:

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      isClicked: false,
    };
  }

  handleClick = () => {
    this.setState((prevState) => ({
      isClicked: !prevState.isClicked,
    }));
  };

  render() {
    return (
      <button>
        Button
      </button>
    );
  }
}

이 예시에서는 isClicked라는 상태 변수를 정의하여 버튼이 클릭되었는지 여부를 나타냅니다. handleClick 함수에서 isClicked의 값을 토글하고 버튼의 className을 이에 따라 업데이트합니다. 그 후, “clicked” 클래스에 대한 CSS 스타일을 원하는 대로 변경할 수 있습니다.

버튼 클릭 이벤트와 대상 요소에 접근하기

만약 상태를 사용하지 않고 더 직접적인 방법을 선호한다면, 이벤트와 대상 요소에 접근하여 버튼의 스타일을 수정할 수 있습니다. 다음은 예시입니다:

function handleClick(event) {
  event.target.style.backgroundColor = "black";
}

function handleOtherClick(event) {
  event.target.style.backgroundColor = "white";
}

<button onClick={handleClick}>Black Button</button>
<button onClick={handleOtherClick}>White Button</button>

이 예시에서는 클릭 이벤트를 처리하는 별도의 함수를 정의합니다. 첫 번째 버튼이 클릭되면 handleClick 함수가 호출되어 버튼의 배경색을 검은색으로 변경합니다. 마찬가지로, 두 번째 버튼이 클릭되면 handleOtherClick 함수가 호출되어 버튼의 배경색을 흰색으로 변경합니다.

프레임워크별 솔루션 활용하기

React-Bootstrap과 같은 특정 프레임워크를 사용하는 경우, 내장된 컴포넌트와 기능을 활용하여 원하는 버튼 클릭 동작을 구현할 수 있습니다. 예를 들어, OverlayTrigger 컴포넌트를 사용하여 원하는 버튼 스타일의 오버레이를 만들 수 있습니다:

import React from 'react';
import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';

function MyButton() {
  const popover = (
    <Tooltip id="tooltip">Click Me</Tooltip>
  );
  
  return (
    <OverlayTrigger placement="right" overlay={popover}>
      <Button variant="primary">Button</Button>
    </OverlayTrigger>
  );
}

이 예시에서는 React-Bootstrap에서 제공하는 OverlayTrigger 컴포넌트를 사용하여 버튼과 오버레이를 만듭니다. 원하는 버튼 스타일을 클릭 시에 얻을 수 있도록 오버레이의 내용과 외관을 커스터마이즈할 수 있습니다.

결론

버튼을 클릭 시에 스타일을 변경하는 것은 다양한 방법으로 구현할 수 있습니다. React에서 상태를 사용하거나 직접 이벤트와 대상 요소에 접근하거나, 프레임워크별 솔루션을 활용하는 등의 방법을 선택할 수 있으며, 이를 통해 사용자의 상호작용에 따라 버튼의 배경색이나 다른 스타일을 쉽게 커스터마이즈할 수 있습니다. 이러한 방법들을 활용하여 시각적으로 매력적이고 상호작용적인 웹 애플리케이션 버튼을 만들어 보세요.

참고 자료 :

https://stackoverflow.com/questions/41978408/changing-style-of-a-button-on-click

같은 카테고리의 다른 글 보기 :

reactjs