728x90
반응형
이 글은 [리액트를 다루는 기술](저자 김민준, 출판사 길벗) 교재를 보고 공부하며 정리한 글임.
일단 html 파일에서는 이벤트를 실행하면
" " 사이에 있는 자바 스크립트를 실행하도록 함
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button onClick="alert('executed')">
Click Me
</button>
</body>
</html>
그럼 리액트 에서는?
EventPractice.js
import React, {Component}from 'react';
class EventPractice extends Component{
render(){
return (
<div>
<h1>이벤트 연습</h1>
</div>
);
}
}
export default EventPractice;App.js
import React from 'react';
import EventPractice from './EventPractice';
const App =() => {
return <EventPractice />;
};
export default App;
import React, {Component}from 'react';
class EventPractice extends Component{
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
onChange={
(e) => {
console.log(e);
}
}
/>
</div>
);
}
}
export default EventPractice;e 객체는 SyntheticEvent 로 네이티브 이벤트와달리 이벤트가 끝나면 이벤트가 초기화됨
다음과 같이 코드를 수정하면 값이 바뀔때마다 바뀌는 값을 콘솔에 기록한다
import React, {Component}from 'react';
class EventPractice extends Component{
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
onChange={
(e) => {
console.log(e.target.value);
}
}
/>
</div>
);
}
}
export default EventPractice;state에 input 담기
import React, {Component}from 'react';
class EventPractice extends Component{
state = {
message: ''
}
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
value={this.state.message}
onChange={
(e) => {
this.setState({
message: e.target.value
})
}
}
/>
</div>
);
}
}
export default EventPractice;버튼을 누를 때 comment 를 메시지박스로 띄우고 comment 값을 공백으로 설정
import React, {Component}from 'react';
class EventPractice extends Component{
state = {
message: ''
}
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
value={this.state.message}
onChange={
(e) => {
this.setState({
message: e.target.value
})
}
}
/>
<button onClick={
()=>{
alert(this.state.message);
this.setState({
message: ''
});
}
}>확인</button>
</div>
);
}
}
export default EventPractice;onChange 와 onClick 에 전달한 함수를 따로 빼내서 컴포넌트 임의 메서드 만들기
import React, {Component}from 'react';
class EventPractice extends Component{
state = {
message: ''
}
constructor(props){
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleChange(e){
this.setState({
message:e.target.value
});
}
handleClick(){
alert(this.state.message);
this.setState({
message: ''
});
}
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}
export default EventPractice;새 메서드를 만들때마다 constructor도 수정하는게 불편할 수도 있음
화살표 함수 형태로 나타낼수도 있는데
import React, {Component}from 'react';
class EventPractice extends Component{
state = {
message: ''
}
handleChange=(e) => {
this.setState({
message:e.target.value
});
}
handleClick=() => {
alert(this.state.message);
this.setState({
message:''
});
}
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}
export default EventPractice;이러면 더 깔끔하다
input이 여러개인 경우
event 객체를 활용한다
e.target.name 값을 사용
import React, {Component}from 'react';
class EventPractice extends Component{
state = {
username:'',
message: ''
}
handleChange=(e) => {
this.setState({
[e.target.name]: e.target.value
});
}
handleClick=() => {
alert(this.state.username + ': ' + this.state.message);
this.setState({
username:'',
message:''
});
}
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username"
placeholder="사용자명"
value={this.state.username}
onChange={this.handleChange}
/>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
value={this.state.message}
onChange={this.handleChange}
/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}
export default EventPractice;onKeyPress 이벤트 핸들링
comment 인풋에서 엔터키 눌렀을 때 handleClick 메서드 호출되도록
import React, {Component}from 'react';
class EventPractice extends Component{
state = {
username:'',
message: ''
}
handleChange=(e) => {
this.setState({
[e.target.name]: e.target.value
});
}
handleClick=() => {
alert(this.state.username + ': ' + this.state.message);
this.setState({
username:'',
message:''
});
}
handleKeyPress =(e)=> {
if(e.key === 'Enter'){
this.handleClick();
}
}
render(){
return (
<div>
<h1>이벤트 연습</h1>
<input
type="text"
name="username"
placeholder="사용자명"
value={this.state.username}
onChange={this.handleChange}
/>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
value={this.state.message}
onChange={this.handleChange}
onKeyPress={this.handleKeyPress}
/>
<button onClick={this.handleClick}>확인</button>
</div>
);
}
}
export default EventPractice;방금 했던거 함수형 컴포넌트로 구현하기
import React, {useState} from 'react';
const EventPractice=()=>{
const[username, setUsername]=useState('');
const[message, setMessage]=useState('');
const onChangeUsername =e => setUsername(e.target.value);
const onChangeMessage = e => setMessage(e.tartget.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"
placeholder="사용자명"
value={username}
onChange={onChangeUsername}
/>
<input
type="text"
name="message"
placeholder="아무거나 입력하세요"
value={message}
onChange={onChangeMessage}
onKeyPress={onKeyPress}
/>
<button onClick={onClick}>확인</button>
</div>
);
};
export default EventPractice;이번에는 useState를 통해 문자열이 아닌 객체 넣기
import React, {useState} from 'react';
const EventPractice=()=>{
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 (
<div>
<h1>이벤트 연습</h1>
<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>
</div>
);
};
export default EventPractice;e.target.name 값을 활용하려면 위처럼 useState 쓸때 인풋값 있는 form 객체 쓰면 됨
으악
728x90
반응형
