[20220517_westagram_Login]

YunTrollpark·2022년 5월 17일
1

Project_1(westagram)

목록 보기
1/1

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

• onChange 함수는 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지해줌.
• event 발생 시 handleInput 함수 실행
• handleIdInput은 이벤트를 인자로 받음
• event가 일어난 요소에 담긴 value 값 (event.target.value)을 state에 저장!


const [inputId, setInputId] = useState(''); //useState를 사용해서 변하는 값을 set함수로 받음
const [inputPw, setInputPw] = useState('');

const handleInputId = e => {
    // input data에 변화가 있을때마다 value값을 변경해서 useState해줌
    setInputId(e.target.value);
  };

  const handleInputPw = e => {
    setInputPw(e.target.value);
  };

value값을 가져오는 이유는 리액트의 경우 virtual DOM을 사용해서 일단 함수를 처음부터 끝까지 돌고 그 다음에 UI변경이 필요한 애들을 모아서 렌더링함. 그래서 한박자씩 늦음.(비동기화) 그래서 값을 실시간으로 받기 위해서 e.target.value를 사용해서 value값을 실시간으로 가져옴.

Mission 2) Login | 로그인 버튼 활성화

• ID - @ 포함 / PW - 5글자 이상 → 두가지 조건 다 만족해야 로그인 버튼 활성화
• 삼항 연산자 적용해서 조건에 따라 버튼 색상에 변화주기.

import { useNavigate } from 'react-router-dom';//메인페이지로 연결하기 위해 useNevigate Hook 사용
import React, { useState } from 'react';//useState로 값을 받아서 set함수로 값을 관리
import './LoginKy.scss';//Login.scss파일 연결해서 스타일 사용!

const LoginKy = () => {
  const navigate = useNavigate();

  const goToMain = () => {
    navigate('/main-kyeongyeon');//조건이 만족해서 버튼을 누르면 main으로 넘어감
  };

return( <div className="btnLogin">
              <button
                onClick={goToMain} //onClick이벤트 발생시 위에서 선언한 goToMain을 props로 받음
                type="button"
                id="activeButton"
                disabled={
                  inputId.includes('@') && inputPw.length > 4 ? false : true
// disabled는 속성으로 기본값이 '아무것도 없을시 작동 안함'임.
//그래서 삼항 연산자를 사용해서 Id에 '@'있고, Pw의 길이가 4보다 크면
//기본값을 false로 해서 작동을 시킴.
                }
              >
                로그인
              </button>
            </div>
        )
profile
코딩으로 세상에 이야기하는 개발자

1개의 댓글

comment-user-thumbnail
2022년 5월 17일

와 정말 유익한 글이네요!

답글 달기