[React] 버튼 누르면 input에 입력한 값 저장하기

input 태그 속성

 

type : input 태그의 종류
value : input 태그의 초기값
name : 제출시 서버로 전달되는 이름
placeholder : 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말

 

 

 

버튼 기능 구현을 위해 필요한 state들

 

1. text state : input에 입력한 값 저장할 state

2. name state : 버튼 누를 때 text state값 저장할 state

 

 

 

 

위의 기능 구현을 위해 필요한 function들

 

1. onChange : input에 입력한 값 text state에 넣어주는 함수

2. onClick: 버튼 눌렀을 때 text의 값 name state에 넣어주는 함수

 

 

 

ex) state와 function들

const [text,setText] = useState("");
const [name,setName] = useState("");

const onChange = (e) => {
    setText(e.target.value);
}

const onClick = () => {
    setName(text);
    console.log(name)
}

 

<div>
  <input type='text' name='test' onChange={onChange}></input>
  <button onClick={onClick}>버튼</button>
  <p>input 입력값 : {name}</p>
</div>