[react] onClick에 여러개 useState 사용하기

완성된 모습

 

React를 이용하여 프론트엔드 화면을 구성하고 있었다.

여러 개의 메뉴를 아코디언처럼 만들고 싶었다.

 

쉽지 않았다.  

[문제]

1. 한꺼번에 3개의 메뉴가 모두 펼쳐지고 닫힌다. 

2. 한번 클릭한 메뉴를 닫아야 다음 메뉴를 열 수 있다.

 

정말 오류도 많이 나고,  또 오류가 안 나서 어디가 문제인지 알 수 없던 순간이었다.

약 이틀간 고민했고, 결론은 간단했다.

항상 결론은 간단하다.

 

내가 사용한 코드는 

1. 3개 메뉴에 대한 useState를 만든다

const [active, setActive] = useState(true);         

                                          >> 페이지 첫 화면에서는 [전체]카테고리 item이 보여야하기에 초기값을 true로 한다.

  const [activeBrand, setActiveBrand] = useState(false);

  const [activeBeauty, setActiveBeauty] = useState(false);

2. button에 onClick 함수를 적용한다.

이때에 각 state는 &&이 아닌 +를 사용한다.

**나는 &&를 계속 사용해서 too many render 등의 오류도 났었다.. 진짜 간단한거였는데 생각하기 어려웠다 :(

<button

 onClick={() => setActive(true) + setActiveBrand(false) + setActiveBeauty(false)}

>전 체</button>

<button

onClick={() => setActivefalse) + setActiveBrand(true) + setActiveBeauty(false)}

>브랜드</button>

button

onClick={() => setActivefalse) + setActiveBrand(false) + setActiveBeauty(true)}

>뷰 티</button>

// 펼쳐지는 item의 코드는 아래와 같이 사용했다

<div className="item">

          {/* total */}

          {active && <ul className="list_wrap mt-2 grid grid-cols-2 gap-4 md:grid-cols-4">{totalList} </ul>}

          {/* brand */}

           {activeBrand<ul className="list_wrap mt-2 grid grid-cols-2 gap-4 md:grid-cols-4">{totalList} </ul>}

          {/* beauty */}

         {activeBeauty<ul className="list_wrap mt-2 grid grid-cols-2 gap-4 md:grid-cols-4">{totalList} </ul>}

</div>

누군가에겐 쉽고 더 간편한 방법이 있을 테지만,

나 스스로 해결한 문제이니만큼 많이 뿌듯했다 :)