2.로그인 페이지 사용자가 입력한 id값과 pw값을 저장하기

앞의 (로그인 페이지 사용자가 입력한 id값과 pw값을 저장하기) 포스팅 이어서 작성.

로그인 페이지 댓글기능을 구현하며 잘못이해하고 있었던 부분이 있다는 걸 알게되었다.

저번 포스팅에서 부모 component는 자식의 e.target값을 가져오지 못한다고 생각했다. 그래서 부모component가 e.target값을 통해 state를 바꾸기 위해 밑의 코드처럼 자식 component에서 e.target값을 함수호출을 통한 인자값으로 부모component로 보내주었다.

-> input은 value와 name을 속성값으로 가지고 있기 때문에 부모에서도 e.target을 통해 그 속성값을 가져올 수 있다.

따라서 자식component에서 e.target값을 보내줄 필요가 없기때문에 좀 더 나은 코드를 위해 부모에서 받아서 바로 state값을 바꿔줄 수 있도록 수정하였다.

 class InputBox extends React.Component {
  render() {
    return (
      <form className="inputBox">
        <input
          className="login"
          name1={'username'}
          type={this.props.type}
          id={this.props.id}
          placeholder={this.props.placeholder}
          // onChange={this.handleChange}
          onChange={this.props.onchange}
          state={this.props.State}
        />
     </form>
    );
  }
}
//
class InputContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      disableId: true,
      disablePw: true,
    };
  }
  changeState = event => {
    const { name, value } = event.target;
    if (name === 'username') {
      this.setState({ username: value, disableId: value.indexOf('@') === -1 });
    } else if (name === 'password') {
      this.setState({ password: value, disablePw: value.length < 5 });
    }
  };
  goToMain = () => {
    this.props.history.push('/main-jungmin');
  };
  render() {
    console.log(this.state);
    return (
      <div className="inputContainer">
        <InputBox
          name="username"
          type="text"
          // onchange={this.changeState}
          placeholder="전화번호, 사용자 이름 또는 이메일"
          State={this.state}
          onchange={this.changeState}
        />
        <InputBox
          name="password"
          type="password"
          // onchange={this.changeState}
          onchange={this.changeState}
          placeholder="비밀번호"
          State={this.state}
        />
        <Andline />
        <Button
          goToMain={this.goToMain}
          disabled={this.state.disableId || this.state.disablePw}
          style={
            this.state.disableId || this.state.disablePw
              ? { backgroundColor: 'rgba(var(--d69, 0, 149, 246), 0.3)' }
              : { backgroundColor: 'rgba(var(--d69, 0, 149, 246), 1)' }
          }
        />
        <p className="forgetPw">비밀번호를 잊으셨나요?</p>
      </div>
    );
  }
}

저번 포스팅해서 문제1에대한 내용만 다루고 문제 2에 대한 내용은 다루지않아 이어서 포스팅 !

문제점

문제 2 :입력된 값을 출력하지않고 바로 전의 state값이 출력된다.(==마지막 글자 하나씩 출력이 안된다.)
=> 결론은 console.log()의 위치가 잘못되었다.
render후 찍어야 바뀐 state값을 출력해 내는데 setState가 비동기적으로 실행되므로, console.log가 실행되는 시점은 아직 setState에 의해 state가 변경되기 전이기 때문이다. ! render에서 찍으니 잘찍힌다. 😊