[리액트] 리액트에서 이벤트 처리 (자주 사용하는 이벤트 핸들러 5가지)

1. 마우스 이벤트 onClick과 인자 전달

👉 onClick: 클릭하면 특정 함수가 실행되도록 하는 이벤트 핸들러

예시1)

onClick 핸들러가 실행될때 즉 해당 요소를 클릭했을때 changeText라는 함수가 실행된다

import React from 'react'
import { useState } from 'react'

const Click = () => {
  const [text, setText] = useState('Hello')

  const changeText = () => {
    setText('Bye')
  }

  return (
    <>
      <div>{ text }</div>
      <button onClick={changeText}>클릭</button>
    </>
  )
}

export default Click

예시2)

전달해주고싶은 인자가 있는 경우 화살표 함수를 핸들러에 바인딩한 후 인자로 넘겨준다

import React from 'react'
import { useState } from 'react'

const Click = () => {
  const [text, setText] = useState('Hello')

  const changeText = (newText) => {
    setText(newText)
  }

  return (
    <>
      <div>{ text }</div>
      <button onClick={() => changeText('Bye')}>클릭</button>
    </>
  )
}

export default Click

 

2. 폼 이벤트 onChange 와 event

👉 onChange: 폼 내부 내용(value)이 바뀌면 특정 함수가 실행되도록 하는 이벤트 핸들러

예시)

1. input 태그에 있는 onChange 핸들러는 요소 내부 내용이 바뀔 때 실행될 함수를 지정할 수 있다
2. 즉 input 태그에 어떤 값이 입력되면 onChange 핸들러에 연결된 함수가 실행된다
3. 이때 연결된 함수에서 input에 입력된 값을 event 인자를 통해 받을 수 있다
4. e.target.value는 input 요소에 입력된 value를 의미한다
   • e.target: 현재 해당 이벤트가 일어난 요소
   • value:  해당 요소 내부의 value 값

import React from 'react'
import { useState } from 'react'

const Change = () => {
  const [text, setText] = useState('')

  const getValue = (e) => {
    setText(e.target.value)
  }

  return (
    <>
      <input type="text" onChange={getValue} />
      <div>{ text }</div>
    </>
  )
}

export default Change

 

3. 폼 이벤트  onFocus와 onBlur

👉 onFocus: 폼에 포커싱되면 특정 함수가 실행되도록 하는 이벤트 핸들러

예시)

onFocus 핸들러가 실행될때 즉 해당 폼 요소에 포커싱이 될때 text 스테이트가 업데이트되면서 'input에 focus되었습니다!' 라는 텍스트가 출력된다

import React from 'react'
import { useState } from 'react'

const Focus = () => {
  const [text, setText] = useState('')

  const focusHandler = () => {
    setText('input에 focus되었습니다!')
  }

  return (
    <>
      <input type="text" onFocus={focusHandler} />
      <div>{ text }</div>
    </>
  )
}

export default Focus

👉 onBlur: 폼에 포커스가 풀렸을때 특정 함수가 실행되도록 하는 이벤트 핸들러

예시)

onBlur 핸들러가 실행될때 즉 해당 폼 요소에 포커싱이 해지될때 text 스테이트가 업데이트되면서 'input에 focus가 해지되었습니다!' 라는 텍스트가 출력된다

import React from 'react'
import { useState } from 'react'

const Blur = () => {
  const [text, setText] = useState('')

  const blurHandler = () => {
    setText('input에 focus가 해지되었습니다!')
  }

  return (
    <>
      <input type="text" autoFocus onBlur={blurHandler} />
      <div>{ text }</div>
    </>
  )
}

export default Blur

 

4. 키보드 이벤트 onKeyDown

👉 onKeyDown: 키보드 키가 눌렸을때 특정 함수가 실행되도록 하는 이벤트 핸들러 (onKeyPress보다 onKeyDown 사용이 더 권장된다)

예시)

1. input 태그에 있는 onKeydown 핸들러는 폼요소에서 키보드가 입력되었을대 실행될 함수를 지정할 수 있다
2. 즉 input 태그에 키보드로 어떤 값이 입력되면 onKeydown 핸들러에 연결된 함수가 실행된다
3. 이때 연결된 함수에서 어떤 key가 눌렸는지 event 인자를 통해 받을 수 있다
4. e.key는 input 요소에 입력된 키보드의 키를 의미한다

import React from 'react'
import { useState } from 'react'

const Keydown = () => {
  const [keyName, setKeyName] = useState('')

  const keydownHandler = (e) => {
    setKeyName(e.key)
  }

  return (
    <>
      <input type="text" onKeyDown={keydownHandler} />
      <div>event trrigered: {keyName}</div>
    </>
  )
}

export default Keydown