React 기초) 이벤트리스너 다는 방법

리액트 이벤트리스너 다는 방법

리액트  VS 자바스크립트 이벤트 처리하는 방법 비교

자바스크립트에서는 이벤트핸들러를 onclick 으로 표현

리액트에서는 onClick 으로 카멜케이스로 표시하고 있다.

 

또한 자바스크립트에서는 "" 안에 

리액트에서는 {} 안에 함수를 넣고있다.

html 태그 내부의 이벤트핸들러

리액트 내에서 이벤트 핸들러

 

1) 함수를 만들어서 함수로 전달 

 

Show name이라는 버튼을 클릭하면 ella라는 글씨가 콘솔창에 보이게 해주세요~

function Hello() {
  function showName() {
    console.log("ella");
  }
  
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={showName}>Show name</button>
    </div>
  );
}

export default Hello;

 

2) 직접 이벤트리스너 안에 함수 전달

function Hello() {

  return (
    <div>
      <h1>Hello</h1>
      <button
        onClick={() => {
          console.log(28);
        }}
      >
        Show age
      </button>
      <input
        type="text"
        onChange={(e) => {
          console.log(e.target.value);
        }}
      />
    </div>
  );
}

export default Hello;

3) 이벤트리스너 안에 만든 함수를 넣어서 사용해보기

 

- 함수를 넣어서 사용하면 매개변수를 전달하기가 편하다

function showAge(age){
  console.log(age);
}

함수를 만들고

이벤트리스너를 달아서 매개변수로 전달하기가 편하다

<button onClick={() => { showAge(35); }} > Show age </button>

 

function Hello() {
  function showAge(age) {
    console.log(age);
  }
  
  function showMeText(txt) {
    console.log(txt);
  }
  return (
    <div>
      <h1>Hello</h1>
      <button
        onClick={() => {
          showAge(35);
        }}
      >
        Show age
      </button>
      <input
        type="text"
        onChange={(e) => {
          const txt = e.target.value;
          showMeText(txt);
        }}
      />
    </div>
  );
}

export default Hello;