이벤트 함수 전달 방식

1.개념
2.방식
3.차이점
4.결론
5.주의사항

개념

• onClick과 같은 이벤트에 함수를 전달할 때, 함수 이름만 넣는 경우와 () => 함수이름()와 같이 화살표 함수를 사용하는 경우가 있음
• 차이는 함수가 호출되는 시점과 관련

방식

1. 함수 이름만 넣는 경우 (onClick={함수이름})

• 동작: 함수 이름만 넣어주면, 이벤트가 발생할 때 React가 해당 함수를 호출.
• 장점: 함수를 정의한 그대로 전달하기 때문에 메모리 효율이 높고, 불필요하게 새로운 함수가 생성되지 않음.
• 사용 예시: 일반적인 경우에는 함수 이름만 넣어주는 방식을 사용.

function handleClick() {
  console.log('Button clicked');
}

<button onClick={handleClick}>Click Me</button>

이 경우, handleClick은 버튼을 클릭할 때 실행됨.
즉시 실행되지 않으며, 클릭 이벤트가 발생할 때만 실행됨.

2.화살표 함수를 사용해 함수 호출 (onClick={() => 함수이름()})

• 동작: 화살표 함수를 사용하면 새로운 익명 함수를 생성하고, 해당 함수가 onClick 이벤트가 발생할 때 실행되도록 설정됨
• 사용 목적: 특정 파라미터를 함수에 전달해야 하거나, 여러 개의 함수를 호출해야 할 경우에 유용함.
  예를 들어, onClick 이벤트가 발생할 때 인자를 전달하고 싶다면 화살표 함수를 사용해야 합니다.
• 사용 예시:

function handleClick(message) {
  console.log(message);
}

<button onClick={() => handleClick('Button clicked!')}>Click Me</button>

이 경우, handleClick 함수에 'Button clicked!'라는 인자를 전달하기 위해 화살표 함수를 사용했음.
onClick={() => handleClick('Button clicked!')}는 클릭할 때 handleClick을 호출하는 새로운 함수를 생성함.

차이점

결론

• 일반적으로 인자를 전달하지 않고 단순히 함수 호출만 필요하다면 onClick={함수이름} 방식이 더 효율적, 렌더링마다 새로운 함수가 생성되지 않고, 기존 함수가 계속해서 재사용
• 인자 전달이 필요하거나 여러 함수를 한 번에 실행해야 한다면 onClick={() => 함수이름()}을 사용,작성할 때마다 메모리에 별도의 함수 객체가 생성

주의사항

새로운 함수 생성은 메모리 사용량이 증가할 수 있어, 최적화가 필요한 컴포넌트에서는 성능 이슈로 이어질 수 있음

성능 최적화 방법

1. 화살표 함수 대신 직접 함수 이름을 전달

• 만약 인자가 필요 없다면, 화살표 함수 대신 함수 이름만 전달하는 방식으로 처리하여 새 함수가 생성되는 것을 막을 수 있음.

function handleClick() {
  console.log("Button clicked!");
}

<button onClick={handleClick}>Click Me</button>

2. useCallback 사용

• React의 useCallback 훅을 사용하여 동일한 화살표 함수를 재사용할 수 있음
• useCallback은 함수가 아닌 함수 정의 자체를 메모이제이션하기 때문에, 함수 안에서 어떤 인자를 사용하는지와는 관계없이 동작

// 함수에 인자가 없는 경우
const handleClick = useCallback(() => {
  console.log("Button clicked!");
}, []);

<button onClick={handleClick}>Click Me</button>

// 함수에 인자가 있는 경우
import { useCallback } from "react";

// handleClick은 useCallback으로 정의되었기 때문에, MyComponent가 다시 렌더링되어도 새로운 함수 객체가 생성되지 않고 동일한 함수가 재사용됨
function MyComponent() {
  const handleClick = useCallback((message) => {
    console.log(message);
  }, []);

  return (
    <button onClick={() => handleClick("Hello!")}>Click Me</button>
  );
}

• 주의사항

  • useCallback을 사용할 때 함수 내부에서 의존하는 값이 있다면, 이 값을 useCallback의 의존성 배열에 추가해야 함.

  • 그렇지 않으면, 함수 내부에서 참조하는 변수가 이전 값으로 고정될 수 있음.

  • 예시: 의존성 배열 사용하기

    import { useState, useCallback } from "react";
    
    function MyComponent() {
    const [count, setCount] = useState(0);
    
    const handleClick = useCallback((message) => {
      console.log(`${message} Count is ${count}`);
    }, [count]);
    
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => handleClick("Hello!")}>Click Me</button>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
    }

  • 이제 handleClick은 count에 의존하게 되며, count가 변경될 때만 새로운 함수 객체가 생성됨.

  • useCallback의 의존성 배열에 count를 포함했기 때문에, count가 변경될 때 최신 count 값을 참조함

  • 따라서, 인자가 있는 경우에도 useCallback을 사용할 수 있으며, 함수가 참조하는 외부 값이 변경될 때는 의존성 배열에 해당 값을 추가해 최신 값으로 동작하도록 해야 함

    정리

  • 간단하고 인자가 없는 함수는 useCallback 없이 직접 전달하는 것이 더 효율적

  • 의존성이 많거나 복잡한 함수, 또는 빈번하게 렌더링되는 컴포넌트에서 재사용이 중요한 경우에만 useCallback을 사용하는 것이 좋음.