[React] React에서 이벤트 핸들러 전달: 익명 함수 vs 함수 참조

 

1. 익명 함수 전달 (() => handleSelect)

<TabButton onSelect={() => handleSelect('Components')}>Components</TabButton>

• 의미: onSelect 이벤트가 발생할 때마다 새로운 함수 객체를 생성해서 전달하는 것
• 장점: 특정 인자를 함수에 전달해야 할 때 유용
• 단점: 매 렌더링마다 새로운 함수 객체가 생성돼서 메모리 사용이 증가할 수 있다. 이로 인해 불필요한 렌더링이 발생할 수 있는데, 특히 PureComponent나 shouldComponentUpdate를 사용하는 경우

 

2. 함수명만 전달 (handleSelect)

<TabButton onSelect={handleSelect}>JSX</TabButton>

• 의미: onSelect 이벤트가 발생할 때 기존에 정의된 함수를 그대로 전달하는 것을 의미
• 장점: 함수 객체를 새로 생성하지 않기 때문에 메모리 효율적이고, 불필요한 렌더링을 방지
• 단점: 함수에 인자를 직접 전달할 수 없어, 만약 인자를 전달해야 한다면 다른 방법을 사용해야 함