React에서 input태그 사용

<input>태그란?

유저의 입력을 받을 수 있는 박스를 뜻한다.

실제로

이런식으로 input태그를 사용하면 저런 네모난 박스가
생성이 되는데, 그 안에다가 글들을 쓸 수 있다.

물론 글을 쓰거나 할 때 input태그 말고도 다른 태그들도 있지만, 지금은 React관련 블로그기 때문에 빠르게
스킵하도록 하겠다.

• 뭔가 입력시 실행해주고 싶다면?

  onchange 나 oninput 이벤트 핸들러를 써주면 된다.

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

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

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

이렇게 가져올 수 있다.

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

state를 써서 저장하는 방법을 알아보자

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

useState('')로 빈값으로 지정해주었고, input 태그 안의 값이 onChange될 때마다 state에 e.target.value를 넣으라고 코드를 짰다.

버튼을 누르면 글 제목 state에 넣기

input 태그 뒤에 button 태그를 하나 만들어 주는 것부터 시작이다.

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

앞에서 배운 state문법을 다시 잘 생각해서 해보자면
먼저, state를 카피해 와야한다.
우리가 카피해야 할 state는 글제목 state이므로

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

이렇게 하면 copy해온 글제목state에 input 태그를 통해 넣은 값을 unshift(입력값) 해서 추가해 줄 수 있다.