![react](https://tistory1.daumcdn.net/tistory/4365896/skin/images/react-logo.png)
목록📖 이벤트 (2)
즐겁게, 코드
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/d6I483/btq2HIjIksx/bKkv2ErkIyvL7cosKevmQ1/img.png)
솔리디티는 DAPP(탈중앙화 어플리케이션)의 로직을 담당하는데요, 어떻게 트랜잭션 내역과 계약 내용을 화면에 보여줄까요? 맞습니다! 바로 프론트엔드단이 별도로 필요한데요, 프론트엔드에 데이터를 넘겨주기 위해 이벤트를 활용합니다. 이벤트는 event 키워드로 선언할 수 있으며, 이벤트는 자바의 인터페이스처럼 본문을 구현하지 않습니다. [솔리디티 예시 코드] // onNewTransaction 이라는 이벤트를 정의합니다. event onNewTransaction(uint id, uint data); function add(uint id, uint data) public returns (uint) { // add 함수가 실행되면 onNewTransaction 이벤트가 호출됩니다. onNewTransaction..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cxOQiX/btqR3SKUIGq/GfTS0kEvT7lhXJ2KlReJT0/img.png)
이벤트는 화면에 커서를 올리거나 클릭, 키보드를 조작하는 등 사용자가 행하는 모든 동작을 의미한다. 오늘은 버블링과 캡처링으로 대표되는 이벤트의 동작 흐름에 대해 알아보자. [사용할 예제 파일] const parent = document.querySelector(".parent"); parent.addEventListener("click", (e) => { parent.style.backgroundColor = "black"; }); 위 코드는 parent 클래스명을 가진 요소를 클릭하는 이벤트가 발생할 시 배경을 검정색으로 변경한다. addEventListener로 이벤트 리스너를 추가하는 것은 대부분 알고 있겠지만 앞으로 소개할 내용들은 꽤나 생소한 개념일 것이다. 1. 이벤트의 버블링 const g..