input 태그 사용하기

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

input 태그에서는 여러가지의 type을 사용하는 것이 가능하다.
상황에 맞게 사용하면 된다.

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

input태그에 입력한 값을 가져오고 싶으면 파라미터로 하나를 지어주고 파라미터.target.value를 사용하면 된다.

 <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />

input태그 안에서도 버튼처럼 onChange를 사용하면 입력한 값을 실시간으로 확인 할 수 있다.

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

이렇게 unshift를 사용해서 맨 앞에 값을 입력하는 것도 가능하다.
이런건 외우는게 아니라 구글링을 해서 찾으면 된다.
주의할 점은 원본을 보존하기 위해서 원래의 값을 복사해 사용하는 것이 중요하다.

서버가 있다면 그런 문제들을 해결할 수 있다.

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>
  )
}

물론 삭제 기능도 splice를 사용해서 삭제 할 수 있다.
삭제 기능은 index가 필요하기 때문에 코드를 잘 짜야한다.
splice는 ()안에 인덱스, 1을 입력해서 삭제하면 된다.