[React] input의 상태 관리

React의 component에서 input을 다뤄보자.

<input />

input을 사용 할 때는 input에 적은 값을 데이터로 받아서

적용하는 방식을 사용 하는데

React에서는 useState를 활용하여 input에 입력한 값을 저장해서 받아 쓴다.

 

let [inputVal, setInputVal] = useState('');

일단 저장할 state를 만들어주고 기본 설정은 빈 값으로 설정을 해준다.

 

 

 

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

이벤트 함수는 보통 이벤트 객체 e 를 파라미터로 받아서 사용 할 수 있는데

 

onChange의 e.target.value를 통해 input에 텍스트가 적혀질 때마다 inputVal 값을 변경해주게 만든다.

 

이 부분을 조금 응용해 보자.

 

버튼 클릭 시 input 내용을 기존 array에 추가하려면?

function App() {

  let [title, setTitle] = useState(['Iron-man', 'Thor', 'Hulk']);
  let [inputVal, setInputVal] = useState('');

  function addTitle(){
    let newArray = [...title];
    newArray.unshift(inputVal);
    setTitle(newArray)
  }

  return (
    <div className="App">
      {
        title.map((title, index)=>{
            return(
              <h3 { title } </h3>
            )
        })

      }
        <input onChange={(e) => setInputVal(e.target.value)}/>
        <button onClick={()=> addTitle() }>저장</button>
    </div>
  );
}

button의 onClick에 title array의 맨 앞에 input에 적은 데이터를 넣어주는 함수를 만들어 주면 된다.