[(과제) [React] State, Props, Event] - 1

Mission 1) Login | 사용자 입력 데이터 저장

• 다음의 순서에 맞게 코드를 작성하여 ID, PW <input>에 입력된 값을 state 에 저장해주세요.

1. ID <input> 에서 onChange event 발생
2. event 발생 시 handleIdInput 함수 실행
3. handleIdInput 는 이벤트를 인자로 받음
4. event가 일어난 요소에 담긴 value 값 (event.target.value)을 state에 저장
5. 위의 과정을 PW <input> 에도 동일하게 적용
6. 위 순서대로 완료 후 Add : Mission 1 - 사용자 입력 데이터 저장 기능 구현 commit message를 남긴 후 push 해주세요.

1. ID <input> 에서 onChange event 발생

이벤트 핸들러 속성을 각자 따로준다.
당연한 얘기지만 각자 다른 동작을 해야하기 때문이다.

<input
  type="password"
  name="Password"
  id="userPassWord"
  placeholder="비밀번호"
  onChange={this.handlePwInput}
/>

<input
  type="text"
  name="ID"
  id="userId"
  placeholder="전호번호, 사용자 이름 또는 이메일"
  onChange={this.handleIdInput}
/>

2. event 발생 시 handleIdInput 함수 실행

react에서 함수를 작성하는 방법이다.
input 에 적어둔 onChange이벤트 발생시 handleIdInput 함수 실행 ===> handleInput = () => {} 핸들인풋이라는 함수 생성 & 인풋 태그 내 onChange = {this.handleInput}
handleInput은 event 를 인자로 받음 ===> 함수에서 인자(e)를 받고(???) state에 저장
event가 일어난 요소에 담긴 value값 (event.target.value) ===> state에서 저장 관리

handleIdInput = e => {
    //IdInout은 event의 약자 e를 인자로 받음
    this.setState({
      idInputValue: e.target.value,
    });
  };

  handlePwInput = e => {
    this.setState({
      pwInputValue: e.target.value,
    });
  };

  //link handle
  goMain = () => {
    this.props.history.push('/main-unseo');
  };

이부분 에서 기억 해야 할 부분은 리액트가 함수를 실행시키는 부분에서 jquery와 바닐라 자바스크립트를 운용하는 부분에서 큰 차이를 보인다는 부분이다.
리액트는 자바스크립트 그 자체를 노드로 관리하기 때문에 자체 handler를 통해서 함수 이벤트들을 적용시키는 부분들이 있다.

3. handleIdInput 는 이벤트를 인자로 받음

해당 내용을 진행하기 위해서는 key값이란 부분을 짚고 넘어가야하는데
객체 안에서 key값을 []로 감싸면 그 안에 넣은 레퍼런스가 가르키는 실제 값이 key값으로 사용이 된다.
예를 들어 다음과 같은 객체를 만들면 아래와 같은 결과를 얻을 수 있다.

const name = 'variantKey';
const object = {
  [name] : 'value'
};

//결과 값
{
  'variantKey' : 'value'
}

해당 내용을 참조 하여 idInputValue,pwInputValue두개의 state를 만들었다.
state라는 것이 input 에만 적용이 되는것인지는 wecoed 3주차 되는날에 질문해보려고한다.

import './Login.scss';
import React, { Component } from 'react';

class Login extends Component {
  //login handle
  constructor() {
    super();
    this.state = {
      //state 말 그대로 컴포넌트의 상태를 수정
      idInputValue: '',
      pwInputValue: '',
    };
  }
}