닥터마틴, 기억하고 싶은 코드 2 - 버튼 클릭 시 상태 변화

2일에 걸쳐 고민했지만 구조파악도 못했던 사이즈 버튼에 대해 기록하고자 한다. 사이즈 정보를 fetch로 받고, 버튼의 상태변화를 구현했다. 버튼 전체의 변화는 쉽게 구현했지만, 버튼 하나하나의 변화를 주는 것이 어렵게 느껴졌다.

내가 생각한 버튼 상태변화 구조

❓ 고민++

처음에 작성했던 코드👾
정답도 아니고 아주 간단하지만, 구글링과 질문없이 내 머리에서 처음 나온 코드라 기록한다. 나의 의도와 다르게 클릭과 색상변경이 버튼 전체에 적용되었다.

 const [sizeColor, setsizeColor] = useState('white');

 const sizeBtnColorChange = idx => {
    sizeColor === 'white' ? setsizeColor('black') : setsizeColor('white');
  };

💡 해결 방법

// 자식 컴포넌트에서 state로 관리
const [selectedSize, setSelectedSize] = useState();
// selectedSize 클릭된 버튼의 인덱스, 
// 배열은 0부터 시작하기 때문에 공란 혹은 마이너스 부터 시작 (공란 & - 상관없는 값) 모두 가능

const handleSelectedSize = event => {
  event.preventDefault();
  const buttonIndex = Number(event.target.getAttribute('name'));
  buttonIndex === selectedSize
    ? setSelectedSize(-1)
    : setSelectedSize(buttonIndex);
};


// name속성에 인덱스 idx를 받아주는 것이 핵심, 
// `${}` 백틱 쓰는거 꼭 공부해서 정리해놓기 그냥 어디서든 맨날 쓴다
<div className="centerSizeDetail">
    {detailData.centerSize &&
      detailData.centerSize.map((sizeItem, idx) => {
        return (
          <button
            key={idx}
            name={idx}
            className={`centerSize ${selectedSize === idx ? 'active' : '' }`}>
            <p name={idx} onClick={handleSelectedSize}>
              {sizeItem.size}
            </p>
          </button>
        );
      })}
  </div>

남은 학습

`${}` 요녀석 아직도 헷갈린다. MDN만 백번 본다고 이해되지 않는 내 머리가 안타깝지만, 이해가 안되면 될때까지 계속 써보고 실패하고 다시 공부하면 된다. 😵‍💫