리액트 | 이벤트 핸들링

이벤트 핸들링

이벤트 규칙

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

 

 

인풋값 핸들링 해보기

1. 인풋의 값이 변화되는 이벤트 onChange 연결
2. 이벤트 안 첫번째 매개변수에서 event객체 활용하기 (e.target.속성값)
3. setter를 이용해서 state변경하기

 

예제 ) 

 

 

예제 1)  변화하는 인풋 값에 따른 결과값 변경

import { useState } from "react";

const EventComponent = () => {
    
    //121p
    //name을 저장할 useState
    const [name,setName] = useState('');
    
    //이벤트 함수의 첫번째 매개변수에 이벤트에 대한 정보를 넣어줍니다.
    const handelName = (e) => {
        // console.log(e.target.value);
        setName(e.target.value); //state체인지
    }

    //
    const [topic,setTopic] = useState('');

    const handelTopic = (e) => {
        setTopic(e.target.value);
    }


    const handleClick = (e) => {
        alert(`${name}님의 주제는 ${topic}입니다.`); //state값
        setName(''); //인풋데이터 초기화
        setTopic(''); //인풋데이터 초기화
    }

    //엔터키의 처리
    const handlePress = (e) => {
    //    console.log(e); 
        if(e.keyCode == 13){ //엔터값
            handleClick(); //클릭이벤트 호출
        }
    }

    return (
        <>
            <h3>리액트의 이벤트 핸들링(인풋데이터)</h3>
            <input type = "text" name = "name" onChange={handelName} value={name}/>
            <div>체인지된 결과 : {name}</div>

            <input type = "text" name = "topic" onChange={handelTopic} onKeyUp={handlePress} value={topic}/>
            <div>체인지된 결과 : {topic}</div>

            <button type="button" onClick={handleClick}>click me</button>
        </>
    )
}

export default EventComponent;

 

 

 

예제 2)  선택된 태그가 체인지 될 때 선택한 결과를 아래에 출력

 

import { useState } from "react";


const EventComponentQ = () => {


    const [food,setFood] = useState('메뉴를 선택하세요');


    //셀렉트 태그에서는 option태그가 기본 value가 됩니다.
    const foodFunc = (e) => {
        setFood(e.target.value);
    }


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

            <select onChange={foodFunc}>
                <option>피자</option>
                <option>햄버거</option>
                <option>잠봉뵈르</option>
            </select>

            <h3>선택한 결과</h3>
            <p>{food}</p>
        </>
    )
}

export default EventComponentQ;

 

예제 3)  객체로 핸들링하기

import { useState } from "react";

const EventComponent2 = () => {
    
    //state를 객체로 관리
    const [data,setData] = useState({name: '', topic : ''});
    
    const handleChange = (e) => {
        //객체 안에서 key를 바꾸는 방법 ["키"] : 값 

        
        const copy = {...data, [e.target.name]:e.target.value}; //데이터 복사
        setData(copy); //state변경

    }

    const handleClick = (e) => {
        alert(`${data.name}님의 주제는 ${data.topic}입니다.`)
        setData({name:'', topic:''});//state초기화
    }

    // const handleTopic = (e) => {
    //     //객체 안에서 key를 바꾸는 방법 ["키"] : 값 

    //     console.log(e.target.name);
    //     const copy = {...data, ["name"]:e.target.value}; //데이터 복사
    //     setData(copy); //state변경

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

            <button type="button" onClick = {handleClick}>click me</button>
        </>
    )
}

export default EventComponent2;

 

 

예제 4)  버튼 클릭시 결과에 인풋이 입력한 값 출력

 

import { useState } from "react";


const EventComponentQ2 = () => {
    //실습
    /*
    const [data, setData] = useState(''); //인풋데이터
    const [result, setResult] = useState(''); //결과데이터

    const handleChange = (e) => {
        setData(e.target.value); //내부적으로 비동기 적으로 변경
        //console.log(data); //이전 값이 출력됩니다(정상)
    }

    const handleClick = (e) => {
        setResult(data); //사용자가 입력한 값으로 변경.
        setData(''); //인풋데이터는 공백으로 변경.
    }
    */

    //state를 객체로 관리
    const [form, setForm] = useState({data : '', result: ''}); //인풋데이터
    const handleChange = (e) => {
        //data는 사용자의 입력값으로, result는 유지
        setForm({data: e.target.value, result : form.result}); 
    }

    const handleClick = () => {
        //data는 '', result는 data로 변경
        setForm({data: '', result: form.data});
    }


    return (
        <div>
            <hr/>
            <h3>인풋데이터 핸들링(실습)</h3>
            <pre>클릭시 데이터는 공백으로 결과는 인풋이 입력한 값으로 처리</pre>            
			<pre>힌트는? 아마도 state는 두개가 필요할듯?</pre> 

            <input type="text" onChange={handleChange} value={form.data} />
            <button type="button" onClick={handleClick}>추가하기</button>
            <h3>결과</h3>
            <p>{form.result}</p>

        </div>
    )
}

export default EventComponentQ2;