React 버튼 클릭상태 만들기

버튼이나 리스트가 여러개있을경우, 선택한 버튼만 상태를 바꿔주고 표시를 해보았다

방법 1

그냥 단순하게 메뉴 상태를 직접 바꿔주었다.

const [menu, setMenu] = useState([true,false,false,false])
	<ul className="menu">
       <li
        className={menu[0]?"menu__list--active" : "menu__list"}
        onClick={() => {
          setMenu([true,false,false,false]);
        }}
      >
        전체보기
      </li>       
      <li
        className={menu[1]?"menu__list--active" : "menu__list"}
        onClick={() => {
          setMenu([false,true,false,false]);
        }}
      >
        신청중
      </li>       
      <li
        className={menu[2]?"menu__list--active" : "menu__list"}
        onClick={() => {
          setMenu([false,false,true,false]);
        }}
      >
        승인완료
      </li>       
      <li
        className={menu[3]?"menu__list--active" : "menu__list"}
        onClick={() => {
          setMenu([false,false,false,true]);
        }}
      >
        승인거절
      </li>
    </ul>

방법 2

방법1을 함수로 만들어 주었다.

const [click, setClick] = useState(0);

function changeClick(index){
	const newArr = Array(data.length).fill(false);
  	newArr[index] = true;
  	setClick(newArr);
}
<li className={click[index] ? "list__item--click": "list__item"}
    key={`admin-message-trader-${index}`}
    onClick={() => {changeClick(index);}}
> 전체보기</li>

방법3

class를 추가해서 사용하기

 function clickMenu(target: number) {
    const menus = document.getElementsByClassName(
      "menu__list"
    );
    const menu = document.getElementById(`menu-${target}`);
    const className = "active";

    for (let i = 0; i < menus.length; i++) {
      const check = new RegExp("(\\s|^)" + className + "(\\s|$)");
      if (menus[i]) {
        menus[i].className = menus[i].className.replace(check, " ").trim();
      }
    }

    const check = new RegExp("(\\s|^)" + className + "(\\s|$)");
    if (menu) {
      if (check.test(menu.className)) {
        return 0;
      } else {
        menu.className += " " + className;
      }
    }
  }

	<ul className="menu">
       <li
        className="menu__list"
        id="menu0"
        onClick={() => {
          clickMenu(0)
        }}
      >
        전체보기
      </li>       
      <li
        className="menu__list"
        id="menu1"
        onClick={() => {
          clickMenu(1)
        }}
      >
        신청중
      </li>       
      <li
        className="menu__list"
        id="menu2"
        onClick={() => {
          clickMenu(2)
        }}
      >
        승인완료
      </li>       
      <li
        className="menu__list"
        id="menu3"
        onClick={() => {
          clickMenu(3)
        }}
      >
        승인거절
      </li>
    </ul>