[React] 이벤트 핸들러에 함수를 전달하는 방식

리액트에서 버튼 등 하위 컴포넌트에 이벤트 핸들러를 연결할 때,

#1
<button onClick={() => onDelete()}>삭제</button>

이렇게 익명 함수로 감싸서 전달하는 방식을 사용했었는데, 

#2
<button onClick={onDelete}>삭제</button>

이렇게 익명 함수로 감싸지 않고 직접 전달하는 방식이 더 효율적이라는 것을 알게 되었다. 

이 방법은 onDelete함수 자체의 참조를 전달하는 것이다.

물론 두 버튼의 기능에 대해서는 차이가 없다. 두 방식 모두 버튼을 클릭하면 onDelete 함수가 정상적으로 실행된다.

#3
<button onClick={onDelete()}>삭제</button>

하지만 위와 같이 사용한다면 onDelete 함수의 결과값을 전달하는 것이 되므로 오류가 난다. 컴포넌트 렌더링 시점에 함수가 바로 실행되기 때문이다.

#4
<button onClick={() => onDelete(item.id)}>삭제</button>

그런데 함수에 인자를 넘겨야 할 때는 당연하게도 익명 함수로 감싸서 전달해야 한다. 1번인 함수 참조 방식은 이벤트 객체만 자동으로 넘겨주기 때문에, 추가 인자를 넣고 싶다면 감싸줘야 하는 것이다.

🤔 그럼 1번과 2번의 차이는 무엇일까?

2번처럼 익명 함수로 감싸서 전달하면 컴포넌트가 리렌더링될 때마다 새로운 익명 함수가 만들어진다. 이로 인해 불필요한 리렌더링이나 props 변경이 발생할 수 있다. 특히 자식 컴포넌트에 함수를 넘길 때는 이 점을 고려해야 한다.

그런데 성능 차이를 알아보니 일반적인 규모의 어플리케이션에서는 성능에 거의 영향을 주지 않는다고 한다...ㅎㅎ

1만 개 요소 렌더링 기준 10ms 차이 이내라고 한다. 작은 프로젝트에서는 크게 신경쓸 부분은 아닌 것 같다.

https://www.matthewgerstman.com/tech/performance-testing-anonymous-functions/

Performance Testing React With Anonymous Functions

그렇지만 가독성 측면에서도 익명함수로 굳이 감쌀 필요가 없으니 직접 전달하는 방식이 좋을 것 같다.

✅ 여러 함수 실행이 필요할 경우

<button onClick={() => { logEvent(); onDelete(); }}>삭제</button>

이런 경우는 아직 못 봤지만...클릭 시 여러 작업을 한 번에 처리하고 싶을 때 익명 함수로 묶어서 실행할 수 있다.