1차 시도

useState를 이용해 boolean 값으로 className를 적용하기

const [btnActive, setBtnActive] = useState(false);

(..중략..)

 categories.map((categoryBtn, categoryId)=>{
            return(
              <StCategory 
                className={ btnActive ? "active" : null }
                key={categoryId}
                onClick={()=> {
                  categoryHandler(categoryBtn.categoryId)
                  btnActiveHandler(categoryBtn.style)
                }}
              >
                <AiOutlinePlus/> {categoryBtn.value}
              </StCategory>
            )
}

하나의 버튼만 클릭해도 전체 버튼의 스타일이 변경됐다 🤯

2차 시도

categories.js

 {
    categoryId: "book", 
    value: "독서",
    style: false
 }
 
category.jsx

categories가 js로 만들어 놓은 리스트이므로 false 값을 임의로 추가해서 categoryBtn.style 값을 변경하는 함수를 만들었다.

value를 바꿀 순 있었지만 리랜더링이 일어나지 않아서 또 실패 🤯

3차 시도

  const isActive = (e) => {
    console.log('누른 버튼' + e.categoryId)
    categories.map((activeBtn, categoryId) => {
      return e.categoryId == activeBtn.categoryId ? !e.categoryId : e.categoryId 
    })
  }

함수 영역에서 map를 또 돌려서 시도 → 실패 🤯

4차 시도

 <StCategoryWrap>
        {
          categories.map((categoryBtn, categoryId)=>{
            return(
              <CategoryBtn categoryBtn={categoryBtn}/>
            )
          })
        }
      </StCategoryWrap>

CategoryBtn 컴포넌트를 따로 만들어서 useState가 각각 적용되도록 했다. 이렇게 했더니 버튼 스타일은 원하는 대로 변경할 수 있는데 하위 컴포넌트로 옮겨진 데이터를 처리하는 과정이 더욱 복잡해졌다....... → 보류 🤯

5차 시도

      <StCategoryWrap>
        {
          categories.map((categoryBtn, categoryId)=>{
            return(
              <CategoryBtn
                key={categoryId}
                categoryBtn={categoryBtn}
                userCategory={userCategory}
              />
            )
          })
        }
      </StCategoryWrap>

4차 시도에서 key값을 추가로 지정하고, 최상위 컴포넌트에서 관리하는 userCategory를 내려줘서 저장될 수 있도록 했다 → 성고옹 😍

이제 두 번 눌렀을 때 리스트에서 빼는 로직 추가하러 간다..( ﾟдﾟ)つ Bye