React_Mission 1. state에 input의 입력값 넣기

React_Mission 1. state에 input의 입력값 넣기

ID input에서 onchange evevt 발생 --> input 태그 내 속성으로 삽입
event 발생 시 handleInput 함수 실행 --> handleInput = () => {} 핸들인풋이라는 함수 생성 & 인풋 태그 내 onChange = {this.handleInput}
handleInput는 이벤트를 인자로 받음   --> 함수에서 인자를 (e)로 받고 stae에 저장???(setSTate??)
event가 일어난 요소에 담긴 value값(event.target.value) 중요!!!  --> 이것을 state에 저장해야한다

1. state정의

import React from 'react';
import './LoginYeonju.scss';
import { withRouter } from 'react-router-dom';

class LoginYeonju extends React.Component {
  constructor() {
    super();
    this.state = {
      idValue: '',
      pwValue: '',
    };
  }

• state에 우리가 입력한 input값을 담아주기 위해서는 우선 key값을 정해주고 비어있는 문자열을 value값으로 배당해주어야한다.
• 이렇게 해야 onChange 이벤트 발생시, handlePwInput 함수 실행 -> 함수에서 state 키값으로 접근해서 value값을 넣어줄 수 있다.

👇

2. 이벤트 발생 시, 실행되는 함수 정의

  goToMain = () => {
    this.props.history.push('/mainyeonju');
  };

  handleIdInput = e => {            //⭐input태그에서 이벤트가 발생 -> id와 pw에 입력되는 값들이 나온다⭐
    this.setState({
      idValue: e.target.value,
    });
    console.log(e.target.value);    
    console.log(this.state);
  };

  handlePwInput = e => {            //⭐input태그에서 이벤트가 발생 -> id와 pw에 입력되는 값들이 나온다⭐
    this.setState({
      pwValue: e.target.value,
    });
    console.log(e.target.value);
    console.log(this.state);
  };

• this.setState함수에는 ( _state의 어떤 key : value값 어떻게 바꾸고 싶은지?__)
• 이벤트 발생하면 실행되는 함수에서 e(event)를 인자로 받으면 e.target.value는 무엇이 찍히는지 개발자도구 콘솔에서 확인
• e.target.value란? 이벤트가 발생하는 target타겟의 value값이 된다.
  - (여기서는 input태그내에서 이벤트가 발생하기 때문에 ) console.log(e.target.value)를찍으면 id와 pw에 입력되는 값들이 나온다

이벤트 사용 시 주의사항
1. 이벤트 이름은 카멜케이스 (onChange, onClick)
2. 이벤트에 실행할 함수 형태의 값을 전달 
(화살표 함수 문법으로 전달하던가, 렌더링 부분 외부에 미리 만들어서 전달해야 한다)
3. DOM 요소에만 이벤트를 설정 
(div, button, input 등의 DOM요소에는 이벤트 설정을 할 수 있지만, 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다)

👇

3. input에 이벤트 속성 삽입

💡초기 코드

import React from 'react';
import './LoginYeonju.scss';
import { withRouter } from 'react-router-dom';

class LoginYeonju extends React.Component {
  constructor() {
    super();
    this.state = {
      idValue: '',
      pwValue: '',
    };
  }
  goToMain = () => {
    this.props.history.push('/mainyeonju');
  };

  handleIdInput = e => {
    this.setState({
      idValue: e.target.value,
    });
  };

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

  render() {
    return (
      <div className="LoginYeonju">
        <div className="outbox">
          <header className="westagram"> Westagram </header>

          <form className="id_pw">
            <input
              className="idInput"
              type="text"
              placeholder="전화번호, 사용자 이름 또는 이메일"
              onChange={this.handleIdInput}    //id input과 pw input 서로 다른 함수 적용
            />
            <input
              className="pwInput"
              type="password"
              placeholder="비밀번호"
              onChange={this.handlePwInput}   //id input과 pw input 서로 다른 함수 적용
            />
            <button type="button" onClick={this.goToMain}>
              로그인
            </button>
          </form>
          <footer>비밀번호를 잊으셨나요?</footer>
        </div>
      </div>
    );
  }
}

export default withRouter(LoginYeonju);

💡수정 코드 : 재사용 가능한 함수로 코드의 효율성 높이기

import React from 'react';
import './LoginYeonju.scss';
import { withRouter } from 'react-router-dom';

class LoginYeonju extends React.Component {
  constructor() {
    super();
    this.state = {
      idValue: '',
      pwValue: '',
    };
  }
  goToMain = () => {
    this.props.history.push('/mainyeonju');
  };

  handleIdInput = e => {                //⭐id, pw input에 모두 적용 가능한 함수⭐
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  render() {
    return (
      <div className="LoginYeonju">
        <div className="outbox">
          <header className="westagram"> Westagram </header>

          <form className="id_pw">
            <input
              className="idInput"
              type="text"
              placeholder="전화번호, 사용자 이름 또는 이메일"
              onChange={this.handleIdInput}  //⭐이벤트 발생 시 실행할 함수 하나로 통일⭐
              name="idValue"                 //⭐this.state에서 지정해준 key값과 같은 name값 부여⭐
            />
            <input
              className="pwInput"
              type="password"
              placeholder="비밀번호"
              onChange={this.handleIdInput}   //⭐이벤트 발생 시 실행할 함수 하나로 통일⭐
              name="pwValue"                  //⭐this.state에서 지정해준 key값과 같은 name값 부여⭐
            />
            <button type="button" onClick={this.goToMain}>
              로그인
            </button>
          </form>
          <footer>비밀번호를 잊으셨나요?</footer>
        </div>
      </div>
    );
  }
}

export default withRouter(LoginYeonju);

💡 함수 재사용 방법?

• input이 한 개일 때는 이벤트 핸들러 함수 하나로 가능 하지만 한 개 이상일 때는 또 다른 이벤트 핸들러 함수를 만들어야 하기때문에 함수를 재활용할 수 있는 방법을 알아보았다.
• 바로, input의 name 속성을 사용하는 거다.
  • input 태그에 name 값을 부여해 주고 이를 통하여 우리는 각 input을 구분할 수 있게 된다.
  • name="inputId" name="inputPassword" (단, name으로 부여한 값은 this.state에서 지정해준 key값과 같아야 한다!
    -> 함수에서 [e.targrt.name]으로 key값에 접근해야하기 때문에)
  • setState 함수 내부에서 key 부분에 대괄호[ ]가 있는 문법은 Computed property names라는 문법이다.
• 위처럼 하면 하나의 함수로 두개의 input에 걸린 이벤트를 관리할 수 있는 것이다.