바닐라 자바스크립트 핸들링
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
</body>
<script>
const button = document.getElementById("button");
button.addEventListener("mouseout", () => alert("bye"));
button.addEventListener("click", () =>{
alert("press");
})
</script>
</html>-
인라인으로 이벤트를 주고 addEventListener를 주어 두개를 넣는다면 두개 다 동작 하는 것을 알 수 있다.
-
리액트에서의 이벤트 정의는 카멜 케이스로 하여야 함.
-
기본 문장
- on Click -
카멜 케이스
- onClick -
파스칼 케이스
- on-Click -
스네이크 케이스
- on_click
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const element = <button onClick={()=>alert("123")}>Press</button>;
ReactDOM.render(element,rootElement);
</script>
</body>
</html>- 위 버튼 클릭 코드를 아래처럼 바꿀 수 있다.
<script type="text/babel">
const rootElement = document.getElementById("root");
const handleClick = ()=>{
alert("123");
}
const element = <button onClick={handleClick}>Press</button>;
ReactDOM.render(element,rootElement);
</script>input과 버튼으로 input값 관리 해보기
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@16.7.0/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const state = {keyword:"", typing:false, result:""};
const App = () => {
function handleChange(event){
setState({typing: true, keyword:event.target.value});
}
function handleClick(event){
setState({
typing: false,
result: `we find results of ${state.keyword}`
})
}
return (
<>
<input onChange={handleChange}/>
<button onClick={handleClick}>search</button>
<p>
{state.typing ? `Looking for ${state.keyword}...` : state.result}
</p>
</>
)
}
function setState(newState){
Object.assign(state, newState);
render();
}
function render (){
ReactDOM.render(<App />,rootElement);
}
render();
</script>
</body>
</html>
-
위 코드는 처음에는 p 태그에 아무것도 보이지 않다가 textbox에 입력 시 Looking for{Text}입력값이 보이다가 클릭 시 에는
we find results of ${state.keyword}가 보이게 된다. -
object.assgin은 앞에 오브젝트 있는 값에 새로운 값을 넣을껀대 바뀐 것으로 덮어준다.
풋살을 좋아하는 프론트엔드 개발자