Event Handling
2022, Mar 03
Event Handling
- React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다.
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.
- React에서는 false를 반환해도 기본 동작을 방지 할 수 없다.
HTML
<form onsubmit="console.log('You clicked submit.'); return false">
<button type="submit">Submit</button>
</form>
React
const Form = () => {
//submit 이벤트를 처리할 핸들러(담당자)작성
const submitHandler = (event) => {
event.preventDefault(); // form의 기본동작(reloading)을 제어하기 위한 코드
console.log('you clicked submit');
};
return (
<form onSubmit={submitHandler}>
<button type="submit">Submit</button>
</form>
)
}
- React는 addEventListener를 호출할 필요가 없다. (단, 엘리먼트가 처음 렌더링 될 때 리스너를 제공하면 된다.)
<div id="root"></div>
<script type="text/babel">
const ButtonTest = () => {
const {useState} = React;
const [isToggle, setIsToggle] = useState(false);
const clickHandler = () => {
setIsToggle(!isToggle);
};
return(
<button onClick={clickHandler}>{isToggle? 'CLICK':'NON'}</button>
)
}
ReactDOM.render(
<ButtonTest/>,
document.getElementById('root')
);
</script>
- 사진까지 넣어보기
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
const Toggle = () => {
// 초기값 false
const [isToggleOn, setIsToggleOn] = useState(false);
// click 이벤트 발생시 처리를 담당할 Handler(담당자)
const clickHandler = () => {
// console.log('button clicked');
// True -> False , False -> True
setIsToggleOn(!isToggleOn);
};
// 소괄호는 코드를 깔끔하게 보기 위함
return (
// React.Fragment : 여러 줄을 한번에 쓰기 위해 div를 대체했음
// <> : React.Fragment도 생략
<>
<img src={isToggleOn ? 'pic_bulbon.gif' : 'pic_bulboff.gif'} />
<button onClick={clickHandler}>{isToggleOn ? 'OFF' : 'ON'}</button>
</>
)
};
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);