React 실습 - React Event handling

DOM이벤트 처리 방식과 유사하다.

다만!

React에서 이벤트는 카멜케이스(camelCase)

JSX를 사용. 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러;Event handler)를 전달

 

 

onChange

사용자의 입력값을 제어하는 폼(Form)엘리먼트 `<input type="text 또는 checkbox"> <textarea> <select>`

변경될 수 있는 입력값들을 React는 컴포넌트의 state로 관리하고 업데이트 한다!

이벤트가 발생하면 `event.target.value`를 통해 이벤트객체에 담겨있는 `input`값을 가져올 수 있다😚

 

onClick

button click 또는 <a>태그를 통한 이동 등 사용자의 행동에 따른 이벤트.

//onChange, onClick 이벤트 예제
import "./styles.css";
import React, { useState } from "react";

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

  const handleChange = (e) => {
    setName(e.target.value);
  };

//함수자체를 전달하기
  const handleClick = () => {
    alert(name);
  };
  return (
    <div className="App">
      <h1>Event handler practice</h1>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={handleClick}>Button1</button> {/* 방법1 */}
      <button onClick={() => alert(name)}>Button2</button>{/* 방법2 */}
      <button onClick={alert(name)}>Button3</button> {/* 왜이건안돌아가는거지?🧐 */}
      <h3>{name}</h3>
    </div>
  );
}
export default NameForm;

`onClick`이벤트에 함수를 전달 할 때는, 함수를 호출하는 것이 아니라

리턴문 안에서 함수를 정의하거나,

리턴문 외부에서 함수를 정의한 후 이벤트에 함수 자체를 전달해야 한다.

단, 두 가지 방법 모두 arrow function을 사용하여 함수를 정의하여야 해당 컴포넌트가 가진 state에 함수들이 접근할 수 있다.

 

state와 props이해 예제 Action item 1) 과일선택 <select>

import React, { useState } from "react";
import "./styles.css";

function SelectExample() {
  const [choice, setChoice] = useState("apple");

  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
  const options = fruits.map((fruit) => {
    return <option value={fruit}>{fruit}</option>;
  });
  console.log(choice);

  const handleFruit = (event) => {
    setChoice(event.target.value);
  };

  return (
    <div className="App">
      {/* drop down 목록에서 선택된 과일로 현재의 state가 업데이트되도록 함수완성하려면 value를 받아와야한다. */}
      <select value={choice} onChange={handleFruit}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </div>
  );
}

export default SelectExample;

 

state와 props이해 예제 Action item 2) pop up버튼만들기(open me close me)

import React, { useState } from "react";
import "./styles.css";

function App() {
  const [showPopup, setShowPopup] = useState(false);

  const togglePopup = () => {
    // Pop up 의 open/close 상태에 따라
    // 현재 state 가 업데이트 되도록 함수를 완성하세요.
    if(showPopup === false) {
      setShowPopup(true)
    }else(setShowPopup(false))
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      {/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
          button tag를 완성하세요. */}
      <button className="open" onClick={togglePopup}>Open me</button>
      {showPopup ? (
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close" onClick={togglePopup}>
              Close me
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default App;