React에서 'onClick' Event 실행해보기

 

1. 아무 parameter도 넘지기 않는 경우

 

간단한 이벤트는 인라인으로 onclick을 넣어서 작성하지만,

 

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <button onClick={()=>alert("hi")}>button</button>
    </div>
  );
}

 

보통 그렇게 단순하지 않기 때문에 함수 표현식으로 위로 빼서 선언한다.

 

⭕

import React from "react";
import "./styles.css";

export default function App() {
  const onclickHandler = () => alert("hi");
  return (
    <div className="App">
      <button onClick={onclickHandler}>button</button>
    </div>
  );
}

 

 

위와 같은 경우는 어떤 parameter도 받지 않고 있는데, 문자열을 입력받는다고 한다면?

 

2. 일반적인 인자를 넘기는 경우

 

❌

import React from "react";
import "./styles.css";

export default function App() {
  const onclickHandler = (name) => alert(`hi ${name}`);
  return (
    <div className="App">
      <button onClick={onclickHandler("heeyeon")}>button</button>
    </div>
  );
}

 

- button을 클릭하지도 않았는데 함수가 즉시실행이 된다.

 

=> 콜백함수에 인자를 넘겨줘야 할 때는 그냥 함수를 호출하는 것이 아니라, 함수를 선언해주는 방식을 사용해야한다.

 

↓

 

⭕

import React from "react";
import "./styles.css";

export default function App() {
  const onclickHandler = (name) => alert(`hi ${name}`);
  return (
    <div className="App">
      <button onClick={() => onclickHandler("heeyeon")}>button</button>
    </div>
  );
}

 

- 이제는 button을 클릭해야 alert 창이 뜬다.

 

 

3. 이벤트 객체를 인자로 넘기는 경우

 

import React from "react";
import "./styles.css";

export default function App() {
  const onclickHandler = (e) => alert(e.target.value);
  return (
    <div className="App">
      <button value={'clickBtn'} onClick={(e) => onclickHandler(e)}>button</button>
    </div>
  );
}

 

- 버튼 클릭 시 'clickBtn' alert 창이 뜬다.

 

↓ 간단하게

 

- 이벤트 객체 하나만 넘기려고 할 때는 생략해서 아래와 같이 작성해도 같은 결과가 나타난다.

 

⭕

import React from "react";
import "./styles.css";

export default function App() {
  const onclickHandler = (e) => alert(e.target.value);
  return (
    <div className="App">
      <button value={'clickBtn'} onClick={onclickHandler}>button</button>
    </div>
  );
}

 

 

2+3) 일반적인 인자와 이벤트 객체를 같이 넘겨야 하는 경우

 

import React from "react";
import "./styles.css";

export default function App() {
  const onclickHandler = (name, e) => {
    alert(e.target.value);
    console.log(name);
  }

  return (
    <div className="App">
      <button value={'clickBtn'} onClick={(e) => onclickHandler("heeyeon", e)}>button</button>
    </div>
  );
}

 

↓

 

 

+) 다른 방식으로도 작성이 가능하다

 

import React from "react";
import "./styles.css";

export default function App() {
  const onclickHandler = name => e => {
    alert(e.target.value);
    console.log(name);
  }

  return (
    <div className="App">
      <button value={'clickBtn'} onClick={(e) => onclickHandler("heeyeon")(e)}>button</button>
    </div>
  );
}

 

- name 인자를 받아와 첫 번째 onClickHandler 함수를 실행시켜서 alert을 출력하고, 함수를 다시 return 받아서 이벤트 객체를 받은 onClickHandler함수가 또 실행이 된다.

(여기서 name을 인자로 받은 onClickHandler함수가 종료됐지만 정상적으로 출력이 되는 이유는 클로저와 렉시컬 스코프 때문이다. )

 

↓ 간단하게

 

import React from "react";
import "./styles.css";

export default function App() {
  const onclickHandler = name => e => {
    alert(e.target.value);
    console.log(name);
  }

  return (
    <div className="App">
      <button value={'clickBtn'} onClick={onclickHandler("heeyeon")}>button</button>
    </div>
  );
}

 

- 반환받은 값이 함수이기 때문에 그냥 들고 있다가 onClick event가 발생하면 return 받은 함수를 실행하는 것

 

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

(`keyword : 일급 객체, 클로저, 렉시컬 스코프, 스코프 체인` 와 연관이 있다.)