TIL _ 클릭할 때 마다 올라가는 좋아요 숫자(useState 활용)

❓ 문제

• '좋아요' 옆에 하트 버튼을 클릭할 때 마다 클릭한 횟수가 옆에 뜨게 하는 기능 구현

function Likes () {
  return(
    <div>
      <h2> 좋아요
        <span> ❤️ </span> 0
      </h2>
    </div>
  );
}
// 좋아요 ❤️ 0

1. 해결 방안

• 사고 과정

🔓 (문제 파악) '클릭'이라는 이벤트가 발생할 때 문서를 조작한다.
🔑 (해결 방안) ❤️ 가 들어간 span 태그에 onClick 이벤트를 적용한다.

function Likes () {
  return(
    <div>
      <h2> 좋아요
        <span
    	  onClick = {/*클릭 이벤트 발생 시 실행 될 함수*/}
    	> ❤️ </span> 0
      </h2>
    </div>
  );
}
// 좋아요 ❤️ 0

🔓 (문제 파악) 클릭 횟수를 나타낼 숫자 0을 조작하여, 클릭할 때마다 1씩 증가해야 한다.
🔑 (해결 방안)

1. useState를 활용하여 숫자에 state를 부여하고, 최초의 state를 0으로 할당한다.
2. 클릭 할 때 마다 state 값이 1 씩 증가하도록 state를 변경할 함수를 작성한다.

구조 분해 할당 (Destructuring)

• 배열 또는 객체를 분해하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

let a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

useState

• state를 관리하기 위한 React Hook
• 구조 분해 할당을 통해 state 변수와 state를 갱신시킬 수 있는 함수를 쌍으로 반환
• { useState }를 react로 부터 import 해주어야 사용 가능

const [state, setState] = useState(initialState);
// const [state 값이 저장되는 변수, state를 변경하는 함수] = useState(최초의 state 값);

import React, { useState } from 'react';

function Likes () {
  const [likes, addLikes] = useState(0); // 최초의 state를 0으로 할당
  return(
    <div>
      <h2> 좋아요
        <span
    	  onClick = {()=> 
	    addLikes(likes + 1) // likes라는 state에 1을 추가하는 함수 작성
	  }
    	> ❤️ </span> { likes }
      </h2>
    </div>
  );
}

2. 결과

• 하트를 클릭할 때 마다 숫자가 증가하는 것을 확인

• 참고자료
  • React State Hook 사용하기, https://ko.reactjs.org/docs/hooks-state.html
  • 코딩애플 React 기초 4강, https://www.youtube.com/watch?v=Br9fKSIeAok&t=303s

"작성 내용 중 오류나 오타가 있다면, 댓글로 알려주시면 감사하겠습니다. 주니어 개발자에게 남겨주시는 작은 피드백이 큰 도움이 될 것 같습니다. 고맙습니다 :)"