Today I learn
icon 을 클릭하면 특정 API 주소에 request하고 전달받은 값에 따라 icon의 색을 다르게 설정했다.
하지만 이 데이터 요청 또한 토큰 여부를 꼭 확인하기 때문에 로그인을 한 사용자만 아이콘 클릭시 데이터를 전송할 수 있다.
( 토큰 있는 경우 )
( 토큰 없는 경우 )
내가 작성한 코드 (wish만 블로그에 작성)
constructor() {
super();
this.state = {
wishBtn: 'Delete wish',
doneBtn: 'Delete done',
};
}
wishHandleClick = () => {
fetch(`${BASE_URL}/products/1/status/wish`, {
method: 'GET',
headers: {
Authorization: localStorage.getItem('token'),
},
})
.then(res => res.json())
.then(res =>
this.setState({
wishBtn: res.results,
})
);
};
// state값에 따라 active클래스를 주고 색이 변하도록 구현
<div className="wish">
<BsBookmarkPlus
name="wish"
className={
this.state.wishBtn === 'Create wish'
? `wishIcon activeWishIcon`
: `wishIcon`
}
onClick={this.wishHandleClick}
/>
</div>
수정해야하는 부분
현재 코드는 두개의 icon에 대한 함수, 클래스변환 등등 하나로 합쳐도 되는 일들을 두가지로 나눴고 하드코딩으로 작성했다. 내가 봐도 비효율적이기 때문에 하나의 함수에서 사용되도록 수정해야한다.