[React] 북마크 버튼 체크, 언체크 기능

Bookmark 버튼을 클릭하였을때 북마크가 체크되고 다시한번 눌렀을때 북마크가 해제되는 스타일링

이것을 하기 위해서는 삼항연산자와 북마크의 state를 저장할 useState를 사용한다

먼저 북마크 아이콘에대한 useState를 하고 그의 상태값을 false로 둔다

const [bookMarkIcon, setbookMarkIcon] = useState(false);

왜 북마크아이콘의 상태값을 false로 두냐면 나는 사이트가 켜졌을때 북마크가 체크가 되어있는 모습을 보면 안되기 때문이다 따라서 false값으로 두고

그리고

삼항연산자를 만들어

{bookMarkIcon === true ? (
              <북마크체크표시완료></북마크체크표시완료>
            ) : (
              <북마크체크표시미완료></북마크체크표시미완료>
            )}

이렇게 먼저 bookMarkIcon의 State값이 true면 북마크체크표시완료된 아이콘을 띄우고 false면 북마크체크표시미완료인 아이콘을 띄운다.

이것을 클릭했을때 적용 하고 싶으면

onClick={() => setbookMarkIcon(!bookmark)}

이렇게 onClick에다가 setbookMarkIcon이라는 스테이트변경함수를 넣는다 여기서 중요한 포인트는

바로 !bookmark를 해줘야한다 그냥 true로만 setbookMarkIcon(true)라고만 하면 딱 한번밖에 변경시킬 수 있다.

체크 언체크가 불가능 하다 그래서 !bookmark를 해주면 bookmark가 false면 true로 만들어주고 true면 다시 false로 만들어준다!

그러므로 check, uncheck이 계속 가능 하다!

잘못된점이나 더 나은 방향, 고쳐야할 부분이 있으시면 댓글로 알려주세요! 반영하겠습니다~