728x90
반응형
위치: App.js
import React from 'react';
function app() {
return (
<div className="App">
<div>
아이디: <input type="text" onChange={onChangeHandlerID} value={id} />
</div>
<div>
비밀번호: <input type="password" onChange={onChangeHandlerPW} value={pw} />
</div>
<button onClick={btnClick}>로그인</button>
</div>
);
}
export default app;
1. 리액트 App.js의 return문에는 하나의 큰 <div>가 있어야함
2. <input>태그는 onChange & value값을 이용하여 입력되는 값을 받을 수 있음
3. 비밀번호는 1234 이렇게 보이면 안되니 <input>태그의 type을 password로 처리하기
const [id, setIdValue] = useState('');
const [pw, setPwValue] = useState('');
//아이디
const onChangeHandlerID = function (event) {
const inputValue = event.target.value;
setIdValue(inputValue);
};
//비밀번호
const onChangeHandlerPW = function (event) {
const inputValue = event.target.value;
setPwValue(inputValue);
};
4. 입력된 아이디는 <input>태그에서 onChange 발생시 event.target.value로 값 가져오기
5. setIdValue에 넣어주어 리액트에게 변경돈 값을 state로 관리 : setIdValue(inputValue);
const btnClick = (event) => {
alert(`입력한 id는 ${id} , 비밀번호는 ${pw}`);
setIdValue(''); //초기화
setPwValue(''); //초기화
};
6. 버튼 클릭시 입력한 데이터 보여주기 : 백틱 사용 + 입력된 값 : ${id}, ${pw}
7. 팝업 후에는 아이디&비밀번호 칸 초기화 하기 : setValue('')
TIL
리액트의 state를 사용하는 것이 생소해서 간단한 것 같았지만 어려웠다.
그럼에도 실습을 통해 이해가 되었고 input태긔 값을 onChange 이벤트 발생시 값을
전달하는 방법에 대해 배울 수 있는 기회였다.
반응형
'TIL :: Today I Learned' 카테고리의 다른 글
#04 리액트 입문 :: 리액트 불변성과 중요한 이유 (immer.js) (1) | 2023.11.02 |
---|---|
#03 리액트 입문 :: 카운터 앱 만들기 (0) | 2023.11.02 |
#01 리액트 입문 :: App.js에서 JSX 실습 (컴포넌트) (0) | 2023.10.31 |
개인과제 (#1 영화 TOP 20 검색 사이트 구현 ) 피드백 개선점 반영 (0) | 2023.10.30 |
JS 비동기/동기 async + await 사용 (0) | 2023.10.27 |