이벤트처리

<이벤트핸들링>
#DOM의 이벤트 처리방식과 유사하다. 몇가지 문법차이만있다.
-react에서 이벤트는 소문자 대신 카멜 케이스를 사용한다.
-JSX를 사용하여 문자열이 아닌 함수로 이벤트처리 함수(이벤트 핸들러)를 전달한다.

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

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

---

< onChange >

input, textarea, select와 같은 폼엘리먼트는 컴포넌트의 state로 관리하고 업데이트한다.
onChange 이벤트가 발생하면 e.target.value를 통해 이벤트 객체에 담겨있는 input값을 읽어올수있다.
onChange는 input의 텍스트가 바뀔때마다 발생하는 이벤트이다.
이벤트가 발생하면 handleChange함수가 작동하며, 이벤트 객체에 담긴 input값을 setState를 통해 새로운 state로 갱신한다.

 

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

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

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

 

< onClick >

사용자가 클릭이라는 행동을 하였을때 발생하는 이벤트이다.

onClick={클릭될때실행할함수}

onClick={ () => {실행할내용} } 

 

onClick={handleEvent}가 되어야한다.

그냥함수명만 써야한다는말이다!!

handleEvent()이렇게쓰면 결과값이 나와서 undefined가 출력되서 안된다!!!!!  

클릭할때마다 따봉개수를 1증가시키려면

let[따봉, 따봉변경] = useState(0);

<span onClick= { () => 따봉변경{따봉+1} }>

 

//버튼이란 단추를 누르면 남자코트추천이 여자코트추천으로 바뀌어야한다.
//일단 버튼을 만들자
<button onClick={ 제목바꾸기 }>버튼</button>

let[글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);

function 제목바꾸기(){
let newArray = [...글제목]     //글제목을 spread를 이용해 복사한다.깊은복사
newArray[0] = '여자코드추천';
글제목변경(newArray);
}

 

버튼이나 <a> tag를 통한 링크이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야할때 자주 사용하는 이벤트이다.
onChange예시에 버튼을 추가하여 버튼 클릭시 input tag 에 입력한 이름이 alert를 통해 알림창이 팝업되도록 코드를 추가해보겠다.

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

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

return(
<div>
<input type="text" value={name} onChange={handleChange}></input>
<button onClick={alert(name)}>Button</button>
<h1>{name}</h1>
</div>
)};

onClick이벤트에 alert(name)함수를 바로 호출하면 컴포넌트가 렌더링 될때 함수 자체가 아닌 함수 호출의 결과가 onClick에 적용된다.
onClick이벤트에 함수를 전달할때는 함수를 호출하는 것이 아니라
리턴문안에서 함수를 정의하거나
리턴문 외부에서 함수를 정의후 이벤트에 함수 자체를 전달해야한다.

 

return ( //리턴문안에서 함수를 정의하기
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

const handleClick = () => {  //리턴문 외부에서 함수를 정의한후 이벤트에 함수 자체를 전달하기
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};

---

< select tag > 사용자가 drop down 목록을 열어 그중 한가지 옵션을 선택하면 선택된 옵션이 state변수에 갱신된다

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">
      <select onChange={handleFruit}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </div>
  );
}

export default SelectExample;

< pop up > pop up의 open과 close를 state를 통해 관리할수있다

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

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

  const togglePopup = () => {
    if(showPopup === false){
      setShowPopup(true);
    }
    else{
      setShowPopup(false);
    }
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
    
      <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;