React input 다루기

input 태그 사용하기

html이랑 input태그 만드는거부터 살짝 다름

html은 input 닫는 태그 없어도 됐는데 react는 필요함

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

---

input에 뭔가 입력시 코드를 실행하려면

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

이벤트 핸들러 개많음

onMouseOver={ } 이건 이 요소에 마우스를 댔을 때 안의 코드를 실행

onScroll={ } 이건 이 요소를 스크롤했을 때 안의 코드를 실행

몇십개 있는데 원하는 이벤트가 있으면 찾아서 사용해야할듯

---

input에 입력한 값 가져오는 법

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

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

현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수임

e.target => 현재 이벤트가 발생하는곳 알려줌

e.preventDefault() => 이벤트 기본동작 막아줌

e.stopPropagation() => 이벤트 버블링 막아줌

---

사용자가 input에 입력한 데이터 저장하기

function App (){

  let [입력값, 입력값변경] = useState('');
  return (
    <input onChange={(e)=>{ 
      입력값변경(e.target.value) 
      console.log(입력값)
    }} />
  )
}

---

글발행 버튼 누르면 유저가 입력한 글을 글 목록에 추가해주삼

function App (){
  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
      <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
      <button onClick={()=>{ 
        let copy = [...글제목];
        copy.unshift(입력값);
        글제목변경(copy)
      }}>글발행</button>
    </div>
  )
}

---

글마다 삭제버튼 기능 만들어주삼

function App (){
  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  return ( 
    <div>
    { 
     글제목.map(function(a, i){
        return (
          <div className="list">
            <h4>{ 글제목[i] }</h4>
            <p>2월 18일 발행</p>
            <button onClick={()=>{ 
              let copy = [...글제목];
              copy.splice(i, 1);
              글제목변경(copy);
           }}>삭제</button>
          </div> 
        )
     }) 
    }  
  </div>
  )
}