[react] event handling & lifecycle ① - event

1. event?

   • 웹 상에서의 모든 행위
   • React에서 이벤트를 나타내는 prop에는 on[Event]
   • 이벤트를 처리하는 함수에는 handle[Event]\

2. 이벤트를 만드는 3단계

   1. state 만들기
   2. Handling 함수 만들기
   3. 이벤트가 발생하는 HTML 태그에서 on[Event]를 통해 handling 함수를 부른다.

   • event를 활용해 stop 버튼 만들기

         // 1단계 
         class WorldClock extends React.Component{
         constructor(props){
           super(props)
           this.state = {
             hour: this.props.time,
             minute : 0,
             stop: false,
           }
           //this.setState
           this.timer = setInterval(()=>{
             this.setState((state)=>(
               state.minute === 59?
               {hour: state.hour +1, minute : 0} :
               {minute:state.minute + 1}
     
                 ))
               },100)
             }
     
           //2단계
           handlingClick = (event) =>{
           console.log(event.target)
           this.setState({stop:event.target.value}) // 이벤트가 발생한 범위 값을 받음
           clearInterval(this.timer) //interval 종료하는 함수
     
           (코드 생략)
           // 3단계
           return(
                 <div className= "WorldClock">
                   <h2>🌎도시 : {this.props.city}</h2>
                   <p>⌚시간 : {this.state.hour} 시 {this.state.minute} 분 </p>
                   <button value={true} onClick={this.handlingClick}>멈춰!</button>
                 </div>
               )
           } 

   • textarea 변경을 감지하는 event 만들기

     우선 function 컴포넌트였던 App을 class 컴포넌트로 변경하고 render 함수에 textarea element를 추가하였음
     이후에 state > handling function > dom에서 handling function call

     class App extends React.Component {
     constructor(props){
       (내용 생략)
       //1단계
       this.state = {
         content: ''
       }
     }  
     //2단계
     handlingChange = (e) =>{
       this.setState({content: e.target.value})
     }
     render(){
         return (
            (내용 생략)
            // 3단계
               <textarea 
                 value={this.state.content}
                  onChange={this.handlingChange}
                  ></textarea>
              (내용 생략)

     크롬 확장 프로그램 react developer를 통해 개발자 도구(F12) 에서 컴포넌트와 state 등을 확인할 수 있음