React - 리액트를 다루는 기술(5)

4편에서 배열과 객체의 state사용법에 대해서 적을려고했는데 배열부분만 적었다. 객체 부분은 후에 좀더 react에 대해서 알고 난뒤에 적어야함 (어려움)

이번편은 이벤트 핸들링에 대한 복습이다.

이벤트 핸들링시 주의사항

본격적인 이벤트 핸들링 복습이전 주의 사항에 대해서 먼저 적어본다

1. 이벤트 이름은 카멜 표기법으로 작성
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수형태의 값을 전달할것
3. DOM 요소에만 이벤트를 설정할 수 있다.

내가 몰라서 적는 onChange와 onKeydown의 차이

• onChange와 onKeydown의 차이는 인터넷 주소창을 예를 들어 주소창을 클릭하고 주소를 적을때 onChange 이벤트는 지속적으로 input의 value가 작성되게 되고 onKeydown은 모든 작성이 끝마쳐지고 나서야 value가 작성되게 된다. 여기서 작성된다는 것 은 value에 값이 온전히 들어가는 것 을 말한다.

함수 컴포넌트로 구현한 이벤트 핸들링

import {useState} from 'react'

const EventPractice = () => {
	const [username, setUsername] = useState('');
  	const [message, setMessage] = useState('');
  	const onChangeUsername = setUsername(e.target.value)
    const onChangeMessage = setMessage(e.target.value)
    const onClick = () => {
    	alert(username + ': ' + message);
      	setUsername('');
      	setMessage('');
    }
    const onKeyPress = (e) => {
    	if(e.key === 'Enter'){
        	onClick();
        }
    }
    return (
    	<div>
      		<h1>이벤트 연습</h1>
      		<input
      		 type="text"
      		 name="username"
      		 palceholder="사용자명"
      		 value={username}
			 onChange={onChangeUsername}
			/>
             <input
      		 type="text"
      		 name="message"
      		 palceholder="아무거나 입력해 보세요"
      		 value={message}
			 onChange={onChangeMessage}
			 onKeypress={onKeyPress}
			/> 
			<button onClick={onClick}>확인</button>
      	</div>
    )
}

export default EventPractice;

위와 같이 구성된 이벤트 핸들링 컴포넌트에서 input이 2개밖에 없어서 각각
const onChangeUsername = setUsername(e.target.value)
const onChangeMessage = setMessage(e.target.value)
라는 이벤트 변수를 선언해 주었다.

하지만 e.target.name을 이용하게되면 input이 많아도 한번만 객체로 선언해주면 편하게 이용할 수 있다.

import {useState} from 'react'

const EventPractice = () => {
	const [form, setForm] = useState({
    	username: '';
      	message: '';
    })
const {username, message} = form;
  // 객체의 key인 username과 message를 비 구조화 할당 문법으로 각각 변화된 값을 넣어주는 형식으로 선언하고
const onChange = (e) => {
	const nextForm = {
			...form,
      		[e.target.name]: e.target.value
		} /* [e.target.name]은 속성 name의 값이므로 위에 선언된 
			변화된 값으로 setUsername이 아닌 username 으로
            set의 역할을 대신 하도록 하였다.
			그러므로 [e.target.name]: e.target.value는
            username: e.target.value가 된다. */
    	setForm(nextForm); //이후 input의 value를 setForm에 집어넣어 준다. 
  // + 추가로 []안에 e.target.name을 써주는 이유는 name의 값을 사용하기 위해서 이다.
	}
	const onClick = () => {
    	alert(username + ': ' + message);
      	setForm({
        	username: '',
          	message: ''
        }) // 클릭을 하고 메세지를 출력한 후 input창을 다시 비워주기 위한 함수
    }
    const onKeyPrss = (e) => {
    	if(e.key === 'Enter'){
        	onClick();
        }
    }
    return (
    	<div>
      		<h1>이벤트 연습</h1>
      		<input
      		 type="text"
      		 name="username"
      		 palceholder="사용자명"
      		 value={username}
			 onChange={onChange}
			/>
             <input
      		 type="text"
      		 name="message"
      		 palceholder="아무거나 입력해 보세요"
      		 value={message}
			 onChange={onChange}
			 onKeypress={onKeyPress}
			/>
            <button onClick={onClick}>확인</button>
      	</div>
    )
}

export default EventPractice;