리액트만 해당되는 얘기는 아니지만 리액트하다 깨달았다.
onClick만 해당하는 건 아니지만 onClick으로 예를 들었다.
일단 결론적으로 콜백을 무조건 써야하는건 아니라는 것.
두 가지로 나누어 설명할 수 있겠다.
1. 콜백 형태로 사용하는 경우
onClick(()=>onClickHandeler(필요한값))onClick 안에서 콜백 형태가 필요한 이유는 onClickHandler가 바로 실행되는걸 막아주기 위해서다.
간단한 예시로 살펴보자.
버튼을 클릭하면 clickBtn 함수가 실행돼 콘솔창에 clicked? 가 나오는 최고 심플 예제이다.
실행하면 콘솔창엔 아무것도 보이지 않는다.
그리고 클릭하게되면
콘솔창에 clicked? 가 찍히는 걸 볼 수 있다.
2. 함수만 넣어 사용하는 경우
onClick에 그냥 clickBtn만 넣었다. 그러면 오류가 발생할까?
놀랍게도 그렇지 않다! 그냥 위 콜백 예시와 같이 클릭했을 때 콘솔이 찍히는 걸 확인할 수 있다.
콜백함수 형태와 동일한 결과를 얻었다.
왜 이것도 되고 저것도 되지? 그럼 그냥 아무거나 하나 골라쓰면 되나?
안된다. 다시 둘의 차이를 보자.
3. 비교해보기
clickBtn 뒤에 () 괄호가 있다.
이 괄호때문에 콜백함수로 쓰냐 마냐가 정해진다.
뒤 괄호를 쓰게 되면 해당 페이지 렌더링 시 순서대로 코드를 읽다가 clickBtn() 함수구나?
하며 바로 실행을 하게 된다.
그래서 다음처럼 콜백함수를 빼고 clickBtn()을 써주게 되면
화면이 실행되자마자 클릭하지도 않았는데 콘솔창에 clicked? 가 찍히게 된다.
4. 정리
1. onClick에 함수를 넣을 때 어떤 인자를 받는다던가, 함수 실행의 형태로 작성하려 한다면 콜백함수로 작성한다.
2. 어떤 인자를 받는 게 아니라면, 그냥 함수명만 작성해준다.
