[TIL] 두개 이상의 input 데이터 관리하기

인스타그램 클론 프로젝트를 진행하면서 id와 pw 를 입력하는 input 의 value 를 각각 따로 가져왔었다.

리팩토링을 하면서 조금더 효율적인 방법은 없을까 고민하다가 두개의 input의 value 를 한번에 가져오면 조금이나마 가독성이 좋을 것 같았다.

class Login extends Component {
  constructor() {
    super();
      this.state = {
        id: "",
        pw: "",
    }
  }
}

getValId = (e) => {
  this.setState({
    id: e.target.value,
  })
}

getValPw = (e) => {
  this.setState({
    pw: e.target.value,
  })
}

render() {
  return(
    <>
      <input type="text" onChange={this.getValId} />
      <input type="password" onChange={this.getValPw} />
    </>            
  )
}

위 로직은 원래 작성한 것을 예제화 한 것이다.

👇

class Login extends Component {
  constructor() {
    super();
      this.state = {
        id: "",
        pw: "",
    }
  }
}

handleChange = (e) => {
  this.setState({
    [e.target.name]: e.target.value,
  })
} 

render() {
const { handleChange, state: { id, pw } } = this;
  return(
    <>
      <input type="text" name="id" onChange={handleChange} />
      <input type="password" name="pw" onChange={handleChange} />
    </>
  )
}

handleChange 에서 event 를 인자로 받아 event 가 발생한 target 의 name 은 상황에 따라 각각 id 와 pw 이다. 그러므로 name 이 id 인 input 에서 event 가 발생하면 this.state.id 의 value 가 e.target.value(입력한 값) 으로 setState 된다. 이는 pw 또한 마찬가지이다.

fetch()

로그인 버튼을 클릭하면 id, pw 를 서버로 보내 응답을 얻는 로직을 구현해보았다.

login = (e) => {
  e.preventDefault();
  fetch("API 주소", {
    method: "POST",
    body: JSON.stringify({
      email: this.state.id,
      password: this.state.pw,
    })
  })
    .then((res) => res.json())
    .then((res) => console.log(res));
}

render() {
  return(
    <>
      <button onClick={this.login}>로그인</button>
    </>
  )
}

로그인 버튼을 클릭하면 login 메서드가 실행된다. button 태그의 기본적인 동작을 방지하는 e.prventDefault() 가 실행되고, fetch() 를 통해 백엔드 서버에 입력한 id와 pw를 json 형식으로 바꾸어(JSON.stringify()) 보내어 key 값이 일치하면 res(response) 를 받을 수 있다. 서버와 소통할 때에는 json 형식의 언어로 소통하기 때문에 돌아오는 응답 또한 json 이다. 그러므로 .then((res) => res.json()) 를 통해 json 을 javaScript 로 바꾸어 주고 다시 콘솔에 찍어주면(.then((res) => console.log(res))) 성공적인 소통을 의미하는 access token 을 확인할 수 있다.