[React] React Event (이벤트)

1. React Event 리액트 이벤트

 

😺 리액트에서 이벤트 규칙을 알아보자 !

 

📍 리액트 이벤트 규칙 

1. 이벤트의 이름은 전부 카멜 표기법으로 표현됩니다. onkeyup -> onKeyUp
2. 이벤트를 전달할 때는 {함수} 형태로 사용합니다

 

 

 

😺 이제 리액트 이벤트를 사용해보자. 기본적인 Input 값부터 핸들링 해보자 !

 

📍 Input 값 핸들링

const EventComponent = () => {

    const [name, setName] = useState('');
    let handleName = (e) => {//2.event객체 활용
        setName(e.target.value);//3.state변경 (input의 value도 변경)
    }
    return (
        <div>
            <h3>리액트 이벤트 핸들링</h3>
            <input type="text" name="name" onChange={handleName} value={name}/><br/> {/*1. 이벤트연결*/}
            <h3>체인지된 결과: {name}</h3>
        </div>
    )
}

 

 

📍 useState 를 하나로 관리한다 (객체로 사용)

const EventComponent2 = () => {

    const [form, setForm] = useState({name: '', topic: ''});//객체 state

    let handleChange = (e) => {
				{...data, 키 : 값}
        const copy ={...form, [e.target.name]: e.target.value }//spread문법으로 복사 후 키 값 수정
        setForm(copy);//state변경
    }

    let handleClick = () => {
        alert(`결과: ${form.name} 님의 할일: ${form.topic}`)
        setForm({name: '', topic: ''})//state변경
    }

    return (
        <div>

            <h3>리액트 이벤트 핸들링(객체로 핸들링)</h3>
            <input type="text" name="name" onChange={handleChange} value={form.name}/><br/>
            <h3>체인지된 결과: </h3>

            <input type="text" name="topic" onChange={handleChange} value={form.topic} /><br/>
            <h3>체인지된 결과: </h3>

            <button type="button" onClick={handleClick}>클릭미</button>

        </div>
    )
}

 

 

---

 

📍  리액트 이벤트 실습

 

[ App.js ]

import { Fragment } from "react";
import EventComponent from "./component/EventComponent";
import EventComponent2 from "./component/EventComponent2";
import EventComponentQ from "./component/EventComponentQ";

function App() {
  return (

    <Fragment>
      <EventComponent />
      <EventComponent2 />
      <EventComponentQ/>

    </Fragment>


  )

}

export default App;

 

 

[ EventComponent.js ]

import { useState } from "react";

function EventComponent(){

  //let a = document.querySelector("input[name=name]");
  //console.log(a.value);
  // 리액트가 선호하는 방식은 아니다

  //1 input 이 관리할 값은 state 로 선언한다.
  let [name, setName]  = useState('');
  let [topic, setTopic]  = useState('');
  let [option, setOption] = useState('');
  //2 인풋태그 value 에 state 연결 
  //3 이벤트 를 통해서 inpur 값 제어

  let handleName = (e) => {
    console.log("체인지"); // state 는 여전히 공백임
    console.log(e); // 이벤트에 관련된 
    console.log(e.target.value);
    setName(e.target.value);

  }

  let handleTopic = (e) => {
    setTopic(e.target.value);
  }


  let hadleClick = () => {
    alert(`${name} 님의 입력값은 ${topic}`);
    setName('');
    setTopic('');
  }

  let handleKeyUp = (e) => {
    console.log('키보드 동작');
    if (e.key === 'Enter'){
      hadleClick();
    }
  }


  let handleSelect = (e) => {
    console.log(e);
    console.log('select 동작');
    setOption(e.target.value);
 
  }


  return (

  <div>
  
    hello world

    <hr />
    <input type="text" name="name" value={name} onChange={handleName}/>
    결과 state 값 : {name}

    <hr />

    <input type="text" name="topic" value={topic} onChange={handleTopic} onKeyUp={handleKeyUp} />
    결과 state 값 : {topic}


    <hr />

    <button type="button" onClick={hadleClick}> 클릭 이벤트 </button>


    <hr/>
    <h3>셀렉트 태그 핸들링(실습)</h3>
    <pre>셀렉트 태그가 체인지 될 때 선택한 결과를 아래에 출력</pre>            

    <select onChange={handleSelect} value={option}>
        <option>피자</option>
        <option>햄버거</option>
        <option>치킨</option>
    </select>

    <h3> 선택한 결과 :  {option} </h3>
    <p></p>



  </div>



  )
}


