[React] State(2) - 버튼 구현

Baoro·2022년 3월 6일
0

React

목록 보기
2/5

이번에는 state를 이용하여 버튼기능을 구현해보려고 한다.

import React, {useState} from 'react';

function App() {
  const [글제목,글제목변경] = useState('피자 추천','치킨 추천','햄버거 추천');
  
  return (
    <div>
    	<p> {글제목[0]} <span> 🍪 </span> </p>
    </div>

쿠기를 눌렀을 때 동작하는 것을 하려고 한다면? 바닐라 자바스크립트에서 배운 addEventListener, onclick 같은 것이 생각날 것이다.

바닐라 자바스크립트 :language-javascript"><span onClick={()=>{실행할 내용}) > 🍪 </span>

여기 실행할 내용에다가 "console.log(1)"을 넣어주기만 하면 된다. 별거없다...
그렇다면 쿠키를 누를 때마다 누른횟수가 나오게 만들어보자


Q. 쿠키를 누를 때마다 1 증가시키기

<p> {글제목[0]} <span onClick={()=>{실행할 내용})> 🍪 </span> 0 </p>

우선 state를 추가해준다.

const [쿠키,쿠키변경] = useState(0);

onClick안에 함수에 무엇을 넣어야할까?
여기서 사용할 것이 쿠키변경이라는 함수이다. 말그대로 앞에 쿠키(state)를 변경할 수 있게 해준다.

<p> {글제목[0]} <span onClick={()=>{쿠키변경(쿠키+1)})> 🍪 </span> 0 </p>
profile
꾸준히.... 깔끔하게.... 끝까지....

0개의 댓글