12월의 봄

[React] 좋아요 값을 증가시키고 로컬스토리지에 저장하기

리액트
'use client';

import { useState } from 'react';
 
export default function LikeButton() {
  // 새로운 state 변수를 선언하고, likes라 부르겠습니다.
  // 값이 없으면 0
  const [likes, setLikes] = useState(
    window.localStorage.getItem("item1") > 0 ? 
    window.localStorage.getItem("item1") : 0
  );

  function handleClick() {
    let likes2 = Number(likes) + 1;
    setLikes(likes2);
    window.localStorage.setItem("item1", likes2); //저장
  }
  
  return <button onClick={handleClick}>Like ({likes})</button>;

}

'리액트' 카테고리의 다른 글

react 처음 설치하기  (0) 2025.01.11

react 처음 설치하기

리액트

1. Nodejs에서 LTS 버전 설치

 

2. 작업용 폴더 만들기

 

3. vite를 사용하여 설치

 

폴더에 우클릭해서 터미널에서 열기를 누릅니다.

npm create vite@latest

 

 

또는 vscode에서 폴더를 열고 터미널에서 cmd 연다음에 입력

이러면 작업 폴더 안에 내가 지정한 project name으로 폴더가 만들어짐

 

4. vscode 에서 새로 만든 project name 폴더 오픈

npm install

 

 

5. 작업 후 실행

npm run dev

 

 

코딩애플 참고하였고 vscode에서 설치하는 법 추가

리액트 React 설치와 개발환경 셋팅 - 코딩애플 온라인 강좌