jsx, state 사용해서 click count

 

App.js

import { useState } from "react";

const App = () => {

  const [counter, setCounter] = useState(0);
  
  const setCount = () => {
    setCounter(counter + 1);
  };
  
  return (
    <div>
      <h1>Total clicks : {counter}</h1>
      <button onClick={setCount}>Click!</button>
    </div>
  );
};

export default App;

 

* point

1. jsx 문법

    - document.querySelector().innerHTML 대신 {counter} 

2. useState

import {useState} from 'react';

const [counter, setCounter] = useState(0);  - counter : state에 저장했던 자료  - setCounter : state 변경을 도와주는 함수

변수와 state 차이점  - 일반 변수는 값이 변경되면 html에서 자동변경이 안됨  - state는 값이 변경되면 자동으로 html이 재렌더링됨

 

* 실행

Terminal > New Terminal > cd + 해당 프로젝트명 입력 후 

npm start