[React] useState를 활용하여 좋아요 기능 만들기

React에 관심이 생겨 공부를 하고있다 ( 초보임 )

React useState에 대해 기록해두려고 한다

useState는 재 랜더링이 필요한경우 사용한다고 한다 ( 배우는 중 )

 

사용 코드

import React,{ useState } from "react" // useState를 import

const [변수,변수값세팅] = useState(기본값)

위의 코드처럼 입력 하면 사용할 준비는 끝

 

좋아요 카운트를 늘리는 예제를 만들어보겠다

 

완성된 예제는 아래와 같다

mport React, { useState } from "react"

export default function Like() {
  const [like, setLike] = useState(0)
  return (
    <>
      <div>
        <h2>먹은거 자랑</h2>
        <p>
          오늘 소고기먹었다 좋아요를 눌러주세요
          <button onClick={() => { setLike(like + 1) }}>
            👍🏻
          </button>
          <button onClick={() => { setLike(like - 1) }}>
            👎🏻
          </button>
        </p>
        <p>좋아요 개수 : {like}</p>
      </div>
    </>
  )
}

 

useState를 like(변수), setLike(변수값세팅),기본값 0으로 설정해준뒤

<button> 안을 클릭할경우 동작이 작동되도록 onClick ( 대소문자 정확히 ) 을 입력하여 클릭이벤트를 받고

위에서 설명했던 setLike(변수값세팅)를 호출하여 기존 like(변수) 값에 + 1을 해주자

그럼 {like}로 출력한 값이 +1되어 출력되는것을 확인 할 수 있고 반대로 -값도 동일하게 만들어준다

 

참쉽죠?