React의 올바른 onClick 이벤트 처리법

ClydeHan·2024년 9월 9일

React의 올바른 `onClick` 이벤트 처리법

react logo

이미지 출처: blog.logrocket.com

React에서 onClick 이벤트를 사용할 때, 함수 참조와 함수 호출의 차이를 이해하는 것은 매우 중요하다. 이 글에서는 React에서 onClick 이벤트 핸들러를 올바르게 사용하는 방법에 대해 설명하고, 실수하지 않도록 주의해야 할 사항들을 구체적인 예시와 함께 다루겠다.

🚨 React의 이벤트 처리 메커니즘과 자바스크립트의 함수 참조 원리, Synthetic Event와 같은 더 깊이 있는 개념들은 다른 글에서 다룰 예정이다. 이 글은 실용적이고 핵심적인 부분에 집중하여 onClick 이벤트를 효과적으로 사용하는 방법을 설명하고자 한다.

함수 참조 vs 함수 호출

📌 함수 참조란?

함수 참조는 함수를 실행하지 않고 그 함수 자체를 전달하는 것을 의미한다. 이렇게 하면 React는 함수가 실행되지 않고 대기하다가, 클릭 이벤트가 발생할 때만 실행하게 된다.


function MyComponent() {
  const handleClick = () => {
    console.log("버튼이 클릭되었습니다!");
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

위 코드에서 onClick={handleClick}는 함수 참조를 전달하고 있으므로, 버튼이 렌더링될 때 함수는 실행되지 않으며, 클릭 이벤트가 발생하면 그때서야 함수가 실행된다.

📌 함수 호출이란?

반면에, 함수 호출은 함수 뒤에 괄호 ()를 붙여 즉시 실행하는 것을 의미한다. React에서 이렇게 함수 호출을 전달하면, 컴포넌트가 렌더링될 때 함수가 바로 실행되며, onClick에 실행 결과값이 전달된다.


function MyComponent() {
  const handleClick = () => {
    console.log("버튼이 클릭되었습니다!");
  };

  return (
    <button onClick={handleClick()}>Click me</button>
  );
}

여기서 onClick={handleClick()}은 handleClick 함수가 즉시 실행되어, 그 결과값(여기서는 undefined)이 onClick에 전달된다. 그 결과, 버튼을 클릭해도 아무 일도 일어나지 않는다.

onClick에서 함수 호출을 사용하게 되면, 컴포넌트가 렌더링될 때마다 해당 함수가 실행된다. 이렇게 되면 불필요한 함수 호출이 반복되어, 의도하지 않은 동작이 발생하거나 불필요한 렌더링이 일어날 수 있다. 특히, 이 과정에서 성능 저하가 발생할 수 있으며, 복잡한 컴포넌트일수록 이 문제가 더욱 두드러질 수 있다. 따라서 함수 호출이 아닌 함수 참조를 사용하는 것이 바람직하다.

렌더링 시 함수가 즉시 실행되면, 클릭 이벤트가 발생하기 전에 함수가 미리 실행되어 원하는 결과를 얻지 못하게 되고, 성능에도 악영향을 줄 수 있다.

💡 함수 호출이 필요한 경우

함수 호출이 필요한 경우는 특정 상황에서 작업이 즉시 실행되어야 할 때이다. 데이터를 불러오거나, 조건을 만족했을 때 작업을 실행하거나, 이벤트가 발생했을 때 바로 반응해야 하는 상황에서 함수 호출이 필요하다.

컴포넌트가 처음 화면에 보일 때 데이터를 불러와야 할 때
컴포넌트가 처음 렌더링되었을 때, 서버에서 데이터를 불러와야 하는 경우가 있다. 예를 들어, 쇼핑몰 페이지에서 상품 목록을 보여줄 때, 렌더링되자마자 서버에서 상품 정보를 가져와야 한다. 이럴 때 함수 호출이 필요하다.

    useEffect(() => {
      loadProducts();  // 컴포넌트가 화면에 나타나자마자 상품 데이터를 불러옴
    }, []);

특정 조건을 만족할 때 바로 작업을 실행해야 할 때
조건을 확인해서 그 조건이 맞을 때만 함수를 호출해야 하는 경우가 있다. 예를 들어, 사용자가 로그인 상태일 때만 환영 메시지를 출력하려면, 로그인 상태인지 확인하고 맞다면 함수를 호출해야 한다.

    if (isLoggedIn) {
      showWelcomeMessage();  // 로그인한 사용자에게만 환영 메시지를 출력함
    }

onClick 이벤트에서는 함수 호출이 필요한 경우가 거의 없다. 대부분의 경우 함수 참조를 사용하여 클릭했을 때만 함수가 실행되도록 해야 한다. 즉, 클릭 이벤트가 발생했을 때 함수가 실행되도록 하는 것이 보통의 사용 방법이다.

📌 `onClick`이벤트에서는?

onClick 이벤트에서 함수 호출을 직접 사용하는 경우, 컴포넌트가 렌더링될 때 즉시 함수가 실행되어 버린다. 하지만 우리가 원하는 것은 버튼을 클릭할 때 함수를 실행하는 것이다. 따라서 대부분의 상황에서는 함수 호출 대신 함수 참조를 사용해야 한다.

// 함수 참조 사용 (올바른 방법)
<button onClick={handleClick}>Click me</button>

📌 `onClick`이벤트에서의 함수 호출

함수 호출을 onClick 이벤트 안에서 써야 하는 경우는 매개변수를 전달해야 할 때이다. 이 경우에도 바로 함수 호출을 하는 대신, 익명 함수나 화살표 함수로 감싸서 함수 호출을 지연시켜야 한다.

// 함수 호출을 올바르게 사용한 경우 (매개변수 전달 필요)
<button onClick={() => handleClick("매개변수 값")}>Click me</button>

이런 식으로 익명 함수를 사용하면, onClick 이벤트가 발생할 때만 handleClick 함수가 호출되고, 그때 매개변수를 전달할 수 있게 된다. 아래에서 더 자세히 알아보자.

함수에 인자를 전달해야 할 때

함수에 인자를 전달해야 하는 경우에는 화살표 함수로 감싸서 전달해야 한다. 이렇게 하면 함수가 렌더링 시점이 아닌 클릭 시점에 실행되도록 할 수 있다.

function MyComponent() {
  const handleClick = (message) => {
    console.log(message);
  };

  return (
    <button onClick={() => handleClick("버튼이 클릭되었습니다!")}>Click me</button>
  );
}

위 예시에서 handleClick 함수에 인자를 전달하기 위해 화살표 함수를 사용해 감싸주었다. 만약 이를 화살표 함수로 감싸지 않고 handleClick("버튼이 클릭되었습니다!")처럼 직접 호출했다면, 함수가 즉시 실행되어 의도와는 다른 동작이 발생했을 것이다.

📌 더 일반적이며 좋은 코드 습관

위의 예시처럼 인라인 함수로 onClick 이벤트에 처리 로직을 직접 작성하는 것은 작은 프로젝트나 간단한 작업에서는 괜찮을 수 있지만, 가독성과 유지보수성 측면에서는 권장되지 않는다. 특히, 복잡한 로직이 포함될 경우, 코드가 난잡해지고 이해하기 어려워질 수 있다.

따라서, 로직을 별도의 함수로 추출하고, onClick에는 함수 참조를 사용하는 것이 더 좋은 방법이다. 이렇게 하면 코드를 재사용하기 쉽고, 나중에 유지보수하거나 수정할 때도 편리하다. 예를 들어, 아래와 같은 방식으로 사용할 수 있다.

function MyComponent() {
  const handleClickWithMessage = (message) => {
    console.log(message);
  };

  const handleClick = () => {
    handleClickWithMessage("버튼이 클릭되었습니다!");
  };

  return (
    <button onClick={handleClick}>Click me</button>
  );
}