React(54) 타입스크립트 - 버튼 클릭시 버튼 색상 변경하기

리액트로 메뉴 버튼들을 만드는 중이다. 버튼을 클릭하면 클릭한 버튼의 색이 변하게 만들고 싶다.

자 그럼 지금 만들러 가보자.

 

결과 화면 미리보기

[메뉴 1] 을 클릭하면 그 버튼이 파란색이 되고, [메뉴 2]를 클릭하면 마찬가지로 해당 버튼의 색이 변한다.

 

 

---

 

React(54) 타입스크립트 - 메뉴 버튼 클릭시 버튼 색상 변경하기

 

먼저 useState 를 이용하여 버튼의 색상을 변경해볼 것이다. 

토글 버튼일 때는 boolean값을 주어서 스위치처럼 이용했었지만,

메뉴 버튼은 스위치 개념이 아니라 boolean 대신 분기를 쳐줄 string 값을 넣어 줄 것이다. 

 

 

TabComponent.tsx

const [tab, setTab] = useState<string>('curr');

 

 <div
   className={`btn ${tab === 'curr' ? 'active' : ''}`}  // tab 값이 'curr' 이면 active 클래스를 추가
   onClick={() => setDealTab('curr')} 			// 클릭했을 때 tab 값이 'curr'로 변경된다. 
 >
   메뉴 1
 </div>
 <div
   className={`-btn ${tab === 'prev' ? 'active' : ''}`}  // tab 값이 'prev' 이면 active 클래스를 추가
   onClick={() => setDealTab('prev')}			 // 클릭했을 때 tab 값이 'prev'로 변경된다. 
 >
  메뉴 2
 </div>

 

CSS

.btn {
  background-color: #fff;
  border: 1px solid #dbdee2;
  color: #404a5c;
}
.btn.active {
  background-color: #505bf0;
  color: #fff;
}