0612-TIL-React 1주차

State 만들기, 변경하기

 

만들어야 할 웹페이지

기능 :  input창에 입력한 값을 id와 password에 저장하고, 그 값을 alert창에 띄워주기

 

내가 작성한 코드

import React, { useState } from "react";

function App() {
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  return (
    <div>
      아이디 :
      <input
        onChange={function (event) {
          setId(event.target.value);
        }}
      />
      <br></br>
      비밀번호 :
      <input
        type='password'
        onChange={function (event) {
          setPassword(event.target.value);
        }}
      />
      <br></br>
      <button
        onClick={function () {
          alert(`고객님이 입력하신 아이디는 ${id}이며, 비밀번호는 ${password}입니다.`);
          setId("");
          setPassword("");
        }}>
        로그인
      </button>
    </div>
  );
}

export default App;

위의 코드처럼 작성하면,

화면에서 alert창에 값을 띄워주는 것까지는 문제가 없다.

 

하지만, alert창 이후 serId와 setPassword로 값을 초기화 시켜주는 부분이 작동하지 않게 된다.

 

물론 window.location.reload()를 하면 페이지가 새로고침 되어서 input 창 안의 value가 없어지지만

react를 이용하는 것의 장점이 SPA인 만큼 새로고침이 아니라

해당 값만 초기화 시켜주는 방식으로 만들어줄 필요가 있다고 생각한다.

 

정답 코드

import React, { useState } from "react";

function App() {
  const [id, setId] = useState("");
  const [password, setPassword] = useState("");

  const onIdChangeHandler = (event) => {
    setId(event.target.value);
  };
  const onPasswordChangeHandler = (event) => {
    setPassword(event.target.value);
  };

  return (
    <div>
      아이디 :
      <input type='text' value={id} onChange={onIdChangeHandler} />
      <br></br>
      비밀번호 :
      <input type='password' value={password} onChange={onPasswordChangeHandler} />
      <br></br>
      <button
        onClick={function () {
          alert(`고객님이 입력하신 아이디는 ${id}이며, 비밀번호는 ${password}입니다.`);
          setId("");
          setPassword("");
        }}>
        로그인
      </button>
    </div>
  );
}

export default App;

위의 코드처럼 event가 발생할 때 실행되는 함수를 미리 선언하고,

input의 value값을 id와 password로 지정하면,

alert 창 이후 값이 초기화가 된 것이 input창에 반영되어

input창이 빈칸으로 보이게 된다!