23-01-16 4. 리액트 이벤트 핸들링

이벤트 규칙

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

 

인풋값 핸들링 해보기

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

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>
    )
}

#리액트 이벤트 활용 수업 중 확인 해본 내용.

*EventComponent.js

import { useState } from "react";


const EventComponent = () => {

    //name을 저장할 useState
    const[name, setName] = useState('');

    //이벤트 함수의 첫번째 매개변수에 이벤트에 대한 정보를 넣어준다.
    const handleName = (e) => {
        // console.log(e.target.value);
        setName(e.target.value);//state체인지
    }

    const [topic, setTopic] = useState('');
    const handleTopic = (e) => {
        setTopic(e.target.value);
    }

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

    //엔터키의 처리
    const handlePress = (e) => {
        // console.log(e); //enter를 눌렀을시 keyCode 확인.
        if(e.keyCode === 13){
            handleClick(); // 클릭이벤트 호출
        }
    }
 
    return (

        <>
            <h3>리액트의 이벤트 핸들링 (인풋데이터)</h3>
            {/* input 태그에 value를 넣는 이유는 클래스형 함수에서 이걸 안 넣어주면 텍스트 입력창에 값이 입력되는게 안보임. */}
            <input type="text" name="name" onChange={handleName} value={name}/>
            <div>체인지된결과: {name}</div>

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

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

    )

}

export default EventComponent;

*실습

EventComponentQ.js

import { useState } from "react";

const EventComponentQ = () => {

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

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

    return (

        <>
            <hr/>
            <h3>셀렉트 태그 핸들링(실습)</h3>
            <p>셀렉트 태그가 체인지 될 때 선택한 결과를 아래에 출력</p>
            <select onChange={foodSelect}>
                <option>피자</option>
                <option>치킨</option>
                <option>햄버거</option>
                <option>고기</option>
            </select>
            <h3>결과 : {food}</h3>
        </>

    )

}

export default EventComponentQ;

 

----------------------------------- 여기서부턴  useState를 객체로 해서 하나로 관리하는 내용 ---------------------------

 

 

useState를 하나로 관리하기(객체로 사용) 😊

const EventComponent2 = () => {
     
    const [form, setForm] = useState({name: '', topic: ''}); //객체 state
    
    let handleChange = (e) => {
        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>
    )
}

 

#수업시간  중 확인해본 내용. 

 

*생소하고 헷갈렸던 부분.

  //state를 객체로 관리
    const [data, setData] = useState({name : '', topic : ''});

    const handleChange = (e) => {
        //객체안에서 key를 바꾸는 방법 ["키"] : 값
        const copy = {...data, [e.target.name] : e.target.value }; //데이터복사 , 키값 변경
        setData(copy); //state변경
        console.log(copy);
    }

state 값으로 지정해준 객체를 갖고와서 그 중에 특정한 키 값을 바꾸는 부분  

        //객체안에서 key를 바꾸는 방법 ["키"] : 값
        const copy = {...data, [e.target.name] : e.target.value }; //데이터복사 , 키값 변경
        setData(copy); //state변경

...data로 state 객체 값을 복사한 뒤에 , 찍고 뒤에서  data 객체안의 키 값을 변경해준다. 

이 부분 유의해서 봐두도록 하자.

 

*태그의 name 속성에 state 의 키 값과 동일하게 값을 주어서 활용했던 점 잘 기억해두자.

*input 태그에 value를 넣는 이유는 클래스형 함수에서 이걸 안 넣어주면 텍스트 입력창에 값이 입력되는게 안보임

 

 

 

*EventComponent2.js

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변경
        console.log(copy);
    }

    const handleTopic = (e) => {

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

    const handleClick = () => {
        alert(`${data.name}님 할일: ${data.topic}`);
        setData({name:'', topic:''}); //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}>클릭미</button>
        </>

    )

}
export default EventComponent2;

 

*EventComponentQ2.js  (실습)

import { useState } from "react";

const EventComponentQ2 = () => {

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

    const handleChange = (e) => {
        // const copy = {...data , [e.target.name]:e.target.value}
        // setData(copy);

        setData({input: e.target.value , result: data.result});

        //setState함수 특성상 내부적으로 비동기 방식으로 작동 
        // console.log(data); //이전값이 출력됩니다(정상) 
    }

    const handleClick = (e) => {
        // const copy = {...data, [e.target.name]: data.input, ["input"]:''}
        // setData(copy);
        setData({input: '', result: data.input})
    }

    return (    

        <>  
            <hr/>
            <h3>인풋데이터 핸들링(실습)</h3>
            <p>
                클릭시 데이터는 공백으로 결과는 인풋이 입력한 값으로 처리<br/>
                힌트는? 아마도 state는 두개가 필요할듯?
            </p>
            <input type="text" name="input" onChange={handleChange} value={data.input}/>
            <button type="button" name="result" onClick={handleClick}>추가하기</button>
            <h3>결과</h3>
            <p>{data.result}</p>
        </>

    )

}

export default EventComponentQ2;

 

 

*책에서 이벤트 관련 내용

p.121

    이벤트 핸들링

    함수형이벤트 핸들링