[React] input 다루기

유저가 입력한 input 데이터 처리 방법

 

다양한 종류의 <input> 태그 사용하기

<input type="text"/>
<input type="range"/>
<input type="date"/>
<input type="number"/>
<textarea></textarea>
<select></select>

 

<input>에 입력시 코드 실행하고자 하면

onChange 나 onInput 이벤트핸들러 부착하면 됨.

<input onChange={()=>{ 실행할코드 }}/>
<input onInput={()=>{ 실행할코드 }}/>
// input에 유저가 뭔가 입력할 때마다 안에 있는 코드를 실행함.

 

<input>에 입력한 값 가져오는 방법

e라는 파라미터를 추가하고,

e.target.value 라고 적으면 현재 입력된 input 값을 가져올 수 있음.

 

이벤트핸들어에 들어가는 함수에 파라미터로 e를 추가하면

e는 이벤트 객체라고 부르고, 현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수임.

 

e.target 은 현재 이벤트가 발생하는 곳을 알려주고,

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

e.stopPropagation() 은 이벤트 버블링을 막아줌.

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

 

사용자가 input에 입력한 데이터 저장하는 방법

사용자가 input에 입력한 데이터는 state 나 변수에 저장해서 사용하는게 일반적.

function App (){

  let [inputValue, setInputValue] = useState(''); // input값을 저장할 state 생성
  return (
    <input onChange={(e)=>{ //input값이 변경될 때마다
      setInputValue(e.target.value)  // 값을 받아와서 state 변경
      console.log(inputValue)
    }} />
  )
}

위의 코드를 실행하면서 a를 입력하면 콘솔창에 아무것도 안보이고,

aa 입력해야 a가 보임.

state 변경함수는 약간 늦게 처리되기 때문임. 전문용어로 async하게 (비동기적으로) 처리된다고 함.

그리고 자바스크립트에서는 늦게 처리되는 코드들은 잠깐 제쳐두고 바로 다음줄을 실행해주기 때문에 console.log(입력값)이 먼저 실행되어 나오는 것일 뿐.

그냥 실행 순서만 좀 다를 뿐 state 변경은 상관없이 잘 됨.

 

배열의 맨 앞에 자료를 추가할 때는 unshift() 사용.

 

새로고침하면 새로 생긴 목록 없어지는 이유??

원래 브라우저는 새로고침하면 html, js 파일을 다시 읽기 때문에 모두 초기화 되어서.

 

리액트에서 생성된 글을 삭제할 때는 <div> 를 삭제 한다고 코드를 짜지 않고 state에서 글을 삭제해주세요 라고 짜야 함.

 

배열에서 원하는 자료를 삭제할 때는 splice( i, 1 ) i는 삭제하길 원하는 인덱스 값이고, 1이 있는 위치는 원하는 인덱스부터 어디까지 삭제하길 원하는지 나타냄(1은 선택한 인덱스만 삭제하길 원한다는 의미). 

 

---

출처: 코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!