React에서 event handling 하는 법 정리

React element 이벤트 핸들링 기본

• React에서 events 이름은 반드시 camelCase를 사용해야 한다.
• React에서 event handler는 JSX형태로 함수를 표기한다.

// 기존 DOM element에서 사용하는 방법
<button onclick="activeLasers()">
  Activate Lasers
</button>

// React에서 사용하는 방법
<button onClick={activateLasers}>
  Activate Lasers
</button>

onClick와 같이 camelCase로 이벤트 이름을 설정하고, event handler의 연결은 JSX 표기인 {  }을 사용하고 있다.

anonymous 형태의 arrow function 사용하기

function LocalStorage() {
    const handleGetKeyWord = (e) => {
        debounce(() => {
            console.log(e.target.value)  
        },1000)
    }

    return(
        <Fragment>
            <Input.Search 
              size="large" 
              placeholder="Search here" 
              enterButton 
              style={{ marginBottom: 10 }}
              onKeyUp={() => {handleGetKeyWord()}} 
            />
        </Fragment> 
    )
}

onKeyUp에서 익명함수를 사용 할 경우 추가 리렌더링을 수행 할 수 있다.

 

코드를 실행하면 아래와 같은 오류가 발생한다.

TypeError: Cannot read property 'target' of undefined

 

값을 전달하지 않고 단순히 함수를 호출하기에 발생하는 오류이다.

그러므로 이벤트 핸들러를 바인딩 하기 위해서 아래와 같이 코드를 수정한다.

function LocalStorage() {
    const handleGetKeyWord = (e) => {
        debounce(() => {
            console.log(e.target.value)  
        },1000)
    }

    return(
        <Fragment>
            <Input.Search 
              size="large" 
              placeholder="Search here" 
              enterButton 
              style={{ marginBottom: 10 }}
              onKeyUp={handleGetKeyWord} 
            />
        </Fragment> 
    )
}

handleGetKeyWord는 이벤트 핸들러에 바인딩이 되고, keyup이 일어날 때 handleGetKeyWord는 이제 e.target.value를 확인 할 수 있다.