이벤트 처리하기

• 이벤트명 짓기 : 보통 handle로 시작 ex) handle. onClick={handleClick}, onMouseEnter={handleMouseEnter}
  
• 이벤트 작성법
  • props
    • 주의 사항 호출되는 것 X, 전달되어야하는 것
      

- 인라인
    - 주의 사항
        
        
        잘못된 방식으로 작성하면 클릭 시 실행되지 않고 component가 렌더링 될 때 마다 실행
        
        ```jsx
        // 클릭시 실행
        <button onClick={() => alert('You clicked me!')}>
           inline
        </button>
        
        // 렌더링 될 때 마다 실행
        <button onClick={alert('You clicked me!')}>
            inline
        </button>
        ```
        
- 화살표 함수
    
    ```jsx
    import React from 'react'
    
    function handleClick(){
      alert('You clicked me!')
    }
    
    function App() {
      return (
        <>
          {/* props로 작성하기 */}
          <button onClick={handleClick}>
            Click me
          </button>
    
          {/* 
            인라인으로 작성하기 
            짧은 함수에 편리
          */}
          <button onClick={function handleClick() {
            alert('You clicked me!');
          }}>
            inline
          </button>
    
          {/* 화살표 함수로 작성하기 */}
          <button onClick={()=>{
            alert('You clicked me!');
          }}>
            arrow
          </button>
        </>
      )
    }
    
    export default App
    ```
    

• 이벤트를 props로 전달, props 이름 정의

  import React from 'react'
  
  function App() {
    return (
      <Toolbar
        onPlayMovie={()=>alert('Play')}
        onUploadImage={()=>alert('Upload')}
      />
    )
  }
  
  export default App
  
  function Toolbar({onPlayMovie, onUploadImage}){
    return(
      <>
        <Button onClick={onPlayMovie}>Play</Button>
        <Button onClick={onUploadImage}>Upload</Button>
      </>
    )
  }
  
  function Button({onClick, children}){
    return (
      <button onClick={onClick}>
        {children}
      </button>
    )
  }

• 이벤트 전파

  해당 이벤트가 먼저 실행된 다음 상위 이벤트 실행

  export default function Toolbar() {
    return (
      <div className="Toolbar" onClick={() => {
        alert('You clicked on the toolbar!');
      }}>
        <button onClick={() => alert('Playing!')}>
          Play Movie
        </button>
  			 // 버튼 클릭시 'You clicked on the toolbar!, 'Playing!' 2개 나옴
        <button onClick={() => alert('Uploading!')}>
          Upload Image
        </button>
      </div>
    );
  }

• 이벤트 전파 중지 e.stopPropagation( );

  e.stopPropagation( );

  • 하위 component 전체 이벤트 전파 중지

    import React from 'react'
    
    function Button({onClick, children}){
      return (
        <button onClick={e=>{
          e.stopPropagation();
          // 이벤트 전파 중지
          onClick();
        }}>
          {children}
        </button>
      )
    }
    function App() {
      return (
        <div className="Toolbar" onClick={()=>{
          alert('You clicked on the toolbar')
        }}>
          <Button onClick={()=>alert('Playing!')}>
            Play Movie
          </Button>
          <Button onClick={()=>alert('Uploading!')}>
            Upload Image
          </Button>
        </div>
      )
    }
    
    export default App

  • 일부 태그 이벤트 전파 중지

    import React from 'react'
    function App() {
      return (
        <div className="Toolbar" onClick={()=>{
          alert('You clicked on the toolbar')
        }}>
          <button onClick={e => {e.stopPropagation()}}>
            Play Movie
          </button>
          <button onClick={()=>alert('Uploading!')}>
            Upload Image
          </button>
        </div>
      )
    }
    
    export default App

• 브라우저 기본 동작 방지 (브라우저 기본 동작 때문에 초기화 되는 부분 방지!)

  버튼을 클릭하면 input 안에 작성한 내용이 날아감

  e.preventDefault( ) 이벤트를 사용하면 이러한 일이 발생하지 x

  e.stopPropagation()

  위 태그에 연결된 이벤트 핸들러의 실행을 중지

  e.preventDefault()

  이벤트에 대한 기본 브라우저 동작을 방지

  • 예시

    export default function Signup() {
      return (
        <form onSubmit={() => alert('Submitting!')}>
          <input />
          <button>Send</button>
        </form>
      );
    }
    // 버튼을 클릭하면 input 안에 작성한 내용이 날아감

    export default function Signup() {
      return (
        <form onSubmit={e => {
          e.preventDefault();
          alert('Submitting!');
        }}>
          <input />
          <button>Send</button>
        </form>
      );
    }
    // 버튼을 클릭하면 작성한 내용이 날라가지 않음

  • 예시 02

    function Form() {
      function handleSubmit(e) {
        e.preventDefault();
    		console.log('You clicked submit.');
      }
    
      return (
        <form onSubmit={handleSubmit}>      
    				<button type="submit">Submit</button>
    		</form>);
    }

• 예시

  • 경고창 띄워주기 (props로 넘겨주는건 메시지 내용, 버튼 텍스트)

    import React from 'react'
    
    function AlertButton({message, children}){
      return (
        <button onClick={()=> alert(message)}>
          {children}
        </button>
      )
    }
    function App() {
      return (
        <>
          <AlertButton message="Playing!">
            Play Movie
          </AlertButton>
          <AlertButton message="Uploading!">
            Upload Image
          </AlertButton>
        </>
      )
    }
    
    export default App

  • 토글 버튼 (배경 색상 변경하기 )

      import React, { Component } from 'react'
    
      function handleClick(){
        let bodyStyle = document.body.style;
        if (bodyStyle.backgroundColor === 'black') {
          bodyStyle.backgroundColor = 'white'
        } else {
          bodyStyle.backgroundColor = 'black'
        }
      }
    
      export class App extends Component {
        render() {
          return (
            <button onClick={handleClick}>
              Toggle the lights
            </button>
          )
        }
      }
    
      export default App