[function]onClick={handleOnClickDetail(data) vs onClick={()=>{handleOnClickDetail(data)}}

key points

1. Arrow 함수를 사용한 것

2.Arrow 함수에 data 함수를 전달 한것.

 

 

1. onClick={handleOnClickDetail(data)}:

• This expression immediately invokes the handleOnClickDetail function and passes the data argument to it.
• The return value of the function (which could be anything, including undefined) is assigned as the event handler.
• If the handleOnClickDetail function has side effects (performs actions without explicitly returning a value), those side effects will occur immediately when the component is rendered

1. onClick={handleOnClickDetail(data)}:

    - 이 표현식은 handleOnClickDetail 함수를 즉시 호출하고 데이터 인수를 전달합니다.
    - 함수의 반환 값(정의되지 않은 값을 포함하여 무엇이든 될 수 있음)이 이벤트 핸들러로 할당됩니다.
    - handleOnClickDetail 함수에 부작용(명시적으로 값을 반환하지 않고 동작을 수행)이 있는 경우 컴포넌트가 렌더링될 때 해당 부작용이 즉시 발생합니다.

invoke : (프로그램 등을) 불러오다[작동시키다]

 

2. onClick={()=>{handleOnClickDetail(data)}}:

• This expression creates an anonymous arrow function that, when invoked, calls the handleOnClickDetail function with the data argument.
• The arrow function itself is assigned as the event handler.
• When the element is clicked, the arrow function is invoked, and then it calls the handleOnClickDetail function.

2. onClick={()=>{handleOnClickDetail(data)}}:

    - 이 표현식은 익명 화살표 함수를 생성하고, 이 함수가 호출되면 데이터 인수를 사용하여 handleOnClickDetail 함수를 호출합니다.
    - 화살표 함수 자체가 이벤트 핸들러로 할당됩니다.
    - 요소가 클릭되면 화살표 함수가 호출되고, 이 화살표 함수는 핸들온클릭디테일 함수를 호출합니다.

 

Key Differences and Considerations:

- Invocation Timing: The first expression invokes the handleOnClickDetail function immediately during rendering, while the second one waits until the element is clicked.
- Potential Side Effects: If handleOnClickDetail has side effects, they occur immediately with the first expression and on click with the second.
- Performance: For simple functions without side effects, the difference in performance is negligible. However, if handleOnClickDetail is expensive or has side effects you want to avoid during initial render, the second expression is preferred.
- Readability: Some developers find the arrow function syntax in the second expression more readable.

 

 

출처 : Bard