버튼 클릭 시, class 추가하는 방법
먼저, 예제로 버튼이 있는 actionBar를 생성합니다.
<div className={cx('actionBar')}>
<ul>
<li>
<div className={cx('favoriteButton')}>
<span className={cx('glyphicon glyphicon-heart')}></span> 좋아요
</div>
</li>
</ul>
</div>위의 코드에서는 favoriteButton이라는 class 이름을 가진 div가 heart 아이콘과 좋아요 value를 감싸고 있습니다.
.actionBar {
height: 30px;
width: 100px;
margin-top: 18px;
.favoriteButton {
color: #AAAAAA;
display: flex;
align-items: center;
padding-right: 7px;
font-size: 15px;
.glyphicon-heart {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ef47b6;
border: 1px solid #ef47b6;
color: #fff;
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
}
}
}CSS는 참고용으로 봐주세요. ‘glyphicon glyphicon-heart’는 bootstrap icon입니다.
그림으로 보시면, 아래와 같습니다.
이제 FavoriteButton 버튼을 클릭했을 때, 분홍색이던 버튼이 회색으로 변하게 만들 것입니다.
결국은 “glyphicon glyphicon-hear” class 이름을 가지고 있는 background color를 변경하는 것입니다. 그렇기 때문에 DOM에 직접적으로 접근해야합니다.
import React, { useRef } from "react";
const Favorites = () => {
const favoriteBtn = useRef(null);
return (
<>
...
<span className={cx('glyphicon glyphicon-heart')} ref={favoriteBtn}></span>
...
</>
);
}React hooks 컴포넌트로, useRef를 사용하여 선언했습니다.
이제 onClick 이벤트를 발생시키는 함수를 선언할 것입니다.
icon과 ‘좋아요’를 감싸고 있는 div 영역을 클릭할 때, 이벤트가 발생되게끔 하는 것이기 때문에, 아래와 같이 추가합니다.
import React, { useRef } from "react";
const Favorites = () => {
const favoriteBtn = useRef(null);
const onFavoriteToggle = () => {
favoriteBtn.current.style.backgroundColor = '#959595';
favoriteBtn.current.style.border = '#959595';
}
return (
<>
...
<div classNmae={cx('favoriteButton')} onClick={() => {onFavoriteToggle();}}>
<span className={cx('glyphicon glyphicon-heart')} ref={favoriteBtn}></span> 좋아요
</div>
...
</>
);
}하트 icon이나 좋아요를 누르게 된다면, onFavoriteToggle 함수가 실행되면서 backgroundColor가 회색으로 변경되는 코드가 실행됩니다.
