[React] useState, onChange를 활용하여 input값 변화시키기! input 상태관리

목표

 

useState, onChange를 활용하여 input값 변화시키기!

input 상태를 관리할때는 useState, onChange 를 사용할 수 있다.

input에 value값 수정했을때 바뀌지 않을 경우 아래와 같이 설정을 바꿔보쟈

---

import { useState } from 'react';
import './App.css';

function App() {
  const [value, setValue] = useState('');
  
  const onChange =(e)=>{
    setValue(e.target.value)
    //console.log(e.target.value)
  }
  
  return (
    <div>
      <input value={value} onChange={onChange} />
      <p>내용 : {value} </p>
    </div>
  );
}

export default App;

 

1. const onChange는 input에서 값을 입력할때마다 변화를 감지해주는 역할을 한다.

2. useState를 이용하여 input 상태 관리가 가능하다.