[React] useState2. 클릭이벤트를 걸어보자.

#0. React 에서는 왜 변수에 데이터 저장안하고 굳이 state씀?

- 일반 변수와 달리, state데이터는 변경시, 재랜더링이 일어나, 변경 사항이 바로 화면에 적용되기 때문이다. 

 

#1. 예제

- 버튼을 클릭하면 +1씩 되는 좋아요 버튼을 만들어보자.

- state만 변경하면 변경사항이 적용되는지 확인할것.

 

* 실습 전 알아두어야 할점

1. 클릭이벤트 onClick={} 을 이용해서 넣기

- {}안에는 반드시 함수가 들어가야한다. 

- 그러니까, onClick={함수명} 또는 onClick={() => {코드..}} 형태로 작성해야한다.

 

2.  state 변경하는 방법

-  state변수를 변경하고 싶다면, 항상 state변경함수(새로운state) 의 형태로 변경해야한다.

let [like, setLike] = useState(0);

// 위의 like state를 변경하기 위해선
// state변경함수(새로운state)
setLike(like+1);

 

* 적용된 코드

import React from 'react';

// 1. useState import

import { useState } from "react";

export function App(props) {

  // 2. 좋아요 카운팅 숫자 저장

  let [like, setLike] = useState(0);

  return (

    <div className='App'>

      {/* 3. 좋아요 버튼에 onClick을 사용하여 +1 하기 */}

      <button type="button"

      onClick={()=>{

        setLike(like + 1)

      }}>

      좋아요 {like}번

      </button>

    </div>

  );

}

 

* 결과

- like 값만 변경했을 뿐인데, 변경시마다 {like}값이 재랜더 된다.

이렇게 잘 카운팅된다

* 테스트 해보기

https://playcode.io/1529872

React Playground