React의 event handler를 알아보기전에 js와 react의 event handler 차이를 알아보자
js 는 eventListener로 주입하여 주거나
<script type="text/babel">
const btnElement = document.getElementById("btn");
console.log("btnElement", btnElement);
btnElement.addEventListener("click", () => {
alert("click");
});
</script>
<div style="margin: auto; width: 100px;">
<button id="btn">click me</button>
</div>inline 방식으로 element의 event 속성을 통해 사용한다.
<script type="text/babel">
const handleClick = () => {
alert("click");
};
</script>
<div style="margin: auto; width: 100px;">
<button id="btn" onclick="handleClick()" }>click me</button>
</div>
React도 JS와 유사하지만 Js는 소문자로된 event 속성을 가지고 on{event}
React는 camel case 형식으로된 event 속성을 가진다 on{Event}
크게 차이는 없으므로 아래의 코드를 확인해보도록하자
아래는 예제는 글자를 입력하는 동안에는 looking for... 이보이고 search를 누르면 해당 입력한 value가 result에 보여지게되며,
input box를 초기화하는 예제이다.
<body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/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: true, result: "" };
const App = () => {
const handleChange = ({ target }) => {
//change
const { name, value } = target;
setState({ keyword: value });
// alert("change");
};
const handleClick = () => {
//click 하면 looking for이 안보이고 result가 나와야함.
setState({
keyword: "",
typing: false,
result: `result : ${state.keyword}`
});
// alert("click");
};
return (
<>
<input onChange={handleChange} value={state.keyword} />
<button onClick={handleClick}>search</button>
<div>{state.typing ? "lookgin for... " : state.result}</div>
</>
);
};
const setState = (newState) => {
Object.assign(state, newState);
render();
};
const render = () => {
ReactDOM.render(<App />, rootElement);
};
render();
</script>
</body>
코드를 살펴보자면 state라는 input의 상태를 가지고 있는 객체를 만들어 함수로 핸들링하는 코드이다.
함수로는
- handleChange : input box가 변경될 경우 setState함수를 통해 state값을 변경한다.
- handleChick: button이 클릭될 경우 setState함수를 통해 state값을 변경한다.
- setState: Object.assign 함수를 통해 state의 변경된 부분을 반영하고 불변객체인 element를 rerender한다.
- render: 불변객체 특성때문에 state가 바뀌어도 화면에 값이 안바뀌는 문제를 해결하는 함수이다. state가 변경되는 부분, 화면을 처음 그릴때 호출한다.
- Object.assgin : 기존 객체의 값과 새로운 객체의 값을 비교하여 변경된 부분을 기존 객체에 반영한다.
개발자