7-1. Event System
- 웹 브라우저 HTML 이벤트와 인터페이스가 동일하기 때문에 사용 방법이 유사.
- 유의사항
- 이벤트 속성의 이름은 카멜 표기법으로 작성
- 이벤트에 실행할 자바스크립트의 코드를 전달하는 것이 아닌 함수 형태의 값을 전달
예시)
HTML => <button onclick="alert('hello world')>클릭</button> REACT => <button onClick={() => alert('hello world')>클릭</button>- DOM 요소에만 이벤트 설정 가능(컴포넌트에는 이벤트 설정 불가)
- 만약 컴포넌트에 onclick 속성을 두고 이벤트 함수를 전달한다면 이벤트로 전달되는 것이 아니라 onClick이라는 props를 전달.
- props로 전달 된 이벤트를 내부의 DOM 이벤트로 설정할 수는 있음
class EventButton extends React.Component {
/* 1. 직접 이벤트 속성에 함수를 정의하며 이벤트 연결 */
// render(){
// return (
// <button onClick={ () => alert('인라인 함수 이벤트 동작 확인')}>
// {this.props.children}
// </button>
// );
// }
// }
/* 2. render 함수 외부에 이벤트 함수 정의 후 함수를 전달하여 이벤트를 연결 */
// onClickHandler = () => { alert('외부 함수 이벤트 동작 확인'); };
// render(){
// return (
// <button onClick = { onClickHandler }>{this.props.children}</button>
// )
// }
/* 3. 컴포넌트에 이벤트 전달 후 연결한다. */
render(){
const{ onClick, children } = this.props;
return <button onClick={onClick}>{children}</button>
}
}
ReactDOM.createRoot(document.getElementById('root')).render(
// 1~2 번 테스트용
//EventButton> 이벤트 버튼 </EventButton>
// 3번 테스트용
<EventButton
onClick ={ () => alert('props로 이벤트 전달 후 연결 확인!')}
>
이벤트 버튼
</EventButton>
);7-2. Event Handling
class EventComponent extends React.Component {
state = {
message : ''
};
render() {
return (
<>
<h1>이벤트 핸들링</h1>
<input
type="text"
name="message"
placeholder="텍스트를 입력해주세요"
onChange={
(e) => {
/* 이벤트 핸들러 함수의 첫번째 인자는 이벤트 객체
e.target : 이벤트 발생 대상 객체
e.target.value : input에 입력 된 값 */
console.log(e);
console.log(e.target);
console.log(e.target.value);
this.setState({
message : e.target.value
})
}
}
value={ this.state.message }
/>
<button
onClick={
() => {
alert(this.state.message);
/* 메세지 상태 값이 지워지도록 추가 */
this.setState({
message : ''
});
}
}
>
확인
</button>
</>
);
}
}
ReactDOM.createRoot(document.getElementById('root')).render(<EventComponent/>);7-3. Multiple Event Handler
/* 여러 개의 input 태그 이벤트 다루기 */
class LoginComponent extends React.Component{
state = {
username : '',
password : ''
};
onChangeHandler = (e) => {
/* 이벤트가 발생한 태그의 name 속성 값을 key 값으로 하여 변경할 state 객체를 생성한다.
동일한 key 값을 가진 state 객체만 업데이트 한다. */
this.setState({ [e.target.name] : e.target.value });
};
onClickHandler = (e) => {
alert(`username : ${this.state.username}\npassword : ${this.state.password}`);
this.setState({username : '', password : ''});
};
render(){
return(
<div>
<h1>로그인</h1>
<label>아이디 : </label>
<input
type="text"
name="username"
placeholder="아이디를 입력하세요"
value={ this.state.username }
onChange = { this.onChangeHandler }
/>
<br/>
<label>비밀번호 : </label>
<input
type="text"
name="password"
placeholder="비밀번호를 입력하세요"
value = { this.state.password }
onChange = { this.onChangeHandler }
/>
<button
onClick={this.onClickHandler}
>로그인</button>
</div>
)
}
}
ReactDOM.createRoot(document.getElementById('root')).render(<LoginComponent/>);7-4. Function Component
const {useState} = React;
function LoginComponent(){
const [username, setUsername ] = useState('');
const [password, setPassword ] = useState('');
const onChangeUsername = e => setUsername(e.target.value);
const onChangePassword = e => setPassword(e.target.value);
const onClickHandler = () => {
alert(`username : ${username}\n password : ${password}`);
setUsername('');
setPassword('');
}
return(
<div>
<h1>로그인</h1>
<label>아이디 : </label>
<input
type="text"
name="username"
placeholder="아이디를 입력하세요"
value ={ username }
onChange = {onChangeUsername}
/>
<br/>
<label>비밀번호 : </label>
<input
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
value = { password }
onChange = {onChangePassword}
/>
<button
onClick = {onClickHandler}
>로그인</button>
</div>
)
}
ReactDOM.createRoot(document.getElementById('root')).render(<LoginComponent/>);7-5. Multiple Function Component Event Handling
const {useState} = React;
function LoginComponent(){
const [username, setUsername ] = useState('');
const [password, setPassword ] = useState('');
const onChangeUsername = e => setUsername(e.target.value);
const onChangePassword = e => setPassword(e.target.value);
const onClickHandler = () => {
alert(`username : ${username}\n password : ${password}`);
setUsername('');
setPassword('');
}
return(
<div>
<h1>로그인</h1>
<label>아이디 : </label>
<input
type="text"
name="username"
placeholder="아이디를 입력하세요"
value ={ username }
onChange = {onChangeUsername}
/>
<br/>
<label>비밀번호 : </label>
<input
type="password"
name="password"
placeholder="비밀번호를 입력하세요"
value = { password }
onChange = {onChangePassword}
/>
<button
onClick = {onClickHandler}
>로그인</button>
</div>
)
}
ReactDOM.createRoot(document.getElementById('root')).render(<LoginComponent/>);
DREAM STARTER