[React] 헷갈리는 리액트 이벤트 핸들러 작성법

import React from 'react'

const Counter = ({ number, onIncrease, onDecrease }) => {
  return (
    <div>
        <h1>{ number }</h1>
        <div>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button>
        </div>
    </div>
  )
}

export default Counter

이걸 작성하다가 궁금한점이 생겼다.
onClick={onIncrease()}를 하지 않는 이유는 뭘까?

ChatGPT씨에게 물어보았다ㅎㅎ

onClick={onIncrease()}와 onClick={onDecrease()}를 사용하는 것은 함수를 호출하려는 시도를 나타냅니다. 그러나 일반적으로 React에서는 함수를 직접 호출하는 것이 아니라, 이벤트 핸들러로 함수 참조(reference)를 전달해야 합니다.

만약 onClick={onIncrease()}를 사용하면, 컴포넌트가 렌더링될 때마다 onIncrease 함수가 즉시 호출됩니다. 이는 원하는 동작이 아니며, 실제로 이벤트가 발생할 때 함수를 실행하려면 이벤트 핸들러에 함수 참조만 전달해야 합니다.

따라서 올바른 방법은 다음과 같이 함수 참조를 전달하는 것입니다:

<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>

예를들어 필터 체크박스가 있다. 체크박스를 체크하면 filter값이 넘어가고 setFilter를 한다.
체크박스에는 이런 이벤트가 걸려있다.

onChange={(e) => handleFilter(e)}
이것도 함수 호출이 아닌 React 이벤트 핸들러에 함수참조를 전달하는것이다. onChange={handleFilter(e)}로 작성하면 handleFilter가 즉시 호출되어버리게 된다. 이벤트 핸들러에는 함수를 전달해야하므로 괄호를 사용하지 않아야한다.

따라서 handleFilter를 호출하지 않고 함수 참조를 전달하는 것이 올바른 방법이다.

그러면 onClick={() => handleLikeClick()}이나 onClick={handleLikeClick}의 차이는 멀까?

onClick={() => handleLikeClick()}와 onClick={handleLikeClick}는 기능적으로 큰 차이가 없습니다. 둘 다 클릭 이벤트가 발생했을 때 handleLikeClick 함수를 호출합니다. 그러나 작은 차이점이 있습니다.

1. 렌더링 시간에 함수 생성 여부:

• onClick={() => handleLikeClick()}: 이 코드는 매번 렌더링될 때마다 새로운 인라인 함수를 생성합니다. 따라서 부모 컴포넌트가 리렌더링되면 매번 새로운 함수가 생성되어 성능에 영향을 줄 수 있습니다. 하지만 일반적으로 이 차이는 성능상 큰 문제가 되지 않습니다.
• onClick={handleLikeClick}: 이 코드는 렌더링 시간에 새로운 함수를 생성하지 않습니다. 그러므로 함수가 재생성되지 않기 때문에 불필요한 리렌더링을 방지하는 데 도움이 될 수 있습니다.

2. 이벤트 핸들러 내에서 this 값:

• 만약 클래스 컴포넌트에서 이벤트 핸들러를 사용한다면, onClick={() => handleLikeClick()}를 사용해야 합니다. 이는 화살표 함수를 사용하여 함수를 감싸기 때문에 함수 내에서 this 값이 컴포넌트 자체를 가리킵니다. 반면에 onClick={handleLikeClick}는 이벤트 핸들러에서 this 값을 바인딩하지 않으므로, 클래스 메서드 내에서 this를 사용할 경우 문제가 발생할 수 있습니다.

최근 React 버전에서는 함수 컴포넌트에서 성능상의 이슈가 크게 나타나지 않기 때문에, 함수 컴포넌트에서는 두 가지 방식 중 편한 방식을 사용하는 것이 일반적입니다. 함수 컴포넌트에서는 주로 onClick={handleLikeClick}를 사용하며, 클래스 컴포넌트에서는 onClick={() => handleLikeClick()}를 사용하는 것이 일반적입니다.

이벤트 핸들러에 매개변수가 들어가면 onClick={() => handleLikeClick()}로 작성해야한다고한다.. 왜냐면 handleLikeClick(props)로 작성하면 함수 호출이 되는거니까(당연함)

이렇게 간단한걸 이제 배운다...

 

https://ko.legacy.reactjs.org/docs/handling-events.html

 

※ 이 포스트는 잘못된 지식을 내포할 수 있습니다. 만약 틀렸다면 지적해주십시오! 환영합니다!