선택 된 버튼 '1개'만 스타일 변경

오늘 한 것

• map으로 생성한 여러 개의 버튼 컴포넌트 중
  클릭 된 것 한 개만 배경색이 변경되도록 하는 것.

접근법

• 클릭 된 것 == focus 된 것 으로 생각하여
  버튼 component에 props를 주고
  focus 시 배경색이 props의 색으로 변경하도록 하였다.

1. state를 하나 만든다

• 이 state는 styled-component의 props로 가게 되는 것

  const [color, setColor] = useState(false);

2. 원하는 컴포넌트에 props로 전달

• color state에 따라 다른 값을 갖는 props $bg를 전달한다.

 <FilterBtn
  // $bg: color state가 true면 'skyblue' 아니면 "white"
  $bg={color ? "skyblue" : "white"} 
  key={i}
  >{el}
 </FilterBtn>

3. click 시 color state를 변경

// function
// CSS의 focus를 사용할 것이기 때문에 toggle로 만들지 않았다
const changeBg = () => setColor(true); 

<FilterBtn
  onClick = {() => changeBg()}
  // $bg: color state가 true면 'skyblue' 아니면 "white"
  $bg={color ? "skyblue" : "white"} 
  key={i}
  >{el}
 </FilterBtn>

4. styled-component에 :focus 속성 추가 후 props 적용

const FilterBtn = styled.button`
  &:focus { 								   // focus가 되면
    background-color: ${(props) => props.$bg}; // props로 전달 된 색으로 배경색을 변경
  }

  &:hover {
    background-color: #1369b5;
    color: white;
  }
`;

작동 요약

1. color 라는 state는 Boolean 값이고 초기값은 false다.

2. 버튼 컴포넌트는 $bg라는 props를 갖는데
   이 props는 color가 true면 'skyblue 값`을,
   color가 false면 'white' 값을 갖는다.

3. 모든 버튼 컴포넌트는 클릭 시
   color state를 true로 변경한다.

   이렇게 되면 모든 버튼 컴포넌트의
   배경색이 skyblue가 되는 것이 맞지만

4. 버튼 컴포넌트에 적용한:focus 선택자로 인해
   focus(클릭)가 된 버튼의 배경색만 'skyblue'로 변한다.

느낀점

• :focus 를 알아서 다행이다.
  처음엔 하나의 state를 가진 여러 개의 컴포넌트를
  어떻게 개별적으로 다루나.. state를 컴포넌트 갯수만큼
  배열로 만들어야 하나.. 고민을 많이 했는데
  :focus 가 순간 떠올라서 무사히 기능을 구현했다.