EVENT(2)
-
[004] 리액트 (React) 배우기 - 함수형 컴포넌트 Event 사용(버튼 클릭, 폼 제출 이벤트 만들기)
안녕하세요~ totally 개발자입니다. Event 오늘은 함수형 컴포넌트의 이벤트, 버튼 클릭했을 때 이벤트를 만들어보도록 하겠습니다. Step 1: HelloWorldComponent.js 파일에서 7번째 줄처럼 button를 추가하고 onClick={} 형태로 적어줍니다. 여기에 바로 자바스크립트 코드를 넣어주셔도 되고 사전에 함수를 선언하여 여기에 적어주면 됩니다. 먼저 () => alert 방식으로 바로 넣어주었습니다. 버튼을 눌렀을 때 alert 메시지가 잘 나오는 것을 확인할 수 있습니다. Step 2: Step 1에서 사용했던 것처럼 그대로 onClick 안에 적어주는 것보다는 다음처럼 함수를 미리 선언한 후에 넣어주는 것을 권장합니다. Step 3: 이번에는 양식 제출(Form Submi..
2023.02.23 -
[006] 자바스크립트 (JavaScript) - 핵심요약(DOM Event)
안녕하세요~ totally 개발자입니다. DOM Event 오늘은 Event, HTML의 DOM(Document Object Model)에 대한 이벤트들을 살펴봅니다. 자바스크립트의 이벤트를 활용하여 HTML에서 사용자가 DOM 요소에 어떤 행동을 했을 때 다양한 액션 행동들을 구현할 수 있습니다. 대표적인 예로, 버튼을 클릭했을 때 팝업창을 띄우는 행위 등이 있습니다. HTML DOM에 대해서 기본적인 이해가 필요합니다. DOM이란 Document Object Model의 약자로서, 웹페이지의 로드가 완료되면, 브라우저는 그 페이지의 Document Object Model를 생성하게 됩니다. 이 HTML DOM은 객체들의 트리로 구성되어지며 자바스크립트가 바로 이 DOM을 이용하여 HTML의 요소들을 ..
2022.11.01