리액트 이벤트 핸들러
<!DOCTYPE html>
<html lang="en">
<body>
/* 리액트 CDN 불러오기 및 Babel 불러오기는 생략함 */
<script type="text/babel">
const rootElement = document.getElementById("root");
/* state라고 하는 객체를 생성함 */
const state = { keyword: "", typing: false, result: "" };
/* App이라는 element를 만들어줌. */
const App = () => {
/* onChange 함수가 하는일 : setState함수를 실행. 인자로 typing과 keyword를 전달 */
function handleChange(event) {
setState({ typing: true, keyword: event.target.value });
}
/* onClick 함수가 하는일 : setState함수를 실행. 인자로 typing과 result를 전달 */
function handleClick() {
setState({
typing: false,
result: `we find results of ${state.keyword} `
});
}
/* element를 return 하는 부분 */
return (
<>
<input onChange={handleChange} />
<button onClick={handleClick}>search</button>
<p>
/* typing이 true (타이핑 할때) 면 Looking for ${state.keyword}..... 을 보여준다. */
/* typing이 false (클릭을 할때) 면 state.result를 보여준다. */
{state.typing
? `Looking for ${state.keyword}.....`
: state.result}
</p>
</>
);
};
/* setState함수의 역할 : newState를 인자로 받아서 기존 state를 newState로 덮어씌워주고 렌더를 한번 실행한다. */
function setState(newState) {
Object.assign(state, newState);
render();
}
/* render함수의 역할 : <App />을 한번 그려준다. */
function render() {
ReactDOM.render(<App />, rootElement);
}
render();
</script>
</body>
</html>
- 리액트의 setState가 어떻게 동작하는지
Object.assign을 이용해서 기존 state를 어떻게 대체해주는지- setState라는 함수에서는
render()를 실행한다. render()는 돔을 한번 그리는 함수로 빼주고 마지막에 한번더 그려준다.
object.assgin는 어떻게 동작하는지 알아보자!
Author And Source
이 문제에 관하여(리액트 이벤트 핸들러), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kokyusik91/리액트-이벤트-핸들러저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
