[React] onClick={handleClick}와 onClick={handleClick()}의 차이

리액트를 공부하면서 아래 코드처럼 작성했을 때,

페이지가 열리자마자 함수가 바로 실행되거나, 버튼을 눌러도 아무 동작이 일어나지 않는 경우가 있었다.

이번 글에선 왜 그런지에 대해 정리 할 예정이다.

<button onClick={handleLogin()}>
    로그인
</button>

---

React 이벤트 속성은 함수를 실행하는것이 아니라 함수를 전달하는것이다

※ 이벤트 속성 = onClick, onChange

아래와 같은 함수가 있을때, 버튼을 눌렀을때만 해당 함수가 실행되도록 하고싶다.

function handleLogin() {
    console.log("로그인")
}

 

 

함수를 실행하기 위해선 React에게는 함수 자체를 전달해줘야한다.

<button onClick={handleLogin}>
    로그인
</button>

handleLogin은 실행된 결과가 아닌 함수 자체를 의미한다.

React는 전달받은 함수를 이벤트 핸들러로 등록해두었다가 사용자가 클릭하면 실행한다.

---

❓ 괄호를 붙이면 어떻게 될까?

아래 코드와 같이 ()를 붙이는 순간 JavaScript는 함수를 즉시 실행한다.

<button onClick={handleLogin()}>
    로그인
</button>

즉, handleLogin()은 지금 바로 실행해! 라는 의미가 되는것과 같다.

 

컴포넌트가 렌더링되는 과정에서 handleLogin()이 즉시 실행되어 console.log("로그인")이출력된다.

그리고 실행이 끝난 반환값(return 값)이 onClick에 전달되는 것이다.

 

이미 함수는 실행이 끝났기 때문에 버튼을 클릭해도 더이상 실행할 함수가 남아있지 않다.

function handleLogin() {
    console.log("로그인")
}

위 함수의 경우 return이 없으므로 undefined를 반환한다.

 

즉, onClick={handleLogin()}은 아래 코드와 같은 의미를 지니고있다.

const result = handleLogin()
// result === undefined

onClick={undefined}

---

JavaScript 관점에서 보기

함수 자체를 전달하는 경우 = 함수 객체를 전달

onClick={handleLogin}

// JavaScript로 표현
onClick = handleLogin

 

함수를 실행하는 경우 = 실행 결과를 전달

onClick={handleLogin()}

// JavaScript로 표현
const result = handleLogin() // undefined
onClick = result

---

❓ 그럼 화살표 함수는 가능할까?

React를 배우다보니 아래와 같은 형태 코드를 많이 보게되었다.

<button onClick={() => handleDelete(id)}>
    삭제
</button>

처음에 개념을 정리할땐 괄호가 있는데 왜 실행되지않는거지? 라고 잠깐 의문을 품었다.

사실 해당 코드에서 React에 전달하는것은 handleDelete(id)가 아니라 익명 함수(화살표 함수)이다.

() => handleDelete(id)

// 위와 같은 함수
function () {
    handleDelete(id)
}

즉, 페이지가 렌더링되면 익명함수를 저장하고 버튼을 클릭하면 익명함수가 실행되면서 handleDelete(id)가 실행되는 흐름이다.

---

언제 어떤 방식을 사용해야 할까?

매개변수가 없는 경우 = 함수 자체를 전달

<button onClick={handleLogin}>

 

매개변수가 필요한 경우 = 익명 함수를 전달

<button onClick={() => handleDelete(id)}>

 

상황	작성 코드
매개변수 없음	onClick={handleLogin}
매개변수 있음	onClick={() => handleDelete(id)}
꼭 피해야하는 작성법	onClick={handleLogin()}