리액트 – 이벤트 핸들링

버튼 클릭이벤트 핸들링

자바스크립트와 동일하게 button 등에 클릭이벤트를 발생시킬수 있다. 인라인 코드로 js를 바로 실행할 수 있으며, 미리 정의해두고 쓸 수도 있다.

//import logo from "./logo.svg";
import "./App.css";
import * as React from "react";
import Profile from "./components/Profile";
import Avatar from "./components/Avatar";

function AppProfile() {
  const handleClick = (event) => {
    console.log(event);
    alert("clicked!");
  };
  return (
    <>
      <button
        onClick={handleClick}
      >
        버튼
      </button>
    </>
  );
}

export default AppProfile;

이벤트 – state 변경 핸들링

리액트 컴포넌트는 변경 가능한 상태는 useState()를 사용해야한다.

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0); // useState는 
  return (
    <div className="counter">
      <span className="number">{count}</span>
      <button
        className="button"
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Add +
      </button>
    </div>
  );
}

useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해준다. 이 함수를 호출해주면 배열이 되는데, 여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수이다.

단순히 표현하면 아래처럼 할 수 있다.

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  const onIncrease = () => {
    setCount(count + 1);
  };
  const onDecrease = () => {
    if (count <= 0) return;
    setCount(count - 1);
  };
  return (
    <div className="counter">
      <span className="number">{count}</span>
      <button className="button" onClick={onIncrease}>
        Add +
      </button>
      <button className="button" onClick={onDecrease}>
        Minus -
      </button>
    </div>
  );
}