HTML에서 이벤트 처리 방식이 첫번째와 같았다면
React에서의 이벤트 처리 방식은 두번째와 같다.
// HTML
<button onclick="handleEvent()">Event</button>
// React
<button onClick={handleEvent}>Event</button>
JavaScript
복사
React에서는 <input> <textarea> <select> 와 같은 폼(Form) 엘리먼트처럼 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트
onChange
input의 택스트가 바뀔때마다 발생하는 이벤트
이벤트가 발생하면 handleChange 함수가 작동하며 이벤트 객체에 담긴 input 값을 setState를 통해 새로운 state로 갱신
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
<h1>{name}</h1>
</div>
)
};
JavaScript
복사
onClick
사용자가 클릭 행동을 했을 때 발생하는 이벤트
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
<button onClick={alert(name)}>Button</button>
<h1>{name}</h1>
</div>
);
};
JavaScript
복사
위와 같이 onclick 이벤트에 alert 함수를 바로 호출하면 컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호추르이 결과가 onClick에 적용
따라서 onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 이벤트에 함수 자체를 전달해야함
단, 두 가지 방법 모두 arrow function을 사용해야 해당 컴포넌트가 가진 state에 함수들이 접근할 수 있다.
// 함수 정의하기
return (
<div>
...
<button onClick={() => alert(name)}>Button</button>
...
</div>
);
};
// 함수 자체를 전달하기
const handleClick = () => {
alert(name);
};
return (
<div>
...
<button onClick={handleClick}>Button</button>
...
</div>
);
};
JavaScript
복사
Select
import React, { useState } from "react";
import "./styles.css";
function SelectExample() {
const [choice, setChoice] = useState("apple");
const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
const options = fruits.map((fruit) => {
return <option value={fruit}>{fruit}</option>;
});
const handleFruit = (event) => {
// drop down 목록에서 선택된 과일로 현재의 state 가 업데이트 되도록
// 함수를 완성하세요.
setChoice(event.target.value);
};
return (
<div className="App">
<select value={choice} onChange={handleFruit}>
{/* drop down 목록을 열어 과일을 선택할 수 있도록 select tag 를 완성하세요 */}
{options}
</select>
<h3>You choose "{choice}"</h3>
</div>
);
}
export default SelectExample;
JavaScript
복사
pop up
import React, { useState } from "react";
import "./styles.css";
function App() {
const [showPopup, setShowPopup] = useState(false);
const togglePopup = () => {
// Pop up 의 open/close 상태에 따라
// 현재 state 가 업데이트
setShowPopup(showPopup ? false : true);
};
return (
<div className="App">
<h1>Fix me to open Pop Up</h1>
{/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동 */}
<button className="open" onClick={togglePopup}>Open me</button>
{showPopup ? (
<div className="popup">
<div className="popup_inner">
<h2>Success!</h2>
<button className="close" onClick={togglePopup}>
Close me
</button>
</div>
</div>
) : null}
</div>
);
}
export default App;
JavaScript
복사
input
import "./styles.css";
import React, { useState } from "react";
export default function App() {
const [username, setUsername] = useState("");
const [msg, setMsg] = useState("");
return (
<div className="App">
<div>{username}</div>
<input
type="text"
value={username}
onChange={(event) => setUsername(event.target.value)}
placeholder="여기는 인풋입니다."
className="tweetForm__input--username"
></input>
<div>{msg}</div>
{/* TODO : 위 input과 같이 입력에 따라서 msg state가 변할 수 있게
아래 textarea를 변경하세요. */}
<textarea
value={msg}
onChange={(event) => setMsg(event.target.value)}
placeholder="여기는 텍스트 영역입니다."
className="tweetForm__input--message"
></textarea>
</div>
);
}
JavaScript
복사
toggle
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
JavaScript
복사