노트 #46 | React - React 이벤트 처리 (+ Recoil)

개요

React 의 이벤트 처리 방식은 DOM 의 이벤트 처리 방식과 유사합니다.
단, 몇 가지 문법 차이가 있습니다.

---

학습 목표

• 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
• React의 이벤트 처리 문법에 익숙해집니다.

---

React 이벤트 처리

개요

기존 DOM의 이벤트처리 방식과 유사하지만 몇 가지 문법 차이가 있습니다.

• React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용합니다.
• JSX 를 사용하여 문자열이 아닌 함수로 이벤트 처리함수(이벤트 헨들러) 를 전달합니다.
• 예시

// HTML 이벤트 처리 방식

<button onclick="handleEvent()">Event</button>

// React 이벤트 처리 방식

<button onClick={handleEvent}>Event</button>

활용 예시

onChange

• 라이브러리 X

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
    // console.log(e.target.value);
  };

  return (
    <>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </>
  );
}

export default App;

• Recoil

// atoms.tsx

import { atom } from "recoil";

export const nameState = atom({
  key: "name",
  default: "",
});

// App.tsx

import React from "react";
import { useRecoilState } from "recoil";
import { nameState } from "./atoms";

function App() {
  const [name, setName] = useRecoilState(nameState);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
    // console.log(e.target.value);
  };
  return (
    <>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </>
  );
}
export default App;

onClick

• Recoil

import React from "react";
import { useRecoilState } from "recoil";
import { nameState } from "./atoms";
function App() {
  const [name, setName] = useRecoilState(nameState);
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
    // console.log(event.target.value);
  };

  const handleClick = () => {
    alert(name);
  };

  return (
    <>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={handleClick}>Button</button>
      <h1>{name}</h1>
    </>
  );
}
export default App;

onSubmit

• Recoil

import React from "react";
import { useRecoilState } from "recoil";
import { nameState } from "./atoms";
function App() {
  const [name, setName] = useRecoilState(nameState);
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
    // console.log(e.target.value);
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    alert(name);
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input type="text" value={name} onChange={handleChange}></input>
        <button type="submit">Button</button>
      </form>
      <h1>{name}</h1>
    </>
  );
}
export default App;

onChange (HTMLSelectElement)

• 라이브러리 X

import React, { useState } from "react";

function App() {
  const [choice, setChoice] = useState("apple");
  const fruits = ["apple", "orange", "pinapple", "strawberry", "grage"];
  const options = fruits.map((fruit) => {
    return <option value={fruit}>{fruit}</option>;
  });

  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setChoice(event.target.value);
  };

  return (
    <>
      <select onChange={handleChange}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </>
  );
}
export default App;

• Recoil

// atoms.tsx

import { atom } from "recoil";

export const choiceState = atom({
  key: "choice",
  default: "apple",
});

// App.tsx

import React from "react";
import { useRecoilState } from "recoil";
import { choiceState } from "./atoms";

function App() {
  const [choice, setChoice] = useRecoilState(choiceState);
  const fruits = ["apple", "orange", "pinapple", "strawberry", "grage"];
  const options = fruits.map((fruit) => {
    return <option value={fruit}>{fruit}</option>;
  });

  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setChoice(event.target.value);
  };

  return (
    <>
      <select onChange={handleChange}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </>
  );
}
export default App;

---

참조

코드스테이츠 프론트엔드 부트캠프