React - input 태그 활용하기

input 태그란

유저가 여러가지 값들을 입력할 수 있도록 해주는 태크입니다.

종류가 매우 많으니까 필요할 때 찾아서 사용합시다.

대표적인 input 태그

 

input 태그의 이벤트 핸들러

이벤트 핸들러란 유저가 어떠한 행동을 했을 때 어떤 동작을 하도록 만들 수 있는 기능입니다.

이것또한 종류가 매우 많으므로 필요할 때마다 찾아서 사용합시다.

대표적인 이벤트 핸들러

 

이벤트 핸들러를 이용해서 입력값 받기

• 이런식으로 event 객체를 받아와서 event.target.value 하게되면 input 태그의 값을 가져올 수 있습니다.
• 여기서 문제점은 State 를 처리하는 함수는 비동기 처리가 되기 때문에 비교적 실행 시간이 오래 걸리는 setInput 이 처리되기 전에 console.log 가 먼저 실행된다는 것입니다.

 

이벤트 버블링

이벤트 버블링이란 이벤트가 상위 html 로 퍼지는 현상입니다. 즉, 자식 태그를 눌러도 부모태그, 그 부모의 부모태그로 계속 이벤트가 퍼저나가서 부모태그에 있는 이벤트까지 전부 다 실행이 되는 현상입니다.

버블링 현상을 막고 싶다면 이벤트 핸들러에 있는 함수에 파라미터 값으로 event 를 받아서 ‘event.stopPropagation()’ 해주면 됩니다. (이벤트를 받는 변수의 이름은 자유입니다.)

 

응용하기 ( 글 추가하기 & 삭제하기 )

먼저  input 태그의 값을 담을 State 를 하나 만들어줍니다.

 

그 다음에 아래와 같이 onChange 를 사용해서 input 태그가 바뀔 때마다 input State를 바꿔주고, 버튼이 눌릴 때 마다 subject, like State 배열에 새로운 값을 추가해주면 글 추가하기 완성입니다.

 

그 다음에 글 삭제하기를 구현합니다.