728x90
이벤트 핸들러에 인자 전달하기
루프 내부에서는 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적이다.
예를 들어, id가 행의 ID일 경우 다음 코드가 모두 작동한다.
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
위 두 줄은 동등하며 각각 화살표 함수와 Function.prototype.bind를 사용한다.
두 경우 모두 React 이벤트를 나타내는 e 인자가 ID 뒤에 두 번째 인자로 전달된다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind를 사용할 경우 추가 인자가 자동으로 전달된다.
'Framework | Library > React.js' 카테고리의 다른 글
[React] event handling 하는 법 (0) | 2022.07.12 |
---|---|
[React] Virtual DOM(VDOM)과 Diffing 알고리즘 (0) | 2022.07.12 |
[React] React hooks - useReducer (0) | 2022.07.12 |
[React] props (0) | 2022.07.11 |