Input 다루기

구현하는 기능과 배우는 컨셉

✔ input데이터를 저장할 state 만들기
✔ input에 달 수 있는 onChange
✔ input입력시 저장하여 추가 리스트만들기

input state 저장

let [inputValue , inputState] = useState('');
let [글제목,글제목변경] = useState(['남자코트추천','강남우동맛집']);
return ( 
<div className ="inputSave">
  <input onChange= {(e)=>{
  inputState(e.target.value);
  }}
  />
  <button onClick={()=> {
  let array= [...글제목];
  arry.unshift(inputValue);
  글제목변경(array);
  }}
  > 저장 </button>

◾ onChange : input에 입력할때마다 특정 함수를 동작시킴
◾ input에 입력할때마다 state에 저장한다
◾ onChange이 될때마다 입력한value값을 inputState에 저장되어 inputValue가 수정된다.

버튼을 누르면 입력값 state를 [글제목]state에 추가하기

◾ 버튼을 클릭시 글제목을 변경하기위해 변경된값을 글제목변경에 넣늗나
◾ 글제목 state를 직접수정하지않는다
◾ 글제목을 복사해서 array라는 카피본 하나를 만든다
◾ unshift를 이용해서 inputValue를 배열 맨앞으로 추가해준다.
◾ 이렇게 수정된 변수 array를 글제목변경함수에 넣어 수정해준다.