React 이벤트 핸들러에서 선택적 함수 호출하기

React 컴포넌트에서 이벤트 핸들러를 작성할 때 유용한 패턴 하나를 알게 되었습니다.
특히 재사용 가능한 컴포넌트를 만들 때 많이 활용되는 기법입니다.

선택적 함수 호출: onClick?.()

onClick={() => {
  onClick?.();
  onClose();
}}

이 코드를 보면 onClick?.() 이라는 표현이 있습니다.
이것은 JavaScript의 선택적 체이닝(Optional Chaining) 과 함수 호출을 결합한 것입니다.

동작 방식

1. ?. 연산자는 앞의 값이 null이나 undefined가 아닐 경우에만 뒤의 속성이나 메서드에 접근합니다.
2. onClick?.()는 onClick 함수가 존재할 경우에만 호출하고, 그렇지 않으면 아무 일도 일어나지 않습니다.
3. 그 후에 onClose()를 항상 호출합니다.

왜 이렇게 사용할까?

이 패턴이 유용한 이유는 다음과 같습니다:

1. 안전한 코드: onClick prop이 전달되지 않아도 오류가 발생하지 않습니다.
2. 유연성: 컴포넌트 사용자가 원하는 경우에만 추가 동작을 정의할 수 있습니다.
3. 기본 동작 보장: onClose는 항상 실행되어 기본 기능(모달 닫기)이 보장됩니다.

실제 활용 예시

위 코드에서 CancelButton은 두 가지 동작을 합니다:

1. 사용자가 정의한 onClick 함수가 있다면 실행합니다(예: 폼 초기화, 데이터 상태 변경 등).
2. 그 후에 항상 모달을 닫습니다(onClose 호출).

// 사용 예시 1: 추가 동작 없이 그냥 닫기
<Modal.CancelButton onClick={() => {}} />

// 사용 예시 2: 취소하면서 폼 초기화하기
<Modal.CancelButton onClick={() => resetForm()} />

첫 번째 예시에서는 빈 함수를 전달했고, 두 번째 예시에서는 폼 초기화 함수를 전달했습니다. 둘 다 작동하며, 어떤 경우든 모달은 닫힙니다.

onClick이 전달되지 않는 경우

<Modal.CancelButton />

이렇게 onClick prop을 아예 전달하지 않아도 코드는 정상 작동합니다. onClick?.()은 아무 일도 하지 않고, onClose()만 실행됩니다.

정리

선택적 체이닝과 함수 호출을 결합한 onClick?.() 패턴은 컴포넌트를 더 안전하고 유연하게 만드는 현대적인 JavaScript/React 기법입니다. 특히 재사용 가능한 UI 컴포넌트를 설계할 때 매우 유용하므로 알아두면 좋습니다.