❓ 문제
- '좋아요' 옆에 하트 버튼을 클릭할 때 마다 클릭한 횟수가 옆에 뜨게 하는 기능 구현
function Likes () { return( <div> <h2> 좋아요 <span> ❤️ </span> 0 </h2> </div> ); } // 좋아요 ❤️ 0
🔓 (문제 파악) '클릭'이라는 이벤트가 발생할 때 문서를 조작한다.
🔑 (해결 방안) ❤️ 가 들어간 span
태그에 onClick
이벤트를 적용한다.
function Likes () {
return(
<div>
<h2> 좋아요
<span
onClick = {/*클릭 이벤트 발생 시 실행 될 함수*/}
> ❤️ </span> 0
</h2>
</div>
);
}
// 좋아요 ❤️ 0
🔓 (문제 파악) 클릭 횟수를 나타낼 숫자 0을 조작하여, 클릭할 때마다 1씩 증가해야 한다.
🔑 (해결 방안)
useState
를 활용하여 숫자에 state
를 부여하고, 최초의 state
를 0으로 할당한다.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>
);
}