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

서론

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

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


javascript
1import React, { useState } from 'react';  
2
3function InputTest() {  
4  const [text, setText] = useState('');  
5  
6  const onChange = (e) => {  
7    setText(e.target.value);  
8  };  
9  
10  const onReset = () => {  
11    setText('');  
12  };  
13  
14  return (  
15    <div>  
16      <input onChange={onChange} value={text}  />  
17      <button onClick={onReset}>초기화</button>  
18      <div>  
19        <b> 내용: {text}</b>  
20      </div>`  
21    </div>  
22 );  
23}

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를 어떻게 사용하는지 예제를 통해 알아보았다.