[의문점] react event (pass parameter)

의문점

리액트를 다루는 기술 공부 중 아래와 같은 문제 발생

 

onDoubleClick={onRemove(name.id)} (실패)

onDoubleClick={()=>onRemove(name.id)} (성공)

두 가지의 차이점에 대해 의문점이 생겨서 확인해봤다.

 

기존에 이벤트에 함수를 전달할 때는 아래와 같이 전달했었다.

 

onClick={handleClick}

위와 같은 함수 전달은 함수를 전달할 뿐 실행은 하지 않기 때문에 가능.

 

하지만 parameter를 전달할때는 문제가 발생했다.

---

해결

 

1. parameter를 전달하지 않는 함수 전달

import React from "react";

const EventSample = () => {
  const onClickHandler = () => alert("success");
  return (
    <div>
      <button onClick={onClickHandler}>Click test</button>
    </div>
  );
};

export default EventSample;

 

2. parameter를 전달하는 함수 전달 (틀린 방법)

import React from "react";

const EventSample = () => {
  const onClickHandler = (test) => alert(`${test} success`);
  return (
    <div>
      <button onClick={onClickHandler("test")}>Click test</button>
    </div>
  );
};

export default EventSample;

이벤트가 일어나지 않아도 렌더링 되면서 자동으로 함수가 실행된다.

 

3. parameter를 전달하는 함수 전달 방법

import React from "react";

const EventSample = () => {
  const onClickHandler = (test) => alert(`${test} success`);
  return (
    <div>
      <button onClick={() => onClickHandler("test")}>Click test</button>
    </div>
  );
};

export default EventSample;

렌더링될 때 함수가 실행되지 않고 이벤트가 발생했을 때만 실행된다.

 

2번 방법은 함수를 실행하고 실행 결과를 전달

3번 방법은 함수 자체를 전달하여 이벤트가 발생했을 때 함수가 실행된다.

 

 

 

함수 커링

함수 호출 시 여러 개의 인자를 한 번에 넘기지 않고, 한 번에 하나의 인자를 넘기고, 함수를 인자의 개수만큼 (여러 번) 호출하는 방식

//keyword : 일급 객체, 클로저, 렉시컬 스코프, 스코프 체인

 

 

---

참고
https://www.youtube.com/watch?v=fSiAVZB16s0