disabled

로그인 페이지에서 아이디에 @가 포함되고, 비번 5글자 이상이면 메인페이지로 넘어가게 하기 위해 아래와같이 코드를 작성했다.

disabled={
  this.state.id.includes('@') && this.state.pw.length >= 5
    ? 'false'
  : 'true'
}

처음 저 코드를 제대로 쳐줬는데 왜 작동을 안하지 고민을 했다.
truthy, fasly 값에대해서 생각해보니
문자열 자체는 (ex. 'false','true') 모두 참으로 인식된다..!
따라서 계속 disabled가 안꺼져서 화면이 안넘어가졌던것이였다.
끝

왜 이사이트를 하고 싶나?
가장 많이, 가장 최근에 이용한 사이트 2개(쿠팡, 유튜브)를 떠올려봤습니다.
현재 사용하고 있는 노트북, 키보드, 마우스 모두 쿠팡을 이용했고 유튜브는 실생활에서 강의또는 오고가며 오락거리로 많이 사용합니다.
제가 주로 사용한다는건 이용에 거리낌이 없다는것이고 나중에 제가 어떠한 프로젝트를 만들때도 입장을 바꿔 생각했을때 사용하는데 불편함 없는 웹사이트를 만들때 많이 참고할 수 있겠다 생각하여 이 2개로 선정해봤습니다.

난이도 유튜브 중상
쿠팡 상?

사이트소개 : 유튜브, 쿠팡
기능 : 좋아요, 댓글, 리뷰, 결제하기,
디자인 :
다룰수있는 데이터??

    const { myArray, comment } = this.state;

이제 this.state.myArray를 myArray로 쓸수있고
이제 this.state.comment comment 쓸수있음.

isBtnOn

  render() {
    const { id, pw } = this.state;
    const isBtnOn = this.state.id.includes('@') && this.state.pw.length >= 5;
    return (
      <div className="Login">
        <form id="login_form" className="container">
          <div className="center first">instagram</div>
          <input
            name="id"
            type="text"
            className="id"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            onChange={this.handleInput}
            value={id}
          />
          <input
            name="pw"
            type="password"
            className="pw"
            placeholder="비밀번호"
            onChange={this.handleInput}
            value={pw}
          />
          <button
            className={
              isBtnOn ? 'changeColor login center' : 'normalColor login center'
            }
            disabled={!isBtnOn} // 감사 // 삼항연산자에서 true false는 이렇게 !로 짧게 쓸수있다.
            onClick={this.gotoMain}
          >
            로그인
          </button>
          {/* </Link> */}
          <div className="center pwFind">비밀번호를 잊으셨나요?</div>
        </form>
      </div>
    );
  }

isBtnOn에 대한 부분을 처음엔 함수를 클래스 안에 그대로 작성했지만 버튼안에 2번이 쓰이기 때문에 코드를 간소화하고자 아예 변수로 따로 만들었다.

const isBtnOn = this.state.id.includes('@') && this.state.pw.length >= 5;

아이디에 @포함하고 비번 5글자 이상이면 true값 할당, 아니면 false.