React | input? state로 저장해..

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

input, textarea, select 같은 모든 사용자의 입력에 해당되는 값들은 중요하니 state로 저장해줘야한다.

일단 state 부터 만들자.
아 아니다 input 부터 만들자.

<input />

만들었다.

그다음 상위에 state 만들자.

let [inputValue, inputFunc] = useState('')

초기값은 빈 문자열로 지정해준다.

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

onChange는 input에 값이 들어올 때마다 동작을 하는 이벤트이다.
e.target은 자바스크립트에서 지금 HTML의 이벤트가 동작하고 있는 요소를 뜻하며, .value는 input에 입력한 값 자체를 뜻한다.
위 코드로 input 에 들어오는 값을 콘솔창에서 확인해보자 🤤

값을 받긴 받았는데 state에 저장은 어떻게 하지 ?

뭘 어떻게 하나 변경함수로 저장하면 되지!
let [inputValue, inputFunc] = useState('')
변경함수는 useState로 만들어준 inputFunc 변수에 들어가있지..
inputFunc(새로대체할데이터) 이므로 e.target.value 을 넣어준다.

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

map 반복문 쓰면 뜨는 warning

이 워닝은 map쓰면서 key= {} 속성을 안써줘서 그렇다.
반복문 돌린 HTML 요소는 key 값을 꼭 써줘야한다. 안그러면 이렇게 에러는 아니고 워닝 뜬다. key 값으로는 0,1,2,,,, 이런 증가하는 변수 써주면 된다. 반복문에서 그게 뭘까..? 바로 바로 바로 props 할 때 인덱스가 필요했었던 map의 두번째 인자이다. i라고 쓰겠어...

{글제목.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h3 onClick={ () => { 누른제목변경(i) }} style={{ color: "skyblue" }}> { a }</h3>
            <span onClick={onIncrease}> 👍 { like } </span>
            <p> {날짜[2]} </p>
            <hr />
          </div>
        );
      })}

key 값을 넣어주니.. 콘솔창이 드디어 깨끗해졌다!