리액트 버튼 클릭 시 색상 변경

지금 진행 중인 점프잇 클론프로젝트 진행 중 내가 맡은 파트는 '직무탐색'페이지다.

채용사이트를 클론하는 프로젝트이니만큼 카테고리 필터기능이 핵심이라고 생각해서 냉큼 이 파트를 담당한다고 하고...

코딩을 하면서 생각보다 힘들다라는 생각은 들지만 하나하나 코드를 완성해가며 느끼는 성취감은 정말 대단하다

오늘도 카테고리 버튼 활성화 시 해당 카테고리에 포함된 기술스택이 활성화되고,

반대로 카테고리 버튼 비활성 시 기술스택도 비활성되는 로직을 완성하냐고 16시간 가까이 걸렸다...흑...

16시간 대장정의 마침표를 찍고자 블로그를 작성한다

 

 

리액트 버튼 클릭 시 버튼 색상 변경 (활성화)

<section className="cateContainer">
            <div className="cateBtn">
              <button
                className={btnActive.length > 0 ? '' : ' active'}
                onClick={handleTechOff}
              >
                전체
              </button>

              {cateData.map((item, idx) => {
                return (
                  <button
                    type="button"
                    key={item.id}
                    value={idx}
                    className={
                      item.className +
                      (btnActive.filter(el => el == idx).length > 0
                        ? ' active'
                        : '')
                    }
                    onClick={toggleActive}
                  >
                    {item.text}
                  </button>
                );
              })}
            </div>
          </section>

<button> 클래스네임에 'active'라고 조건부로 붙여주는 코드가 보일것이다.

조건에 따라 active가 네임에 붙으면 css를 통해 버튼의 스타일을 바꿔 마치 버튼이 활성화된것처럼 보이게하는 방법이다

 

 

.cateBtn button {
        margin: 0 10px 10px 0;
        border: 1px rgb(228, 228, 228) solid;
        padding: 3px 16px;
        color: rgb(68, 68, 68);
        font-size: 16px;
        line-height: 32px;
        background-color: rgba(0, 0, 0, 0);
        cursor: pointer;
        text-align: center;
        border-radius: 20px;

        &.active {
          background-color: rgb(0, 221, 109);
          color: rgb(255, 255, 255);
          border: 1px rgb(0, 221, 109) solid;
          font-weight: 700;
        }
      }

&.active  <-- 이 부분으로 버튼 활성화효과를 준다

즉, 조건이 만족되지 못한 (나는 버튼 클릭(onClick속성)으로 조건부를 줬다) 버튼은 .cateBtn button {} 위쪽부분의 스타일링을 받고

조건이 만족된 버튼은 &.active 로 추가적인 css코드로 마치 활성화된것같은 효과를 주었다