리액트 하트 useState로 구현하기

김효성·2022년 9월 6일
0

React 공부일지

목록 보기
2/9

useState 와 삼항연산자를 사용해서 하트 구현

useState 와 삼항연산자가 뭔지는 알겠는데 막상 구현하려고 하면 헷갈려서 기록에 남긴다.

코드작성에 앞서 어떻게 구현할것인지 생각해보자.

  1. 빈 하트를 만든다.
  2. 빈 하트 클릭시 빨간 하트로 바뀐다.
  3. 빨간 하트 클릭시 빈 하트로 바뀐다.
<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와 삼항연산자를 사용하면 쉬운 코드임에도 불구하고 아직 익숙하지가 않다.

원리가 익숙해질때까지 외워야겟다 허허;;

profile
인생은 단방향 디자인 패턴 🏃

0개의 댓글