반응: 5분 만에 사용자 지정 버튼 그룹 구성 요소를 만드는 방법

my personal blog에 원래 게시됨

버튼은 99.9%의 웹 앱에서 사용됩니다. 또한 매우 자주 개발자는 앱에 버튼 그룹을 추가해야 합니다. 버튼 그룹 구성 요소는 여러 관련 버튼을 결합합니다.

널리 사용되는 이 구성 요소를 선택(활성 버튼) 기능으로 빌드해 보겠습니다.

앱의 Render Button 그룹 구성요소

버튼 그룹 구성 요소에 대한 새 파일을 만듭니다.

ButtonGroup.js

import React from "react";

const ButtonGroup = () => {
  return (
    <>
      <button>One</button>
      <button>Two</button>
      <button>Three</button>
    </>
  );
};

export default ButtonGroup;

그런 다음 기본 앱 진입점 내부에서 렌더링합니다.

App.js

import React from "react";
import "./App.css";
import ButtonGroup from "./ButtonGroup";

const App = () => {
  return (
    <div className="App">
      <ButtonGroup />
    </div>
  );
};

export default App;

그것이 지금까지의 모습입니다.

동적으로 버튼 추가

이제 버튼이 그렇게 하드 코딩되지 않도록 코드를 리팩터링합니다.

ButtonGroup.js

const ButtonGroup = ({ buttons }) => {
  return (
    <>
      {buttons.map((buttonLabel, i) => (
        <button key={i} name={buttonLabel}>
          {buttonLabel}
        </button>
      ))}
    </>
  );
};

App.js

const App = () => {
  return (
    <div className="App">
      <ButtonGroup buttons={["One", "Two", "Three"]} />
    </div>
  );
};

그래서 여기서 우리는:

버튼 레이블이 있는 문자열 배열 생성

ButtonGroup 구성 요소에 소품으로 전달됨

은 map method을 사용하여 배열 및 렌더링 버튼을 반복 실행했습니다

.

활성 버튼

일반적으로 사용자가 버튼 그룹의 버튼을 클릭할 때:

이 버튼은 어떻게든 강조 표시되어야 합니다. 스타일은 다른 버튼과 달라야 합니다.

일부 콘텐츠를 렌더링하거나 다른 페이지로 이동하는 등의 작업이 발생해야 합니다.

우선 활성 버튼의 인덱스를 추적해야 합니다. 이를 위해 useState 후크를 사용할 것입니다. clickedId 변수의 초기 값은 -1로 설정되어 있으므로 처음 렌더링할 때 모든 버튼이 선택되지 않습니다. 그러나 버튼을 클릭하면 해당 인덱스가 상태에 저장됩니다.

ButtonGroup.js

import React, { useState } from "react";

const ButtonGroup = ({ buttons }) => {
  const [clickedId, setClickedId] = useState(-1);
  return (
    <>
      {buttons.map((buttonLabel, i) => (
        <button key={i} name={buttonLabel} onClick={() => setClickedId(i)}>
          {buttonLabel}
        </button>
      ))}
    </>
  );
};

활성 버튼을 강조 표시하려면 CSS 클래스(실제로 두 개의 클래스: 기본 버튼과 선택된 버튼용)를 만듭니다.

버튼 그룹.css

.customButton {
    width: 150px;
    height: 50px;
    letter-spacing: 0.5px;
    background-color: #E0314B;
    color: white;
    font-size: 32px;
    border: 1.5px solid #E0314B;
    border-radius: 5px;
    cursor: pointer;
    }

.active{
    background-color: rgb(25, 26, 24);
    border: 1.5px solid rgb(25, 26, 24);
    }

그런 다음 이 버튼이 선택되었는지 여부에 관계없이 버튼의 className을 정의합니다.

ButtonGroup.js

import React, { useState } from "react";
import "./button-group.css";

const ButtonGroup = ({ buttons }) => {
  const [clickedId, setClickedId] = useState(-1);
  return (
    <>
      {buttons.map((buttonLabel, i) => (
        <button
          key={i}
          name={buttonLabel}
          onClick={() => setClickedId(i)}
          className={i === clickedId ? "customButton active" : "customButton"}
        >
          {buttonLabel}
        </button>
      ))}
    </>
  );
};

그리고 "doSomethingAfterClick()"함수만 추가할 수 있습니다. 이 함수를 ButtonGroup 구성 요소(자식)에 소품으로 전달하고 App.js 파일(상위)을 클릭한 후 해야 할 작업을 수행합니다.

ButtonGroup.js

import React, { useState } from "react";
import "./button-group.css";

const ButtonGroup = ({ buttons, doSomethingAfterClick }) => {
  const [clickedId, setClickedId] = useState(-1);

  const handleClick = (event, id) => {
    setClickedId(id);
    doSomethingAfterClick(event);
  };

  return (
    <>
      {buttons.map((buttonLabel, i) => (
        <button
          key={i}
          name={buttonLabel}
          onClick={(event) => handleClick(event, i)}
          className={i === clickedId ? "customButton active" : "customButton"}
        >
          {buttonLabel}
        </button>
      ))}
    </>
  );
};

export default ButtonGroup;

App.js

import React from "react";
import "./App.css";
import ButtonGroup from "./ButtonGroup";

const App = () => {
  const printButtonLabel = (event) => {
    console.log(event.target.name);
    //do some stuff here
  };
  return (
    <div className="App">
      <ButtonGroup
        buttons={["One", "Two", "Three"]}
        doSomethingAfterClick={printButtonLabel}
      />
    </div>
  );
};

export default App;

이 자습서에서는 버튼을 클릭한 후 콘솔에 레이블을 인쇄합니다. 물론 실제 애플리케이션에서는 API 요청, 콘텐츠 업데이트 등을 수행합니다.

최종 데모:

결론

방향(세로 또는 가로) 및 사용자 정의 스타일과 같은 추가 기능이 포함된 이 ButtonGroup 사용자 정의 React 구성 요소는 NPM package 로 사용할 수 있습니다.