React - 기초 ( 이벤트 핸들링 )

- React 이벤트 핸들링

JSX

 

리엑트는 이벤트를 핸들링 하기 위해 함수를 사용한다. 이벤트를 발생시키기 위해서 2개의 버튼과 한개의 Input박스를 만들었다.

해당 함수

 

showName함수는 클릭 이벤트 발생 시 console.log를 통해 이름을 보여주는 함수이고, 

showAge는 showName과 같이 나이를 보여주는 함수이다.

showName은 매개변수 없이 직접 이름을 입력하였고, showAge는 매개변수를 통해 console.log를 진행했다.

 

이벤트 발생 시 개발자 도구를 통해서 이벤트 발생 여부를 확인할 수 있다.

 

- e.target

다음은 Input박스를 통한 이벤트 핸들링이다. input박스를 통해 입력을 한 값은 이벤트 객체인 e를 통해서 e.target.value로 값을 확인 할 수 있다. (해당 showText는 showText(e)를 하여 이벤트 객체 e를 넘겨준다.)

 

이벤트 확인

 

e.target.value를 통해서 input박스에 입력한 text를 확인할 수 있다.

 

강의 주소 : https://www.youtube.com/watch?v=05uFo_-SGXU&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-

깃허브 주소 : https://github.com/beombeom1119/react_word