[React] 리액트 onClick 이벤트 작성법과 이벤트 방식 비교

import React from 'react'

function App() {

    //ES6 문법, function clickMe() {} 와 동일
    const clickMe = () => {
        alert("클릭 성공")
    }

    function clickMe2() {
        alert("클릭 성공2")
    }

    return (
    <div>
        <button onClick={ clickMe }>클릭</button>
        <button onClick={ clickMe2 }>클릭2</button>
        <button onClick={ () => {alert("클릭성공3")} }>클릭3</button>
    </div>
    )


}

export default App

 

첫번째 두번째 버튼에는 onClick = { 함수명 } 으로 클릭 이벤트를 주었다.

상단에 함수 선언 시,

const clickMe = () => {} 와 같이 ES6문법 arrow function (화살표 함수)으로도 쓸 수 있고,

function clickMe2() {} 와 같이 기존 함수 작성 방식으로 쓸 수 있다.

 

여기서 주의할 점은 onClick={ } 에서 { }안에  함수명() 로 작성하지 않는다. ()는 "바로 실행" 하라는 의미이다. 

onClick={ 함수명() } 으로 작성 시, 화면이 렌더링 되는 시점에 해당 함수가 실행이 되어 불필요한 동작이 발생할 수 있다.

즉, onClick={ clickMe() } 가 아니라 onClick = { clickMe } 로 작성해야 한다.

 

 

세번째 버튼의 onClick={ () => {alert("클릭성공3")} } 의 경우,

따로 함수를 작성하지 않았고, {}안에 alert("클릭성공3")이라는 내용을 바로 작성했다.

클릭 이벤트가 발생하면, alert를 띄우라는 의미이다.

클릭 시 발생하는 이벤트가 간단한 내용일 경우, 이렇게 작성하는 게 보기 좋다.

 

 

 

위처럼 함수 작성법의 레퍼런스들을 보다가 문득 궁금한 점이 생겼다.

어떨 때 onClick = { () => event() }를 써야하는지,

어떨 때 onClick = { event } 로 써야하는지, 

case 별로 이유를 명확히 하고자 찾아보았다... 

 

 

 

onClick={ () => handleEvent() } 와 onClick={ handleEvent } 의 차이는 무엇일까?

두 방식 모두 onClick 이벤트 핸들러를 설정하는 방법이지만, 작동 방식이 다르다. 

 

 

1. onClick={ () => handleEvent() } 

<button onClick={() => handleEvent()}>Click Me</button>

작동 방식

1. 화살표 함수 () => handleEvent() 를 사용하여 새로운 함수를 생성하고, 이 함수를 onClick에 전달

2. 즉, 버튼을 클릭할 때마다 새로운 함수가 실행되고, 그 함수가 handleEvent() 를 호출

3. 만약 handleEvent 가 매개변수를 필요로 한다면, 이 방법을 사용해야 한다. 

 

<button onClick={() => handleEvent(10)}>Click Me</button>

위와 같이 인자를 전달하는 경우에는 반드시 화살표 함수를 사용해야 한다.

 

단점

1. 렌더링 될 때마다 새로운 함수가 생성되므로, 불필요한 렌더링 비용 발생

2. 자식 컴포넌트에 onClick 을 전달할 경우, useCallback 을 사용하지 않으면 불필요한 리렌더링 유발할 수 있음

 

 

 

 

2. onClick={ handleEvent }

<button onClick={ handleEvent }>Click Me</button>​

작동 방식

1. handleEvent 함수 자체를 onClick 에 전달함

2. 리액트는 handleEvent 함수를 클릭 이벤트가 발생했을 때 실행함

3. 즉, 새로운 함수가 매 렌더링마다 생성되지 않는다.

 

 

주의할 점

만약 onClick= { handleEvent() } 처럼 함수를 직접 실행하는 코드를 사용하면,

렌더링 시점에서 함수가 실행되므로 의도하지 않은 동작이 발생할 수 있다.

반드시 onClick= { handleEvent } 라고 작성해야 한다. (이것을 함수 참조라 한다.)

 

 

 

정리

방식	사용해야 하는 경우	주의할 점
onClick={ () => handleEvent() }	함수에 인자를 전달해야 할 때	렌더링마다 새로운 함수 실행됨
onClick={ handleEvent }	함수 실행만 필요할 때	함수 실행 코드 (handleEvent())를 직접 넣지 않도록 주의