TIL. icon click color

Today I learn

icon click => color change data request

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에 대한 함수, 클래스변환 등등 하나로 합쳐도 되는 일들을 두가지로 나눴고 하드코딩으로 작성했다. 내가 봐도 비효율적이기 때문에 하나의 함수에서 사용되도록 수정해야한다.