<React> 4장 이벤트 핸들링(Event handling) 실습

공부 내용 : 이벤트 핸들링 실습 구현 

---

목차

1. onChange, onClick 이벤트 실습
2. input이 여러 개일 때 이벤트 처리 실습
3. onKeyPress 이벤트 실습

---

 

1. onChange, onClick 이벤트 실습

 

OnChangePractice.js

• input에 값을 입력 시 message 값을 update (onChange 이벤트)
• '확인' 버튼 클릭 시 입력된 message 값을 출력 후 message 값 초기화 (onClick 이벤트)

소스코드

 

1. return에서 이벤트 처리하는 방식 ( 기본적이나 깔끔하지 못함 )

import React, { useState } from 'react';

// 그냥 리턴에 넣는 방식(지저분함)
const OnChangePractice = () =>{
    const [ message, setMessage ] = useState('');
    return (
        <>
            <input 
                type="text" 
                name="message" 
                placeholder="아무거나 입력해 주세요." 
                onChange={
                    (e) =>{
                        setMessage(e.target.value);
                    }
                }
            />
            <button onClick={
                ()=>{
                    alert("입력값 : "+message); 
                    setMessage('');
                    }}>
                확인
            </button>
        </>
    );
};

export default OnChangePractice;

 

2. 미리 함수화 시켜서 값을 넣는 방식 ( 깔끔함 )

import React, { useState } from 'react';

// 함수화 시켜서 넣는 방식(깔끔함)
const OnChangePractice = () =>{
    const [ message, setMessage ] = useState('');
    const onChange = e =>{
        setMessage(e.target.value);
    };
    const onClick = () =>{
        alert("입력값 : "+message);
        setMessage('');
    };
    return (
        <>
            <input 
                type="text" 
                name="message" 
                placeholder="아무거나 입력해 주세요." 
                onChange={onChange}
            />
            <button onClick={onClick}>확인</button>
        </>
    );
};

export default OnChangePractice;

---

2. input이 여러 개일 때 이벤트 처리 실습

 

MultipleInputsPractice.js

 

• input 을 두 개 받음 (username, message)
• '확인' 버튼 클릭 시 "username : message" 형태로 출력

소스코드

 

1. 기본적인 state 구현 방법으로 두 개의 input을 받음 (코드가 길어짐)

• state가 두 개 이므로 onChange 함수도 두 개 필요 (onChangeUsername, onChangeMessage)

import React, { useState } from 'react';

//기본적인 두 개 input 방식
const MultipleInputsPractice = () =>{
    const [username, setUsername] = useState('');
    const [message,setMessage] = useState('');
    const onChangeUsername = e => setUsername(e.target.value);
    const onChangeMessage = e => setMessage(e.target.value);
    
    const onClick = () =>{
        alert(username+" : "+message);
        setMessage('');       
    };
    return (
        <>
            <input
                type="text"
                name="username"
                placeholder="사용자 이름을 입력해 주세요."
                onChange={onChangeUsername}
            />
            <input
                type="text"
                name="message"
                placeholder="아무 말이나 입력해 주세요."
                onChange={onChangeMessage}
            />
            <button onClick={onClick}>입력</button>
        </>
    );
};

export default MultipleInputsPractice;

 

2. [e.taget.name]을 사용한 방식

• username과 message를 form이라는 하나의 state로 받음
• state 한 개 이므로 onChange 함수 한 개 필요
• onChange 함수 내부에 이전 form 값을 불러온 뒤 key 값에 e의 현재 값을 넣어줌 ([e.target.name])
• form 값을 업데이트해줌 
• input에 value 값을 통해 초기값을 설정해준다.

import React, { useState } from 'react';

//[e.taget.name]을 사용한 간략한 두 개 input 방식
const MultipleInputsPractice = () =>{
    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 = () =>{
        alert(username+" : "+message);
        setForm({
            username: '',
            message: ''
        });       
    };
    return (
        <>
            <input
                type="text"
                name="username"
                placeholder="사용자 이름을 입력해 주세요."
                value={username}
                onChange={onChange}
            />
            <input
                type="text"
                name="message"
                placeholder="아무 말이나 입력해 주세요."
                value={message}
                onChange={onChange}
            />
            <button onClick={onClick}>입력</button>
        </>
    );
};

export default MultipleInputsPractice;

---

3. onKeyPress 이벤트 실습

 

OnKeyPressPractice.js

• Enter 키 입력 시 alert 화면 출력
• "입력받은 key 값과 Enter 값이 같을 때"라는 조건이 추가됨 (e.key === 'Enter') 

소스코드

 

1. return의 onKeyPress 이벤트 발생 시 바로 입력하는 방식

import React, { useState } from 'react';

// onKeyPress 이벤트에 바로 입력하는 방식 (보기 어려울 수 있음)
const OnKeyPressPractice = () =>{
    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 = () =>{
        alert(username+" : "+message);
        setForm({
            username: '',
            message: ''
        });       
    };

    return (
        <>
            <input
                type="text"
                name="username"
                placeholder="사용자 이름을 입력해 주세요."
                value={username}
                onChange={onChange}
            />
            <input
                type="text"
                name="message"
                placeholder="아무 말이나 입력해 주세요."
                value={message}
                onChange={onChange}
                onKeyPress={e =>{
                    if(e.key === 'Enter') {
                        onClick();
                    }}
                }
            />
            <button onClick={onClick}>입력</button>
        </>
    );
};

export default OnKeyPressPractice;

 

2. 미리 onKeyPress에 대한 함수 생성해 놓고 불러오는 방식 (가독성 좋음)

import React, { useState } from 'react';

// 미리 함수 생성 방식(깔끔함)
const OnKeyPressPractice = () =>{
    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 = () =>{
        alert(username+" : "+message);
        setForm({
            username: '',
            message: ''
        });       
    };

    const onKeyPress = e =>{
        if(e.key === 'Enter') {
            onClick();
        }
    };
    return (
        <>
            <input
                type="text"
                name="username"
                placeholder="사용자 이름을 입력해 주세요."
                value={username}
                onChange={onChange}
            />
            <input
                type="text"
                name="message"
                placeholder="아무 말이나 입력해 주세요."
                value={message}
                onChange={onChange}
                onKeyPress={onKeyPress}
            />
            <button onClick={onClick}>입력</button>
        </>
    );
};

export default OnKeyPressPractice;

---

 

실습 구현 Git 링크 : https://github.com/ryeongee/Frontend_Study/tree/main/React/workspace/4%EC%9E%A5-%EC%9D%B4%EB%B2%A4%ED%8A%B8%ED%95%B8%EB%93%A4%EB%A7%81

ryeongee/Frontend_Study

 

 

 

* 본 문서는 '리액트를 다루는 기술, 개정판', 김민준 도서와 Fastcampus 수업 내용을 토대로 구현한 실습 임을 알립니다.