React에서 활성 클래스 추가

Oluwafisayo Oluwatayo 2023년6월21일

React React Class

React의 classNames 속성
React에서 버튼 classNames에 활성 추가
결론

React 프레임워크로 앱을 빌드할 때 하나의 classNames만 활성화되도록 합니다. classNames를 활성화하려고 하면 다른 classNames가 활성화됩니다.

이제 이 기사에서 이 상황을 해결하는 방법에 대해 논의할 것입니다.

React의 `classNames` 속성

CSS로 웹 페이지의 스타일을 지정하려는 경우 HTML에서 class를 참조로 사용하지만 React에서는 class라는 단어가 다른 기능을 위해 예약되어 있기 때문에 사용할 수 없습니다. 이것은 classNames이 React에서 클래스를 대체하는 데 유용하게 사용되는 곳입니다.

classNames는 classNames 버튼 예제에서 볼 수 있듯이 특정 구성 요소에 대한 특정 기능을 생성하려는 경우에 유용합니다.

초록색 버튼 그룹을 상상해 봅시다. 이 버튼을 클릭하지 않으면 녹색으로 유지되지만 버튼 하나를 클릭하면 빨간색으로 바뀌어 활성 상태임을 의미합니다.

이 자습서에서는 버튼에 활성 클래스를 추가하여 나머지 버튼이 파란색으로 바뀌지 않고 클릭한 버튼만 파란색으로 만드는 방법에 대해 설명합니다.

React에서 버튼 `classNames`에 활성 추가

npx create-react-app examplefour라는 새 웹 프로젝트를 생성하여 시작합니다. 그런 다음 app.js로 이동하여 다음 코드를 배치합니다.

코드 - App.js:

import React, { useState } from "react";
import styled from "styled-components";

const theme = {
  blue: {
    default: "#3f51b5",
    hover: "#283593"
  },
  pink: {
    default: "#e91e63",
    hover: "#ad1457"
  }
};

const Button = styled.button`
  background-color: ${(props) => theme[props.theme].default};
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  outline: 0;
  text-transform: uppercase;
  margin: 10px 0px;
  cursor: pointer;
  box-shadow: 0px 2px 2px lightgray;
  transition: ease background-color 250ms;
  &:hover {
    background-color: ${(props) => theme[props.theme].hover};
  }
  &:disabled {
    cursor: default;
    opacity: 0.7;
  }
`;

Button.defaultProps = {
  theme: "blue"
};

function clickMe() {
  alert("You clicked me!");
}

const ButtonToggle = styled(Button)`
  opacity: 0.7;
  ${({ active }) =>
    active &&
    `
    opacity: 1;
  `}
`;

const Tab = styled.button`
  padding: 10px 30px;
  cursor: pointer;
  opacity: 0.6;
  background: white;
  border: 0;
  outline: 0;
  border-bottom: 2px solid transparent;
  transition: ease border-bottom 250ms;
  ${({ active }) =>
    active &&
    `
    border-bottom: 2px solid black;
    opacity: 1;
  `}
`;
const types = ["Cash", "Credit Card", "Bitcoin"];

function ToggleGroup() {
  const [active, setActive] = useState(types[0]);
  return (
    <div>
      {types.map((type) => (
        <ButtonToggle active={active === type} onClick={() => setActive(type)}>
          {type}
        </ButtonToggle>
      ))}
    </div>
  );
}

export default function App() {
  return (
    <>
      <ToggleGroup />
    </>
  );

우리는 ToggleGroup 및 ButtonToggle 기능이라고 하는 클릭 시 활성화되는 버튼을 추적하기 위해 React 후크를 사용합니다. 그런 다음 onClick 이벤트 리스너 기능이 활성화된 상태에서 버튼 중 하나를 클릭하면 해당 버튼에 연결된 classNames만 활성화됩니다.

그런 다음 클릭한 버튼을 비활성 버튼과 구별하기 위해 몇 가지 스타일을 추가했습니다. 다음으로 다음 스니펫과 같이 index.js에서 약간의 코딩을 수행합니다.

코드 - index.js:

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

출력:

reactjs로 활성 클래스 추가

결론

나머지 버튼 중에서 하나의 버튼을 활성화하려는 사용자의 시도는 매우 완고한 작업이 될 수 있습니다. onClick 이벤트 리스너와 함께 ToggleGroup 기능을 적용하면 상황을 원활하게 해결할 수 있습니다.

작가: Oluwafisayo Oluwatayo

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

React의 classNames 속성

React에서 버튼 classNames에 활성 추가

결론

관련 문장 - React Class

React의 `classNames` 속성

React에서 버튼 `classNames`에 활성 추가