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

리액트에서 onClick은 이벤트 핸들러 중 하나로서, 마우스 클릭 이벤트에 응답하여 실행되는 콜백 함수이다. 보통 버튼이나 링크와 같은 요소에 onClick 이벤트 핸들러를 등록하여 해당 요소를 클릭했을 때 원하는 동작을 수행할 수 있다.

 

반응형

onClick 이벤트 핸들러에 함수를 전달하는 방법

1. 함수 이름을 전달 (함수 자체를 전달)
   • onClick prop에 함수 이름만을 전달
   • 예시: <button onClick={handleClick}>클릭</button>
   • 클릭 이벤트가 발생하면 handleClick 함수가 실행됨
2. 익명 함수를 사용하여 전달
   • onClick prop에 익명 함수를 전달
   • 예시: <button onClick={() => { console.log('클릭되었습니다.'); }}>클릭</button>
   • 클릭 이벤트가 발생하면 익명 함수가 실행되며, 원하는 동작을 수행
3. 함수 호출 결과를 전달
   • 함수 호출 결과를 onClick prop에 전달하는 것은 일반적으로 원하는 동작을 수행하지 못하므로 권장되지 않음
   • 예시: <button onClick={handleClick()}>클릭</button>
   • 위의 예시는 클릭 이벤트가 발생하기 전에 handleClick 함수가 호출되고, 함수 호출 결과가 onClick 이벤트 핸들러로 전달되며, 이는 원하는 동작을 수행하지 않을 수 있음

위와 같이 함수 이름이나 익명 함수를 onClick 이벤트 핸들러로 전달하는 것이 일반적인 방법이다. 이를 통해 클릭 이벤트 발생 시 원하는 함수가 실행되도록 할 수 있다.

 

코드 예제

1. 함수 이름을 전달 (함수 자체를 전달)

<Hamburger
	onClick={isBurgerMenuActive ? handleToCloseMenu : handleToOpenMenu}
/>

위 경우에는 onClick 이벤트가 발생했을 때, isBurgerMenuActive가 참이면 handleToCloseMenu 함수를 호출하고, 그렇지 않으면 handleToOpenMenu 함수를 호출한다. 여기서 주의할 점은 함수 자체를 전달한다는 것이다. handleToCloseMenu와 handleToOpenMenu는 함수 자체를 가리키는 것이므로, 함수가 바로 실행되는 것이 아니라 이벤트가 발생했을 때 클릭 이벤트 핸들러 내에서 해당 함수를 호출하게 된다.

위의 코드에서 onClick prop은 handleToCloseMenu, handleToOpenMenu 함수를 이벤트 핸들러로 설정한다. 이렇게 작성된 경우, Hamburger 아이콘을 클릭했을 때 handleToCloseMenu혹은handleToOpenMenu 함수가 실행된다.

 

코드 실행 순서

1. Hamburger 컴포넌트를 렌더링 한다.
2. onClick prop에 조건 연산자(isBurgerMenuActive ? handleToCloseMenu : handleToOpenMenu)를 사용하여 이벤트 핸들러를 선택한다.
3. isBurgerMenuActive 값이 참인 경우 handleToCloseMenu 함수가 onClick 이벤트 핸들러로 설정된다.
4. isBurgerMenuActive 값이 거짓인 경우 handleToOpenMenu 함수가 onClick 이벤트 핸들러로 설정된다.
5. 클릭 이벤트가 발생하면 해당하는 함수가 실행된다.

 

2. 익명 함수를 사용하여 전달

보통 함수를 호출하면서 반환값을 전달해야 할 때는 즉시 실행되는 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)를 사용한다. 즉시 실행 함수는 익명 함수이다.

아래 코드는 익명 함수를 사용하여 클릭 이벤트 핸들러를 정의한 예시이다.

<Hamburger
	onClick={() => {
		if (isBurgerMenuActive) {
			handleToCloseMenu();
		} else {
			handleToOpenMenu();
		}
	}}
/>

위의 코드는 주어진 조건(isBurgerMenuActive)에 따라 클릭 이벤트 핸들러를 익명 함수로 작성했다. 익명 함수 내부에서 조건문을 사용하여 isBurgerMenuActive 값에 따라 handleToCloseMenu 또는 handleToOpenMenu 함수를 호출하도록 처리했다. 이렇게 익명 함수를 사용하면 조건에 따라 동적으로 함수를 호출할 수 있다.

익명 함수를 사용하면 익명 함수의 정의만 전달되므로 익명 함수 내부에 있는 함수는 클릭 이벤트가 발생했을 때 실행되는 것이다.

 

코드 실행 순서

1. Hamburger 컴포넌트를 렌더링 합니다. onClick prop에 익명 함수를 전달한다.
2. 익명 함수 실행:
   • 클릭 이벤트가 발생하면 익명 함수가 실행된다.
   • 익명 함수 내부에서 조건문을 사용하여 isBurgerMenuActive 값에 따라 분기한다.
   • isBurgerMenuActive 값이 참인 경우 handleToCloseMenu 함수가 호출된다.
   • isBurgerMenuActive 값이 거짓인 경우 handleToOpenMenu 함수가 호출된다.
   • 클릭 이벤트에 따라 적절한 함수가 실행된다.
3. 함수 실행:
   • handleToCloseMenu 함수 또는 handleToOpenMenu 함수가 실행된다.
   • 각 함수는 클릭 이벤트에 대한 응답으로 원하는 동작을 수행한다.

 

3. 함수 호출 결과를 전달

그러나 때로는 함수를 호출한 결과를 onClick에 전달하려는 실수를 하기도 한다. 예를 들어, 아래와 같이 작성하는 경우가 있다.

<Hamburger
	onClick={isBurgerMenuActive ? handleToCloseMenu() : handleToOpenMenu()}
/>

위 경우에는 onClick 이벤트가 발생했을 때, isBurgerMenuActive가 참이면 handleToCloseMenu()를 호출하고, 그렇지 않으면 handleToOpenMenu()를 호출한다. 이 경우 함수를 호출한 결괏값을 전달하게 되는데, 이는 실제로 이벤트 핸들러에 함수가 아닌 함수의 반환값을 전달하는 것이다.

함수를 호출하면서 반환값을 전달하므로, 클릭 이벤트 핸들러가 바인딩될 때 한 번 호출되는 것이 아니라, 렌더링 시에 매번 함수가 호출되게 된다. 따라서, 괄호 없이 함수 이름만 전달하는 것이 올바른 방식이다.

 

코드 실행 순서

1. Hamburger 컴포넌트를 렌더링 한다.
2. onClick prop에 조건 연산자를 사용하여 이벤트 핸들러를 선택한다.
3. isBurgerMenuActive 값이 참인 경우 handleToCloseMenu() 함수를 호출하여 실행 결과를 onClick 이벤트 핸들러로 설정한다.
4. isBurgerMenuActive 값이 거짓인 경우 handleToOpenMenu() 함수를 호출하여 실행 결과를 onClick 이벤트 핸들러로 설정한다.
5. Hamburger 아이콘을 렌더링 할 때 함수가 호출되고 실행되며, 그 결과가 onClick 이벤트 핸들러로 전달된다.
6. 클릭 이벤트가 발생하면 함수 호출 결과가 실행된다.

보통 이벤트 핸들러에는 함수 자체를 전달하는 것이 일반적이며, 함수를 호출하면서 반환값을 전달해야 할 때는 즉시 실행 함수 등을 사용하는 게 일반적이다.