react 기초( 5 ) - input

열심히 정리해둔 글이 3번이나 날라갔다...😥 

다시 써보즈아~~~~~❕❕❕❕❕❕❕❕❕❕❕

input 태그를 이용해서 사용자가 입력한 글을 다뤄보겠다!

<input onChange = { ( ) = > {실행할 코드}} ></input> 

=>이렇게 해주면 된다!

onChange는 이벤트 핸들러라고 하는데 <input>에 유저가 입력할 때마다 인풋안에 있는 코드를 실행시켜준다.

onMouseOver={ }  ( 이 요소에 마우스를 댔을 때 안의 코드를 실행해줌) ,

onScroll={ }( 이 요소를 스크롤했을 때 안의 코드를 실행해줌.) 등 많은 이벤트가 있으니 구글검색으로 찾아서 씁시당..

 

<input>태그에 입력한 값을 가져와보자

<input onChange={(e)=>{ console.log(e.target.value) }}/>

=>e는 파라미터를 추가해주고 e.target.value 는 현재 <input>에 입력된 값을 가져올 수 있다.

e.preventDefault() 이러면 이벤트 기본 동작을 막아주고

e.stopPropagation() 이러면 이벤트 버블링도 막아줍니다.

( 좋아요버튼 누를 때 모달창도 떠버리는 버그 해결가능)

 

사용자가 input에 입력한 데이터를 저장해보자

span눌러도 모달창이 뜸 이것을 버블링 현상(상위 html로 퍼지는것)이라고 하는데 막고 싶다면

=>state를 하나 만들어주고 onChange 될때마다 state에 e.target.value를 넣으시오 . 라고 코드를 짜보았습니다. 

 

💁‍♀️이렇게 코드를 만들어주고 <input>에 a를 넣고 실행하면 a는 안0뜨고 aa를 입력하면 그때 a가 콘솔창에 뜬다💁‍♀️

 

왜그럴까? state 변경 함수의 특징때문인데 state변경 함수는 비동기적 (약간 늦게) 으로 처리가되기 때문입니다

 

자바스크립트에선 늦게 처리되는 코드들은 잠깐 제쳐두고 바로 다음줄을 실행한다고 하네요! 그래서

console.log(입력값)이 먼저 실행되는 것이지요!

 

span눌러도 모달창이 뜸 이것을 버블링 현상(상위 html로 퍼지는것)이라고 하는데 막고 싶다면&nbsp; 위코드처럼 e.stopPropagation()을 입력해주면됨

 

unshift 사용해서 input에 입력하고 버튼을 누르면 글이 추가되는 기능만들기

리액트는 스위치와 전등을 만들어놓고 state만 만지면 된다! 생각하고 코드를 짜보자

글제목.map() 이렇게 코드짠 덕분에 글제목 state 갯수에 맞게 html이 알아서 생성.

 

글제목을 가져와서 입력값으로 바꿔주겠다.

1. 버튼누르면 일단 글제목state를 카피. array 형태의 state 조작은 우선 카피부터하면 됩니당.

2. 카피한거에 unshift(입력값) 해줬는데 이게 뭐냐 array자료 맨 앞에 자료추가하는 문법입니다.

3. 그리고 state변경함수 사용.

 

slice를 사용해서 삭제버튼 누르면 글이  없어지게 만들기

<input>태그에 입력한 값을 가져와보자

 

array자료에서 x번째 데이터를 삭제하고 싶으면

array자료.splice(x, 1) 이라고 사용하면 됨. 

 

 

=> 버튼을 누르면 글제목 state 에서 i 번째 데이터를 삭제 해주겠다. 라고 코드를 짜보았습니다!!  잘실행 되는군요ㅎ_ㅎ

 

다음 포스팅에선 새로운 프로젝트를 생성하고 Bootstrap을 사용해보겠습니다!