[React] 클릭한 <Button> 색상 변경하기

프로젝트를 진행하면서 버튼을 클릭하면 해당 버튼의 색상을 변경하고 싶었다.

클릭한 "이름 순" 버튼 색상이 변경된 것을 확인할 수 있다.

 

 

 

 

728x90

useState와 onClick 이벤트를 사용하면 아주 쉽게 원하는 동작을 구현할 수 있다. 

나는 참고로 tailwind-css를 사용하고 있다. 

 

작성된 코드를 보는게 이해하기 쉬워 밑에 코드를 참고하는 것이 좋다. 

import { useState } from 'react';

function Button({ name, className }) {
  const [clicked, setClicked] = useState(false);
  const onClick = () => setClicked(!clicked);

  return (
    <div
      className={`${clicked
        ? 'border-deepGreen bg-deepGreen/10 text-deepGreen font-semibold'
        : 'bg-lightGray/5'
      }`}
      onClick={() => onClick()}
    >
      {name}
    </div>
  );
}

export default Button;

useState를 사용하여 버튼이 클릭되었는지를 알기 위한 clicked 상태를 생성하고, 버튼에 onClick 이벤트를 줬다.

onClick 함수는 클릭됐을 때 상태를 false에서 true로 변경해주도록 했다. 

 

그럼 clicked state에 true 또는 false가 계속 반전되며 값이 담기게 된다.(클릭할 때마다 state 값 변경) 이 state를 사용해 className, 즉 CSS를 변경해주면 된다. 

 

 

 

원래 위 글까지 포스팅을 완료했었는데,  문제점을 발견했다! 

바로 모든 버튼들을 클릭할 수 있다는 것이였다.

나는 저 많은 버튼들 중에 클릭한 버튼의 색상만 변경 + 1개의 버튼만 선택되게끔 하고 싶었던 것이였는데..

반응형

이를 해결하기 위한 코드는 아래와 같다. 

interface IButton {
  name: string;
  className?: string;
  onClick?: any;
  clicked?: boolean;
}

function Button({ name, className, onClick, clicked }: IButton) {
  return (
    <div
      className={`flex w-[81px] h-[36px] mr-[1%] pb-[1px] items-center justify-center cursor-pointer text-[14px] border-[2px] rounded-[80px] border-lightGray 
      ${className} ${
        clicked ? 'border-deepGreen bg-deepGreen/10 text-deepGreen font-semibold' : 'bg-lightGray/5'
      }`}
      onClick={onClick}
    >
      {name}
    </div>
  );
}
export default Button;

먼저 위에서 작성했던 Button 컴포넌트가 직접 onClick 이벤트를 핸들링하지 않도록 했다. onClick 이벤트는 props로 받아서 사용해야 1개의 버튼만 선택할 수 있기 때문이다. 

 

Button 컴포넌트를 사용하여 return 하는 코드는 아래와 같다. 

function Buttons() {
  const [clicked, setClicked] = useState('');
  const changeTag = (name: string) => {
    setClicked(name);
  };
  const buttonsNameList = ['최신 순', '이름 순', '좋아요 순', '북마크 순'];

  return (
    <div className="flex">
      <Button
        name={buttonsNameList[0]}
        onClick={() => changeTag(buttonsNameList[0])}
        clicked={clicked === buttonsNameList[0]}
      />
      <Button
        name={buttonsNameList[1]}
        onClick={() => changeTag(buttonsNameList[1])}
        clicked={clicked === buttonsNameList[1]}
      />
      <Button
        name={buttonsNameList[2]}
        onClick={() => changeTag(buttonsNameList[2])}
        clicked={clicked === buttonsNameList[2]}
      />
      <Button
        name={buttonsNameList[3]}
        onClick={() => changeTag(buttonsNameList[3])}
        clicked={clicked === buttonsNameList[3]}
      />
    </div>
  );
}

export default Buttons;

 

 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