React 좋아요 누를때마다 1씩 증가하는 버튼 만들기

state, 함수 이용 

 

좋아요 버튼을 누르면 숫자가 올라가게끔 만들 것이다. 

이때 숫자는 누르는 횟수만큼 +1이 되기 때문에 state를 써줄 것이다. 

 

1단계 : 형태만 만들기

import {useState} from "react";

function App() {

    let [heart] =useState(0);
    
    return (
    	<div>
        	<h4> 좋아요 <span> ❤️ </span> {heart} </h4>
        </div>
    );
}

1단계 결과

 

2단계 : 좋아요를 눌렀을 때 0이 1로 바뀌도록 (onClick 사용)

import {useState} from "react";

function App() {

    let [heart, heartAlterNums] =useState(0);
    
    return (
    	<div>
        	<h4> 좋아요 <span onClick ={ () => hearAlterNums(1)}> ❤️ </span> {heart} </h4>
        </div>
    );
}

2단계 결과

 

 

3단계 : 누를때마다 +1이 되게끔 함수 식 추가하기

import {useState} from "react";

function App() {

    let [heart, heartAlterNums] =useState(0);
    
    return (
    	<div>
        	<h4> 좋아요 <span onClick ={ () => hearAlterNums(heart+1)}> ❤️ </span> {heart} </h4>
        </div>
    );
}

3단계 결과