TIL50-02 리액트, css 버튼 클릭 후 버튼 액션 유지하기

버튼 클릭 후 볼드 상태가 유지 되게 하기

const SortButton = styled.button`
  margin-left: 8px;
  font-size: 14px;
  color: rgb(153, 153, 153);
  background-color: transparent;
  text-decoration: none;
  border: none;
  cursor: pointer;

  &:active,
  &:focus,
  &.active {
    color: #000;
    font-weight: bold;
  }
`;

• 위 코드에서는 &.active CSS 선택자를 추가하여 클릭한 상태를 나타내는 .active 클래스를 적용합니다. 이 클래스를 JavaScript 코드에서 추가해주면 됩니다.

• 예를 들어, React에서는 다음과 같이 useState 훅을 사용하여 버튼의 클릭 상태를 관리할 수 있습니다:

import React, { useState } from 'react';

function Example() {
  const [isActive, setIsActive] = useState(false);

  function handleClick() {
    setIsActive(!isActive);
  }

  return (
    <SortButton
      className={isActive ? 'active' : ''}
      onClick={handleClick}
    >
      Sort
    </SortButton>
  );
}

• 위 코드에서는 useState 훅을 사용하여 isActive 상태 변수와 setIsActive 함수를 정의합니다. 버튼이 클릭될 때 handleClick 함수가 호출되어 isActive 변수의 값을 반전시키고, className prop을 통해 버튼의 클래스를 동적으로 변경합니다. 버튼이 클릭된 상태에서는 active 클래스가 적용되어 진해짐이 유지됩니다.