⚛️Start! React : section06 - Handling Event

이번 시간에는 event함수를 중점으로 react에서 어떻게 구동시키고 어떻게 구성하는지 알아보려고 한다. 우선 함수를 생성하기 전에 App 컴포넌트를 참고하자.

 

function Class_App() {

  return (

    <div className="App">

      <header className="App-header">

        <h1>App.js</h1>

        <button onClick={showName}>show name</button>

        <button onClick={showAge}>show age</button>

        <input type="text" onChange={showText}></input>

        <input type="text" onChange={(e) => {

          const txt = e.target.value;

          usedText(txt)

        }}></input>

      </header>

    </div>

  );

}

export default Class_App;

 

위의 각 태그들에 onClick속성을 사용해서 함수를 불러오고 있다. onClick뿐만 아니라 onChange를 통해서 즉각적으로 값이 변동될 때 마다 함수를 호출하는 속성도 사용하고 있다. 함수를 호출하는 것은 그리 어렵지 않다. 다만 두 번째 input태그를 보면 화살표기법을 사용했다는 것이다. 아래 코드는 해당 커포넌트에 필요한 함수들이다.

 

function showName() {

  console.log('MyName')

}

function showAge() {

  console.log('MyAge')

}

//event 사용하기

function showText(e) {

  console.log(e.target.value)

}

function usedText(text) {

  console.log(text)

}

event를 사용해서 target을 이용해 특정 태그의 value를 가지고 올 수 있다. showText함수는 App컴포넌트의 첫 번째 input태그를 의미하고 가리키고 있다. usedText 함수는 두 번째에서 사용된다. 두 번째 input태그 e.target.value값을 txt라는 변수에 담아 usedText 로 해당 txt값을 전달해준다.

해당 수업은 그리 어렵지 않다. 리액트의 함수를 사용하는 방법을 보여주기 위한 수업이라 js에 익숙하다면 충분히 이해 할 것이다.