handleClick vs handleClick() 정리 — React, Vue, JS onclick 이벤트 차이

click 이벤트들에게 다양한 형태가 있는데 헷갈려서 정리하는 포스트당....

 

1. onclick = "handleClick" (괄호 x) 👉 "함수 그 자체(참조)를 전달

function handleClick() {
  console.log('click!')
}

<button onClick={handleClick}>버튼</button>

"클릭되면 handleClick()을 실행해라"

= 렌더링시 실행 x, 클릭할 때 실행됨

 

✅HTML, Vanilla JS

• 클릭 이벤트가 발생 할 때 실행할 코드로 저장
• <script> 태그를 통해 전역으로 정의되어 있을 때 '클릭 시 실행'. 반드시 전역으로 선언되어야 함 = Window 객체에서 접근 가능해야 함!
  • window 객체 : 자바스크립트의 내부 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소들의 최상위 객체(생략 가능 - 너무 당연해서)
• 페이지 로드시 실행되는게 아닌 클릭 시점에서 호출됨

✅React, Vue

• React : onClick = {handleClick}으로 표현됨. 클릭 시 실행
• Vue: @click = "handleClick"형태로 표현됨, 컴포넌트의 메소드를 참조하여 클릭 시 실행 "메소드 참조 방식"
  • @ : Vue에서 v-on을 의미(이벤트 실행을 담당)

 

2. onclick = "handleClick()" (괄호 o)👉 "함수를 즉시 실행한 결과값(리턴값)을 전달"

function handleClick() {
  console.log('click!')
  return 42
}

<button onClick={handleClick()}>버튼</button>

렌더링 할 때 이미 "click!"을 콘솔에 한번 찍고

42가 onClick 속성에 들어간다. 

= 즉 클릭해도 아무 일도 안일어남

 

✅HTML, Vanilla JS

• HTML 파싱 시 "handleClick()"이라는 문자열이 onclick속성에 저장되고, 클릭 시 그 코드(handleClick())가 평가되어 실행 (위 예시 참고)
• 대부분의 JS예시를 보면 <div onclick="handleClick()"> 의 형태로 되어 있음

✅React, Vue

• React : onClick = {handleClick()}의 형태로 사용하며 렌더링 즉시 실행됨
  • 함수의 반환값이 이벤트 핸들러로 등록됨
  • 괄호가 함수 호출을 의미
  • 의도적으로 렌더링 시 특정 로직을 실행하고 싶을 때 외에는 ❌
• Vue : @click = "handleClick()" 형태로 사용
  • "인라인 표현식"으로 평가되어 클릭 시 handleClick()을 호출

 

➕ Vue의 메소드 참조방식 vs 인라인 표현식

1. 메소드 참조 방식 - @click="handleClick" : 메소드의 이름만 넘겨주는 방식으로, Vue가 해당 컴포넌트의 methods 속성에서 handleClick이라는 함수를 찾아서 클릭 시 실행되도록 바인딩 (Vue3 이전에 methods가 있었음). 따라서 렌더링 시에는 발생하지 않고 이벤트 발생 시에만 실행. "단순 클릭 핸들러"
2. 인라인 표현 방식 - @click="handleClick()" : 템플릿 안에서 JavaScript 표현식을 직접 실행하는 방식. 문자열 안의 코드를 클릭 시점에서 평가하여 실행. 렌더링 시점에서 발생하지 않고, 함수 호출 뿐 만 아니라 조건문, 연산, 여러 표현식이 가능해짐. 클릭 시 이벤트 발생 + 인자 전달 "매개변수 전달 필요할 때"

 

정리

🌐 HTML / Vanilla JS

<button onclick="handleClick">버튼</button> <!-- X -->
<button onclick="handleClick()">버튼</button> <!-- O -->

html의 인라인에선 "handleClick"이 문자열이기 때문에 동작하지 않는다. 즉, HTML 코드 안에 함수를 호출하는 ()가 반드시 필요하다.

HTML : handleClick()

하지만 JS 코드로 바인딩할 땐

button.onclick = handleClick;   // 클릭 시 실행됨 ✅
button.onclick = handleClick(); // 즉시 실행되고 클릭 시 아무 일 없음 ❌

이렇게 실행된다. React와 동일

JS : handleClick

 

⚛️ React

<button onClick={handleClick}>버튼</button>  // 클릭 시 실행 ✅
<button onClick={handleClick()}>버튼</button> // 렌더링 시 실행 ❌

React의 JSX에선 중괄호 {} 안의 내용을 JavaScript 표현식으로 평가하기 때문에 괄호를 쓰면 렌더링 시 함수가 호출된다.

따라서 괄호 없이 사용해야 함. 결과값이 함수가 아니라면 아무 일도 안일어남

React : handleClick

 

🟩 Vue

<!-- 메서드 참조 -->
<button @click="handleClick">버튼</button>  <!-- 클릭 시 실행 ✅ -->

<!-- 인라인 표현식 -->
<button @click="handleClick()">버튼</button> <!-- 클릭 시 실행 ✅ -->

 

• @click="handleClick" → Vue가 methods에서 함수를 찾아 “참조”로 등록.
• @click="handleClick()" → 클릭 시점에 그 표현식을 평가(handleClick() 실행).

Vue: handleClick, handleClick()

 

---

3. onClick={handleClick}과 onClick={handleClick()}과 onClick={()=>handleClick()}

리액트에선 onClick={괄호 안 메소드}로 표현한다. 다음과 같이 표현하는건 JSX밖에 없기 때문...

✅onClick={handleClick}

• 클릭 시 실행 '가장 표준적인 형태'
• 단순 클릭 이벤트 처리 시 권장.
• 전달되는 값: 함수 참조. handleClick이라는 함수 자체를 전달한다.
• 성능: 가장 효율적. 렌더링 시 아무 일도 일어나지 않기 때문이다. 

✅onClick={handleClick()}

• 렌더링 즉시 실행
• 렌더링마다 한번씩 실행(리렌더링 시 한번씩 더 실행된다)
• 전달되는 값: 함수의 반환 값
• 성능: N/A(이벤트 핸들러로선 부적합)

✅onClick={() => handleClick()}

• 클릭할 때 실행
• 매개변수 전달. 따라서 보통 () => handleClick('나루토', 16) 이런식으로 인자를 전달할 때 사용한다.  
• 전달되는 값: 새로운 화살표 함수. 익명 함수를 새로 만들어서, 그 안에서 handleClick()을 직접 실행시킨다. 
• 성능: 렌더링 시 함수가 생성되기 때문에 다소 비효율적이지만 매개변수가 있을 때는 유용하기 때문에 사용한다.

➕익명함수의 형태 : function() {} , const fn = function() {} , const fn = () => {}와 같이 이름이 없는 함수

4. onClick과 onclick의 차이

이건 간단했따.

onClick : React(JSX)

나머지 onclick : HTML / DOM(Vanilla JS)

+@click = Vue