React | 로그인 버튼 활성화(React를 이용하여)

🏫 오늘의 미션

React의 state와 event 기능을 사용하여 전에 js로 구현했던 로그인 버튼 활성화 기능을 React로 변환해 보겠다.

#Routes.js
import LoginSejun from './pages/sejun/Login/Login';

class Routes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 0,
      pw: 0,
    };
  }
  render() {
    return (
      <Router>
        <Nav />
        <Switch>
          <Route exact path="/login-sejun" component={LoginSejun} />
          .
          .
          .

#Login.js
import React from 'react';
import { Link } from 'react-router-dom';
import './Login.scss';

class Login extends React.Component {
  render() {
    return (
      <div className="loginBoard">
        <div className="logo">Westagram</div>

        <form action="" className="loginTable">
          <input
            onChange={function handleInput(e) {
              this.setState({
                id: e.target.value,
              });
              e.preventDefault();
            }.bind(this)}
            type="text"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            className="loginId"
          />
          {console.log(this.state)}
          .
          .
          .

Login.js의 input 에서 onChange 이벤트가 발생하면 id 와 pw 가 Routes.js의 this.state 에 객체형태로 전달되게 하고 이를 console.log 를 통해 확인한다.

그러면 위와 같이 input에 값이 변화할때마다 this.state 값에 입력된 데이터가 전달되고 console.log에 잘 확인된다.

📚 공부해야할 것

Login.js 의 input의 값을 Routes의 this.state로 보내주었지만, 이 값을 다시 Login.js의 props로 가져와야하는데 Routes.js의 어디를 건드려야할 지 몰라서 해결하지 못하였다.

=> Routes.js 는 Routing을 위한 컴포넌트로 각 컴포넌트에는 단일의 기능을 구현하는 것이 좋다고 한다. 따라서 Login.js 자체에서 this.state 를 사용하여 기능을 구현하는 것이 좋아보인다.
state와 props 에 대한 심도있는 학습이 필요할 것 같다.

📌 해결방법

Login 컴포넌트의 this.state 값에 idVal, pwVal을 초기화

#Login.js

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      idVal: '',
      pwVal: '',
    };
  }

id와 pw의 input에 값이 입력되면 입력된 값이 idVal과 pwVal로 전달되어 저장

  render() {
    return (
      <div className="loginBoard">
        <div className="logo">Westagram</div>

        <form action="" className="loginTable">
          <input
            onChange={function handleInput(e) {
              this.setState({
                idVal: e.target.value,
              });
              e.preventDefault();
            }.bind(this)}
            type="text"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            className="loginId"
          />
          <input
            onChange={function handleInput(e) {
              this.setState({
                pwVal: e.target.value,
              });
              e.preventDefault();
            }.bind(this)}
            type="text"
            placeholder="비밀번호"
            className="loginPw"
          />

this.state에 저장된 idVal과 pwVal 값을 기반으로 삼항연산자를 이용하여 로그인 버튼 활성화 로직 구현

          <Link to="/main-sejun" style={{ textDecoration: 'none' }}>
            <button
              className={
                this.state.idVal.includes('@') && this.state.pwVal.length >= 5
                  ? 'loginBtn active'
                  : 'loginBtn nonActive'
              }
            >
              로그인
            </button>
          </Link>
        </form>