[React]Input 활용하기
input 값 state에 저장 및 사용
1.입력받은 값을 받을 state를 생성
let [입력값, 입력값변경] = useState('');2.입력받은 값을 state에 담기
<input onChange={ (e)=>{ 입력값변경(e.target.value)} }/>3.입력받은 값을 불러오기
{입력값}예제 : 블로그 글 발행 기능 만들기
UI 만들기
App.js
<div className='publish'>
<input/>
<button>저장</button>
</div>App.css
.publish {
margin: 30px 0;
}
.publish input {
padding: 10px;
font-size: 16px;
border-radius: 5px;
width: 80%;
border: 1px solid grey;
}
.publish button {
display: block;
margin: auto;
margin-top: 10px;
}
입력받은 값 저장 및 사용
<div className='publish'>
<input onChange={ (e)=>{ 입력값변경(e.target.value)}}/> // 1.입력받은 값 저장
<button onClick={ ()=>{
var arrayCopy = [...글제목];
arrayCopy.unshift(입력값); // 2.입력받은 값 사용
글제목변경(arrayCopy);
} }>저장</button>
</div>unshift() : 배열의 맨 앞에 추가
push() : 배열의 맨 뒤에 추가
