210708 input

input 다루기

사용자가 입력한 글을 변수(state)에 저장하기
리액트에서는 닫는 태그 필수
<input /> 혹은 <input></input>

onChange(): 뭔가 입력이 될 때 안의 함수가 실행됨

e.target.value
e.target: 이벤트가 동작한 곳
input이 바뀔 때 마다 그 값을 받아 달라는 코드는 아래처럼 쓰면 된다.

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

input을 이용해서 글 발행 기능을 만들어보자

서버+DB가 없으니 영구 저장은 안됨
변수나 state에 저장해서 보여주도록 함. -> title state에 저장하기!

titleChange 함수를 만들어서 배열에 추가

  function titleChange(sth){
    var newArray = [...title];
    newArray.push(sth);
    setTitle(newArray);
  }

버튼을 누르면 저장되게끔

      <div className="publish">
        <input onChange={(e)=>{ setSth(e.target.value) }}/>
        <button onClick={()=>{titleChange(sth)}}>Save</button>
      </div>

• unshift(): 배열의 맨 앞에 값을 추가해줌
  나는 push()를 사용했더니 맨 뒤로 감.