frontEnd/React

함수명 vs 함수명() 의 차이는 뭘까?

kim_genius_ 2023. 11. 7. 22:04

 

의문점

프로젝트를 진행하던  중 회원가입 버튼을 구현했다. button태그의 onClick 속성에 sendJoin 함수를 넣었는데 소괄호를 넣었을 때와 안넣었을 때 결과가 달랐다. 왜 달랐을까?

아래 사진에서 왼쪽과 오른쪽의 버튼을 각각 26번 클릭했다. 'hi' 가 몇번 출력될까?? (결과 밑에 있음)

 

sendJoin() 결과                                                                                      sendJoin결과

 

함수 호출(소괄호 있음) 과 함수 참조(소괄호 없음) 는 뭐가 다른가??

함수 호출 (Function Invocation)

  • 함수 호출은 함수를 직접 실행하는 것. 함수 내부의 코드가 실행된다.
  • 함수를 호출할 때는 함수 이름 뒤에 괄호(  )를 붙인다.
  • 예를 들어, sayHello()에서 sayHello는 함수 호출을 의미하며, 함수 내용이 실행된다.
function sayHello() {
  console.log('안녕하세요!');
}
sayHello(); // 함수 호출

 

 

함수 참조 (Function Reference)

  • 함수 참조는 함수를 변수에 저장하거나 다른 함수의 매개변수로 전달하는 것을 의미함.
  • 함수 이름을 그대로 사용하며 괄호(   )를 붙이지 않는다.
  • 함수를 나중에 호출할 수 있는 상태로 만든다.
  • 예를 들어, const greet = sayHello에서 sayHello는 함수 참조를 의미하며, greet 변수가 함수를 가리킴.
function sayHello() {
  console.log('안녕하세요!');
}
const greet = sayHello; // 함수 참조
greet(); // 함수 참조를 통한 호출

 

 

특히 React에서 함수 참조(괄호없음) 사용 이 중요하다!!

React를 사용하면서 JSX에서 함수를 이벤트 핸들러로 전달할 때 괄호(  )를 사용하거나 사용하지 않는 것은 중요한 차이가 있다. 

이 글에서는 React에서 함수를 이벤트 핸들러로 전달할 때 괄호 사용에 대한 주의사항을 살펴볼 것.

 

React 및 다른 프론트엔드 라이브러리/프레임워크에서 함수를 이벤트 핸들러(onClick,oninput...)로 전달할 때,

함수 참조를 사용해야 한다.

함수 참조를 사용하면 이벤트가 발생할 때(예: 버튼 클릭) 함수가 호출된다.

괄호를 사용하면 함수가 즉시 호출되어 버튼 클릭과는 무관한 시점에 실행된다.

 

따라서, React에서 이벤트 핸들러를 정의할 때 괄호를 사용하지 않아야 한다.

 

함수 참조를 사용하면 이벤트 핸들러가 실제 이벤트가 발생할 때만 호출됩니다.

 

예시)

<button onClick={myFunction()}>클릭</button> // 랜더링될 때 한번만 실행됨


<button onClick={myFunction}>클릭</button> //버튼을 클릭할 때마다 실행됨

 

 

참고)

greet = sayHello(   ) 와       greet = sayHello 차이점?

 

greet = sayHello(): 이 코드는 sayHello 함수를 호출하고, sayHello 함수의 반환 값(return)을 greet 변수에 할당한다.

즉, greet에는 sayHello 함수의 실행 결과가 저장된다.

 

greet = sayHello:  sayHello 함수를 greet 변수에 할당한다. sayHello 함수가 실행되는 것이 아니라, greet 변수가 sayHello 함수를 가리키게 되는데 이후 greet를 호출하면 sayHello 함수가 실행된다.