[React] 버튼클릭시 색상변경

선택상태함수 생성

기본상태는 null 로, 선택되지 않은 상태로 둔다.

    const [selectedIndex, setSelectedIndex] = useState(null);

동적 class명 추가, 선택 index추적

• 적용하고 싶은 button 클릭시 setSelectedIndex에 index를 적용하여 현재 내가 선택한 index를 추적한다.

• class명에 삼항연산자를 이용하여 선택한 index가 현재 index와 맞다면 active class명을 동적으로 추가한다.
  마지막으로, .active css설정을 하면끝!

  (나는 border-active, bgc-active)로 나누어서
  선의 색상 적용, 배경색 변경으로 사용할예정이다.

<div className="product-size">
   <p>사이즈</p>
       <ul className="sizes">
          {sizeData.map((item, index) => (
             <li
              className={`${selectedIndex === index ? 'border-active' : ''}`}
              onClick={() => setSelectedIndex(index)}>
              {item.size}
             </li>
              ))}
        </ul>
</div>