React 이벤트 핸들러 전달

React 환경에서 이벤트 핸들러 전달 시 유의 사항

컴포넌트 인스턴스로 이벤트 핸들러 전달 시 렌더링마다 함수가 호출되지 않도록 함수를 호출하여 인스턴스로 주지 말고 함수 선언 그대로 만 인스턴스로 넘겨주어야 한다.

 

EX)

const eventHandler = () =>{

      일어날 event

}

<Component eventHandler = { eventHandler } /> // eventHandelr() 함수 호출을 하지않고 핸들러를 넘겨준다.

 

이벤트 핸들러를 props로 받은 하위 컴포넌트는 해당 이벤트 핸들러를 호출하기 위해서는 함수 호출을 진행하여야 한다.

const Component = (props) =>{

    componentEventHandelr(){

       props.eventHandelr()

    }

}

 

하위 컴포넌트에서 이벤트 발생(onClick,onChange 등) 시 이벤트 핸들러를 선언만 하여 이벤트 발생 시 이벤트 핸들러가 실행되도록 한다. 

const Component = (props) =>{

    return <button onClick = { props.eventHandler } > 이벤트 핸들러 </button>

}

 

이벤트 핸들러나 콜백에 어떻게 매개변수를 전달하는 방법은 ? 

이벤트 핸들러에 화살표 함수를 사용하여 감싼 다음에 매개변수를 넘겨줄 수 있다.

 

<button onClick={() => this.handleClick(id)} />

<button onClick={this.handleClick.bind(this, id)} /> 위와 동일

 

참고 

ko.reactjs.org/docs/faq-functions.html