React) onKeyPress와 input 여러개 일 때onChange 이벤트 핸들링

onKeyPress and onChange with multiple input Event Handling

---

• source code 

import React, { useState } from 'react';


const EventHandling = () => {
    const [form, setForm] = useState({
        username:'',
        message:''
    })
    const { username, message } = form;
    const handleChange = e => {
        const newForm = {
            ...form, // 기존의 form을 이 자리에 복사
            [e.target.name] : e.target.value
        };
        setForm(newForm);
    }

    const handleClick = () => {
       alert(username + ': ' + message);
       console.log(form);
       setForm({
           username:'',
           message:''
       })
    };

    const handleKeyPress = e => {
        if (e.key === 'Enter'){
            handleClick();
        }
    };

    return (
        <div>
            <h1>Event Practice</h1>
            <input
                type='text'
                name='username'
                placeholder='사용자 이름'
                value={username}
                onChange={handleChange}
            />
            <input 
                type='text' 
                name='message' 
                placeholder='아무거나 입력하세요' 
                value={message}
                onChange={handleChange}
                onKeyPress={handleKeyPress}
            />
            <button onClick={handleClick}>확인</button>
        </div>
    );
}

export default EventHandling;

• view

위 프론트엔드 코드를 실행시키면 브라우저에 다음과 같은 화면이 나옵니다. 

이 코드에서는 iput이 여러개지만 실제 사용할 때 회원가입시 여러 input이 있는 경우에 그 값을 한번에 set 하기 위한 방법을 사용했습니다. 또한 엔터를 눌렀을 때, 확인 버튼을 누른 것과 같은 이벤트를 발생시키기 위해 onKeyPress 이벤트를 사용했습니다. 

---

multiple input onChange 

input에서 받을 값들을 useState를 이용하여 form 이라는 state에 담아줍니다. 

그리고 매번 form.message, form.username으로도 사용할 수 있지만 편하게 사용하기 위해서 비구조화 할당을 해줍니다. 

마지막 코드로 인해 앞으로 코드에서 form.username 대신 그냥 username으로 사용할 수 있습니다. 

...

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

const { username, message } = form;
...
    

그리고 setForm으로 넘겨줄 form은 newForm이라는 새로운 변수에 담아줍니다. 이때 `...form` 은 기존의 form 내용을 그 자리에 복사해주는 역할을 합니다. 

그리고 [e.target.name] 을 키로 하고, e.target.value를 값으로 하는 키밸류 쌍을 추가하게 됩니다. 

그리고 이 newForm을 setter 함수에 넘겨줍니다. 이 결과를 확인하기 위해 onClick 함수에 form을 콘솔로 찍게 했는데 결과는 다음과 같습니다. username에 입력한 "Seungyoon" 이, message 에 "hello"가 잘 담겨있는 것을 확인할 수 있습니다. 

▼

• key point 

이때, newForm에 담길 내용은 [e.target.name]을 키로 하는데 이는 input 컴포넌트에 name attribute에서 설정하는 것입니다. 이 값이 그대로 form에 전달되기 때문에 반드시 form 에서 설정한 key값과 동일하게 name을 설정해주어야 정확하게 전달될 수 있습니다. 

...

            <input
                type='text'
                name='username'  // **** == form.name
                placeholder='사용자 이름'
                value={username}
                onChange={handleChange}
            />
            
            <input 
                type='text' 
                name='message' // ****  == form.message
                placeholder='아무거나 입력하세요' 
                value={message}
                onChange={handleChange}
                onKeyPress={handleKeyPress}
            />

...

---

onKeyPress

keyPress 이벤트는 키를 눌렀을 때, 발생하는 이벤트 입니다. 

다음 함수는 엔터 키를 눌렀을 때, 위에서 선언한 handleClick 함수를 실행시키는 코드입니다.

    ...
    
    const handleKeyPress = e => {
        if (e.key === 'Enter'){
            handleClick();
        }
    };
    
    ...

다음과 같이 input의 onKeyPress에 위 함수를 호출하면 버튼을 누르지 않고 엔터 키를 누르는 것만으로도 버튼을 클릭한 것 과 같은 이벤트를 발생시킬 수 있습니다. 

...

            <input 
                type='text' 
                name='message' 
                placeholder='아무거나 입력하세요' 
                value={message}
                onChange={handleChange}
                onKeyPress={handleKeyPress}
            />

...

 

---

감사합니다 :)

 

---

References

• 리액트를 다루는 기술 (김민준)