Event, Event Handling

이벤트란 간단히 웹 상에서 일어나는 모든 행위를 말합니다.

버튼을 누른다든지,무언가를 입력한다든지 등등을 통해 인터랙션을 발생시키는 이벤트!

 

크롬의 Inspect>sources에서 EventListener Breakpoint로 확인할수 있지~!

이런 이벤트가 발생하는것을 듣기 위해서는 이벤트 리스너를 두고 이벤트 발생시 리스너가 이를 알아차리면

다음 인터랙션이 일어나도록 이벤트 핸들링을 만든다.

 

이벤트 리스너는 On+(이벤트행위이름)이런식으로 만든다.

다음은 간단한 자바스크립트 문법만으로 EventListener를 사용하는 예제이다.

document에 onclick()리스너를 부착해 아무데나 클릭할 시 "DOCUMENT CLICKED"가 출력되게 하였고,

동영상을 getElementsByTagName()으로 가져오고 이 동영상에 마우스를 둘 시 시간을 출력하게 하였다.

이러한 EventListner를 React에서는 어떻게 구현하는지 알아보자~!

 

React에서 Event 다루기

웹에서는 인터랙션.즉 Event가 아주 중요한 개념이다. 리액트에서는 이벤트와 Input을 어떻게 처리하는지 알아보자.

이에 앞서 App컴포넌트를 클래스형으로 바꾸어 보았다. React.Component를 상속하였고 생성자에 props를 받아 super에 전달하고 데이터 선언. render()에 JSX로 return할 태그들 정리하기.

 

 

 

 

 

 

 

 

 

 

여기에 state를 변화시키는 event를 둘 것이다. 간단히 event를 이용하는 순서는 다음과 같다.

//EventHandling
1.state를 만든다
2.Handling함수를 만든다
3.이벤트가 발생하는 HTML태그에서 onEvent명을 통해 handling함수를 부른다.

*단계1이 생략될수 있다(props만으로 가능할 때)

위의 순서에 따라 app컴포넌트에 적용시켜 보았다. 목표는 {'post'}내에 글을 쓸 수 있는 textarea만들고 입력시 값이 변하도록 하기!

1.constructor안에 this.state로 state를  만들고

 

2.event를 인자로 받는 handlingChange함수를 만들었다.(이때 꼭 arrow function으로 만들어야 하는데 bind(this)를 피하기 위해서 이다.)

-setState를 사용한다

-이벤트 발생시 이 함수가 이를 받는다

-이벤트가 들어오는 방법   :event.target.value

 

3.마지막으로 JSX로 <textarea>태그 내에 onChange attribute에 2에서 작성한 함수를 호출하도록 하였다.

 

 

 

 

같은 방법으로 이번엔  버튼을 누르면 <WorldClock>컴포넌트가 모두 사라지도록 이벤트를 만들어보자.

1.state를 constructor안에 만든다.여기선 bool형 stop을 두었다.

 

2.Event핸들링 함수를 만든다. handlingClick을 선언하였다.

 

3.JSX로 렌더링 되도록 버튼을 만들고 이벤트핸들링함수를 연결하였다.