이벤트

Say.js

const Say = () => {
    const [message, setMessage] = useState("");
    const onClickEnter = () => setMessage("어서와");
    const onClickExit = () => setMessage("잘가");
    
    
    const [color, setColor] = useState('black');
    
    return(
    	<>
            <button onClick={onClickEnter}>enter</button>
            <button onClick={onClickExit}>exit</button>
            <h1>{message}</h1>
       </>
    );
}

주의사항

1. 이벤트 이름은 카멜표기
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값 전달
3. DOM 요소에만 이벤트 설정 가능

   우리가 만든 컴포넌트에는 이벤트 설정 불가능함.
   div, span, input, button 등에만 이벤트 설정 가능함.

<Say onClick={doSomething} />

• 이름이 onClick인 props를 Say에 전달하는 것임.

예제

1. onChange 함수 설정하기

• input 요소 렌더링, onChange 이벤트 설정

EventPractice.js

import React, { useState } from "react";


const EventPractice = () => {
	return(
    	<input 
        	type='text' 
            name='message'
            placeholder='입력'
            onClick={e=>{console.log(e);}}
        />	
    );
}
export default EventPractice;

• e : SyntheticEvent(합성 이벤트)로 웹 브라우저의 네이티브 이벤트를 감싸는 객체
• 이벤트가 끝나면 해당 내용은 휘발되므로 이전 정보 참조 불가능함.

2. state에 input 값 담기

EventPractice.js

import React, { useState } from "react";


const EventPractice = () => {
  const [message, setMessage] = useState("");

  return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type='text'
          name='message'
          placeholder='입력'
          value={message}
          onChange ={ (e) => {
            setMessage(e.target.value);
            console.log(message);
          } }
        />
      </div>
    );
}
export default EventPractice;

• value는 state 값을 받아오며, input 태그 내에서 변화가 생길 때마다 그 이벤트 타겟의 value(message===state)값으로 state 값을 변화시켜줌.

3. 버튼을 누를 때마다 comment값 공백으로 설정

import React, { useState } from "react";

const EventPractice = () => {
  const [message, setMessage] = useState("");

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="입력"
        value={message}
        onChange={(e) => {
          setMessage(e.target.value);
          console.log(message);
        }}
      />
      <button
        onClick={() => {
          setMessage("");
        }}
      >
        blank
      </button>
    </div>
  );

• 버튼을 누를 때마다 onClick이벤트 내 콜백함수 실행 : message값을 비워버림.
• state인 message를 input의 value와 연결시킨 상태

4. 임의 메서드로 만들기

const EventPractice = () => {
  const [message, setMessage] = useState("");
  const onChange = (e) => {
    setMessage(e.target.value);
    console.log(message);
  };
  const onClick = () => {
    setMessage("");
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="입력"
        value={message}
        onChange={onChange}
      />
      <button onClick={onClick}>blank</button>
    </div>
  );

5. 여러개의 input값 사용하기

• event 객체 활용하면 됨!

import React, { useState } from "react";

const EventPractice = () => {
  const [message, setMessage] = useState("");
  const [username, setUsername] = useState("");
  const onChangeUsername = (e) => {
    setUsername(e.target.value);
  };
  const onChangeMessage = (e) => {
    setMessage(e.target.value);
  };
  const onClick = () => {
    setMessage("");
    setUsername("");
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="입력"
        value={message}
        onChange={onChangeMessage}
      />
      <input
        type="text"
        name="username"
        placeholder="이름 입력"
        value={username}
        onChange={onChangeUsername}
      />
      <button onClick={onClick}>blank</button>
    </div>
  );

• state 값을 객체로 받을 경우

import React, { useState } from "react";

const EventPractice = () => {
  const [form, setForm] = useState({
    username: "",
    message: ""
  });
  const { username, message } = form;

  const onChange = (e) => {
    const nextForm = {
      ...form,
      [e.target.name] : e.target.value, // 원하는 값 덮어쓰기
    }
    setForm(nextForm)
  };
  const onClick = () => {
    setForm({
      username: "",
      message: ""
    });
  };

  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="message"
        placeholder="입력"
        value={message}
        onChange={onChange}
      />
      <input
        type="text"
        name="username"
        placeholder="이름 입력"
        value={username}
        onChange={onChange}
      />
      <button onClick={onClick}>blank</button>
    </div>
  );

• e.target.name = 해당 input의 name(message, username)
• 객체 안에서 key를 []로 감싸면 그 안에 넣은 레퍼런스가 실제 key값이 됨

{ 'e.target.name' : 'e.target.value' }