공부하면서 함수 막쓰다가 알게된 호출과 참조의 차이🤔
기본인데 나만 몰라서 속상하다.. ;ㅅ;
💡 함수의 호출과 참조
처음 JS를 접하면서 함수에 대해 공부할 때,
function 함수임(){
console.log('you know 함수?');
}
함수임();항상 ▲이런 방식으로만 착실하게 써왔던 것 같다. (괄호를 붙이고 안붙이고의 차이도 몰랐다는 사실)
간단한 것만 써봐서 에러가 뜨거나 이상현상이 발생한 적도 없었기때문에 잘못쓴지도 모르고 넘어간 것 같다.
강의 들을 때도 그냥 함수 쓰는 방식이 여러가지인가보다~ 하고 넘김 < 미친짓
<button onClick={함수임()}>Click</button>
<button onClick={함수임}>Click</button>위 코드를 예시로 함수 호출과 함수 참조가 무엇이 다른지 살펴보자.
1. 즉시 실행 여부
<button onClick={함수임()}>Click</button>▶ 호출 : 렌더링 시점에 함수임() 함수를 즉시 실행한다. 이벤트가 발생할 때가 아니라 렌더링할 때 실행되는 것!
이벤트리스너 안에 함수를 넣었다고 클릭이벤트 발생시 실행되는건 아닌 모양이다. 괄호하나 붙는다고 바로 호출될 줄 은 몰랐는데 왜 여지껏 문제가 없었는지 의아할 정도..
<button onClick={함수임}>Click</button>▶ 참조 : 렌더링 시 함수임 함수를 참조만 하고, 실제 클릭 이벤트가 발생할 때 함수를 실행한다.
2. 매개변수 전달
<button onClick={함수임('뭔데')}>Click</button>▶ 호출 : 매개변수를 전달할 수 있지만 기본적으로 함수의 실행 결과가 전달되어 즉시 실행된다.
<button onClick={함수임('뭔데')}>Click</button> ❌
<button onClick={() => 함수임('뭔데')}>Click</button> ⭕▶ 참조 : 매개변수를 전달하려면, 함수 참조를 바로 전달하는 대신 화살표 함수 또는 익명 함수를 사용해야 한다. 이렇게 하면 함수가 즉시 실행되지 않고 클릭 시점에 원하는 매개변수를 전달할 수 있다.
정리하자면,
참조 : 함수임 👉 클릭이벤트를 사용할 경우 의도한대로 클릭할 때만 함수가 호출되기때문에 문제가 없지만,
호출 : 함수임() 👉 사용자의 클릭 이벤트와 상관없이 렌더링 시점에 호출되기때문에 의도한 동작과 다를 수 있음을 염두에 두고 사용해야한다.
