React - input 다루기

사용자가 입력한 input 역시 중요한 데이터이기 때문에 state에 보관하는 것이 일반적입니다. 그런데 입력하고 나서 그것이 저장되지 않는다면 아무런 의미가 없을 것입니다. 이번에는 사용자가 input에 입력한 값을 저장하는 방법에 대해 공부해보겠습니다.

 

function App (){

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

  return (
    <div>
      
      ...
      
    </div>
  )
}

 

우선 inputVal이라는 비어있는 state를 만들었습니다. 저렇게 비어있는 문자열을 이용하면 비어있는 초기 state를 만들 수 있습니다.

 

 

사용자가 input에 어떤 값을 입력했는지 알아내기 위해서는 onChange 이벤트핸들러를 이용하면 됩니다. onChange 이벤트핸들러를 input에 주게 되면 input에 어떤 값을 입력할 때마다 특정함수를 동작시킬 수 있습니다.

 

function App (){

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

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

 

 

e.target.value라는 부분을 좀 살펴보겠습니다. 이 부분은 자바스크립트 문법인데요, e.target은 현재 이벤트가 실행되는 곳을 가리킵니다. 여기선 input을 의미합니다. 그리고 .value는 입력된 input의 값을 의미합니다. input 태그가 나오면 e.target은 자주 등장하는 것 같으니 연관지어 기억하는 것도 좋은 방법이 될 것 같습니다.

 

그럼 위 코드를 해석해보면 이제 input에 어떤 값이 입력될 때마다 그 입력한 값이 콘솔에 출력된다는 뜻입니다.

 

그런데 궁극적으로 지금 해야될 것은 input 값을 콘솔에 출력하는 것이 아니라 저장해야되는 것입니다. 일단 저장을 해야 추후에 활용을 할 수 있기 때문입니다. 어떻게 하면 좋을까요?

 

 

 

function App (){

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

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

 

state 변경함수를 사용해주면 됩니다. state 변경함수를 사용하면 아예 저장된 state의 값을 완전히 대체시킨다는 뜻이므로 입력된 값으로 아예 데이터를 대체시키는 개념입니다. 입력이 될 때마다 새로운 데이터인 셈이므로 바로바로 새로운 데이터가 state에 저장되는 것입니다. input을 저장할 때는 이런 식으로 한다는 것을 알아두면 좋을 것 같습니다.