export default EventComponent;

 

 

 

 

  let handleKeyUp = (e) => {
    console.log('키보드 동작');
    if (e.key === 'Enter'){
      hadleClick();
    }
  }

 

• 엔터가 눌리면 handleClick() 실행시킨다는 뜻 onKeyUp 을 사용한다.

 

 

 

 

 

 

  let handleSelect = (e) => {
    console.log(e);
    console.log('select 동작');
    setOption(e.target.value);
 
  }

• 선택된 e.target 의 value 값을 option 에 저장시킨다 !

 

 

 

 

 

---

 

[ EventComponent2.js ]

import { useState } from "react";

function EventComponent2(){

  let [form, setForm]  = useState({name : '', topic : ''});

  let handleForm = (e) => {
    console.log(e.target.name);
    console.log(e.target.value);

    let copy = {...form ,[e.target.name] : e.target.value} // 현재 가지고 있는 값을 복사한다.
    setForm(copy);
    console.log(copy);
  }

  let handleClick = () => {
    alert(`${form.name} 님의 할일 ${form.topic}`);
    setForm({name:'', topic:''});
  }
  


  return (

  <div>
  
      <h3> 인풋태그 객체로 핸들링하기 </h3>

    <hr />
    <input type="text" name="name" value={form.name} onChange={handleForm}/>
    결과 state 값 : {form.name}

    <hr />

    <input type="text" name="topic" value={form.topic} onChange={handleForm} />
    결과 state 값 : {form.topic}
    <br />
    <button onClick={handleClick}> gg </button>
    <hr />

  </div>



  )
}


export default EventComponent2;

 

 

 

 

 

 

  let [form, setForm]  = useState({name : '', topic : ''});

• { name: '', topic: '' }라는 객체로 초기화

 

let copy = {...form ,[e.target.name] : e.target.value} // 현재 가지고 있는 값을 복사한다.

• form 객체의 현재 상태를 그대로 새로운 객체 copy로 복사
• , form 객체의 특정 필드를 업데이트

 

 

 

 

---

 

[ EventComponentQ.js ]

import { useState } from "react";

function EventComponentQ(){

  let [data, setData]  = useState('');
  let [result, setResult]  = useState('');



  let handleForm = (e) => {
    setData(e.target.value);
  }

  let handleClick = () => {
    setData('');
    setResult(data);
    
  }

  return (

    <div>
      <h1> 인풋 데이터 핸들링 </h1>
      클릭시 데이터는 공백으로
      결과는 인풋이 입력한 값

      *state 두개 필요할듯 객체로 

      <br/>
      <input type="text" value={data} onChange={handleForm}/>
      <input type="button" name="result" value="추가하기" onClick={handleClick}/>

      <br/>
      <h1> 결과 </h1>

      <div> {result} 입니다. </div>
      
    </div>
  )
}

export default EventComponentQ;

 

import { useState } from "react";

function EventComponentQ(){

  let [data, setData]  = useState({data:'', result:''});



  let handleChange= (e) => {
    setData({data: e.target.value ,result: data.result});
  }

  let handleClick = (e) => {
    setData({data:'',result : data.data});
  }

  return (

    <div>
      <h1> 인풋 데이터 핸들링 </h1>
      클릭시 데이터는 공백으로
      결과는 인풋이 입력한 값

      *state 두개 필요할듯 객체로 

      <br/>
      <input type="text" value={data.data} onChange={handleChange}/>
      <input type="button" name="result" value="추가하기" onClick={handleClick}/>

      <br/>
      <h1> 결과 </h1>

      <div> {data.result} 입니다. </div>
      
    </div>
  )
}

export default EventComponentQ;