React(99) 버튼 클릭시 동적으로 테두리색 변경하기

 

작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다.

아주 심 - 플하게 동작하는 버튼 선택 기능이다 :) 

 

B를 눌렀을 때 테두리색이 변한다

 

버튼 인덱스를 저장할 상태 변수를 만들자

const [selectedIndex, setSelectedIndex] = useState<number>(0);

 

핵심은 클릭해서 저장된 selectedIndex 와  === 매핑된 index 가 같을 경우에만 active 클래스가 추가 된다는 점이다.

<div>
  {buttonItems.map((item, index) => (
    <div
      key={index}
      className={`${ // selectIndex 와 map 배열의 인덱스가 같은 것만 active 라는 클래스가 붙는다.
        selectedIndex === index ? 'active' : ''
      }`}
      onClick={() => setSelectedIndex(index)}
    >
      {item.title}
    </div>
   ))}
</div>