React- useState를 이용한 예제를 만들어보자

서론

오늘은 앞서배운 useState를 이용해 예제를 만들어보자.

useState() 함수로 여러 개의 상태 값 관리하기

import React, { useState } from 'react';  

function InputTest() {  
  const [text, setText] = useState('');  
  
  const onChange = (e) => {  
    setText(e.target.value);  
  };  
  
  const onReset = () => {  
    setText('');  
  };  
  
  return (  
    <div>  
      <input onChange={onChange} value={text}  />  
      <button onClick={onReset}>초기화</button>  
      <div>  
        <b> 내용: {text}</b>  
      </div>`  
    </div>  
 );  
}  

export default InputTest;`

const onChange = (e) => {

setText(e.target.value); }

이벤트가 일어나는 타겟의 value를 text 값으로 업데이트 해준다.

const onReset = () => {

setText(‘’); }

text 값을 ‘’ 공백으로 업데이트 한다.

<input onChange={onChange} value={text} />

input 태그에 onChange 이벤트를 등록하고 value 값으로 text 상태 값을 준다.

value 값을 설정해주지 않으면 상태가 바뀌었을 때 input 내용이 업데이트 되지 않는다.

마치며

오늘은 useState를 어떻게 사용하는지 예제를 통해 알아보았다.