(React) 리액트 기초 4. 로그인 페이지 만들기

 

(1) 부모 컴포넌트 App.js를 만든다.
로그인 페이지를 구현할 Login.js를 import해주고, return해서 자식 컴포넌트인 Login을 렌더링해준다.

  import React from "react";

  import Login from "./Login";

  function App() {

    return <Login />;

  }

  export default App;

 

(2) 자식 컴포넌트 Login.js에서 useState 모듈을 사용할 준비를 한다.

    import { useState } from "react";

    function Login() {

    const [id, setId] = useState("");

    const [pw, setPw] = useState("");

   

    ~~

 

   export default Login;

 

(3) input창을 구현해준다.
type="password"를 넣어주면 input창에 입력한 문자가 자동으로 가려진다. 

    return (

        <div>

        <p>

            로그인 : <input type="text"/>

        </p>

        <p>

            비밀번호 : <input type="password"/>

        </p>

        <button>로그인</button>

        </div>

    );

 

(4) 로그인 input과 비밀번호 input에 value와 onChange 이벤트를 넣어준다.

      <p>

            로그인 : <input type="text" value={id} onChange={idOnChangeHandler}/>

        </p>

value={id}는 <input> 요소의 현재 값으로, id 변수를 설정한다는 뜻이다.
id 변수의 값이 input요소에 표시된다. 비밀번호 input도 동일한 방법으로 작성한다.

onChange 이벤트는 <input> 요소의 값이 변경될 때마다 호출되는 이벤트다.
이벤트가 발생했을 때 실행될 함수를 만들어주고 참조해준다.

  const idOnChangeHandler = (event) => {

      setId(event.target.value);

    };

event.target은 이벤트가 발생한 요소, 즉 <input value={id}>를 말한다. 이때 함수는 event를 매개변수로 받고 있어야 한다.
setId는 처음에 useState Hook으로 미리 선언해둔 업데이트 함수다. 
event.target.value = 즉, 사용자가 입력한 값에 접근해서 id가 변경되면 다시 렌더링하는 일을한다. 

 

(5) button태그에 onClick 이벤트를 넣고, 이벤트가 발생했을 때 실행될 함수를 넣어준다.

        <button

            onClick={() => {

            alert(`

                    고객님이 입력하신 아이디는 '${id}'이며,

                    비밀번호는 '${pw}'입니다.`);

            setId("");

            setPw("");

            }}

        >

            로그인

        </button>

onClick={ ()=> alert(~) } 화살표 함수를 사용해서 곧바로 함수를 생성해줄 수 있다. 
status값을 가져와서 사용자가 입력한 값을 표시해준다.

클릭 후 입력했던 값이 사라지게 만들기 위해서 업데이트 함수인 setId, setPw를 비워준다.
이제 클릭을 하면, alert창이 떠오르고 그 다음에 입력했던 값이 사라지게 된다.