useState 와 삼항연산자가 뭔지는 알겠는데 막상 구현하려고 하면 헷갈려서 기록에 남긴다.
코드작성에 앞서 어떻게 구현할것인지 생각해보자.
<button className="heart fa-regular fa-heart"> </button>
//1. 빈하트를 만든다
그리고 2번을 하기 위해서는 클릭했을때 이벤트를 줘야 하기 때문에 onClick이벤트를 주도록 한다.
<button onClick={()=>{}} className="heart fa-regular fa-heart"> </button>
이제 이벤트를 줄 준비는 끝났다.
그럼 이제 어떤 이벤트를 줄것인지 생각해보자.
useState를 사용하여
False 일 경우 'heart fa-regular fa-heart'
True 일 경우 'heart fa-solid fa-heart'
로 변경만 해주면 된다.
state부터 만들어보자.
const [changed, setChanged] = useState(false);
<button onClick={(e)=>{
setChanged(!changed)
// !changed 를 풀어쓰면 if(changed=false){changed=true} 즉 changed가 false이면 true로 바꾼다는 말
}} className={changed? "heart fa-solid fa-heart" : "heart fa-regular fa-heart"}> </button>
// 삼항연산자를 이용하여 changed가
// true 이면 "heart fa-solid fa-heart",
// false이면 "heart fa-regular fa-heart" 로 className을 바꿔준다.
useState와 삼항연산자를 사용하면 쉬운 코드임에도 불구하고 아직 익숙하지가 않다.
원리가 익숙해질때까지 외워야겟다 허허;;