#02 리액트 입문:: 아이디 & 비밀번호 입력 Input 컴포넌트 만들기

위치: 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 이벤트 발생시 값을 

전달하는 방법에 대해 배울 수 있는 기회였다.