input다루기

먼저, 사용자가 입력한 input값을 state로 저장해보자.

저장공간이 필요하기에 빈 state를 먼저 만든 후,

let [입력값, 입력값변경] = useState('');

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

input태그에 onChange를 달아 내부의 파라미터에 e를 쓰고 e.target.value를 쓰면 사용자가 입력한 값이 나온다. 

console.log(e.target.value)를 하면 input태그에 값이 변경될 때마다 콘솔창에 뜨게 된다. 이제 state에 저장하려면

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

입력한 값을 입력값변경인 state 변경함수로 바로 바꾸어주면 된다. 

 

만약, 블로그처럼 값을 입력해 저장을 누르면 글 리스트에 추가가 되는 UI를 만들고 싶으면 다음과 같다.

 <div className="publish">
        <input  onChange={ (e) => { 입력값변경(e.target.value) } }/>
        <button onClick={ () => { 
          var arrayCopy = [...글제목];
          arrayCopy.unshift(입력값); //unshift는 어레이의 맨앞에 새로운 것을 추가함
          글제목변경(arrayCopy);
        } }>저장</button>
</div>

이렇게 먼저, onChange를 이용해 입력값을 담아주고 button을 클릭하면 원래 있던 글제목이라는 array에 복사본을 만든 후, 복사본에 unshift문법을 써서 추가해주고, 글제목변경이란 state변경문법을 사용해 바꿔주면 된다.

물론, 위엔 자동으로 UI를 만드는

{
        글제목.map(function(a,i) {
          return (
            <div className="list">
              <h3 onClick={ () => {클릭변경(i)} }> {a} </h3>
              <p>2월 19일 발행</p>
              <hr />
            </div>
          )
        })
}

map반복문의 코드가 있어서 글제목state만 변경해주면 자동으로 생성되게끔 해놓았다.

 

정리해보면, 사용자가 입력한 글을 state로 저장하고, 버튼을 누르면 입력한 글 state를 원래 글 state에 저장하는 것이다.