이벤트 핸들링

컴퓨터에 관한 모든 언어에 있어서 "hello world" 가 처음 작성되는 것이라면

 

js에서는 이벤트로 alert 찍어보는게 가장 먼저이지 않을까 생각한다 :)

 

그렇다면!! 리액트에서의 App.js에다가는 어떻게 해야 이벤트를 설치하고 alert를 찍을까

 

 

아래는 버튼 클릭시 함수 실행

function App() {
  const func=()=>{
    alert('hello');
  };

  return (
    <div className="App">
      <button onClick={func}>   //리액트에서는 onClick ! 대문자이다
        submit
        </button>
    </div>
  );
}

export default App;

 

 

그렇다면!! 이벤트 설치를 알았으니 하나더!

 

아래는 onKeyUp (글자 입력후 눌릴때가 아니라 떼어질때)

 

function App() {
  const func=()=>{
    console.log('key 눌렸다가 떼어짐');
  };

  return (
    <div className="App">
      <input onKeyUp={func}>
      </input>
    </div>
  );
}

export default App;

 

 

아래는 event.keyCode (13번이 enter)

 

function App() {

  const func1 =() =>{
    alert('good');
  };
  const func=(event)=>{
    if(event.keyCode ===13){     //엔터 눌러도 func1 실행
      func1();
    }
  }
   
  return (
      <div className="App">
        <button onClick={func1}>button</button><br></br>
        <input onKeyUp={func}>
        </input> 
      </div>
  );

  }
export default App;

 

 

기초중에 기초를 배웠으니 다음으로 넘어가자! 

 

www.youtube.com/watch?v=AJ_yDXBSkdw&list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX&index=3