React : 로그인 버튼 기능 구현

Dave Ahn·2022년 11월 6일

로그인 버튼 기능 구현

인스타그램 클론 코딩 중 핵심요소 2가지 중 하나는 바로 로그인 기능이다.

오늘은 React를 사용하여 현재 클론 코딩 중인 인스타그램 페이지에서 로그인 버튼에 기능을 부여하고 활성화시키는 작업을 해볼까 한다.

우선 주요 키워드부터 알아보자.

useState, indexOf, 삼항연산자, e, disabled, Link

머릿속으로 로직 그려보기.

로그인 버튼이 활성화가 된다는 것 :

-> 아이디 값 & 비밀번호 값을 입력받는다.
-> input으로 값을 입력받는다.
-> 입력받을 값(ID&PW)은 유저마다 다르다.(값이 유동적이다.)
-> 변수(유동적인 값)를 담아주는 그릇(함수)이 필요하다.
-> 함수(그릇)에 담긴 내용(값)을 유동적으로 사용하고 관리할 수 있는 직원 = 함수(useState)를 만들어준다.
-> 직원은 전달받은 유동적인 값을 지정된 특정 값과 비교하여 일치 여부를 판단한다.

코드 구성

HTML

// input 아이디 값
<input
    className="signUpBox"
    type="text"
    placeholder="전화번호,사용자 이름 또는 이메일"
    onChange={idValue}
/>

// input 비밀번호 값
    <input
    className="signUpBox"
    type="password"
    placeholder="비밀번호"
    onChange={pwValue}
/>

우선 아이디와 비밀번호를 입력받을 input 창을 만들어준다.

그다음 onChange라는 이벤트를 사용하여 유동적인 값을 받아내는 그릇을 만들어준다.

*onChange 이벤트(Event)는 input 창에 값을 입력받았을 때 {}안의 함수가 작동하는 이벤트(Event)이다.

id 값을 입력받을 때는 idValue라는 함수가 실행되고 pw 값을 입력받을 때는 pwValue라는 함수가 실행된다.

REACT

// (2) input에 값을 입력받고 함수가 실행되면 값을 입력받게되는 함수 
const [id, getId] = useState('');
const [pw, getPw] = useState('');


// (1) input에 id값을 입력받으면 실행되는 함수
const idValue = (e) => {
getId(e.target.value);
};

// (1) input에 pw값을 입력받으면 실행되는 함수
const pwValue = (e) => {
getPw(e.target.value);
};

이제 리액트로 넘어와서 유동적인 값 을 담아내주자.

처음 리액트를 접하고 이 부분에서 이해하는데 조금 애를 먹었다.

작동원리나 과정을 한번 이해하면 그 후로는 외우지 않아도 머릿속에서 쉽게 그려지니 천천히 한번 짚어보자.

위에서부터 읽게 되면 순서가 다소 헷갈릴 수 있다.

순서는 (1) 번부터 (2) 번 순으로 진행된다.

const idValue = (e) => {
getId(e.target.value);
};

위 코드를 해석해 보면

"cosnt idValue라는 함수는 이벤트(e)가 실행됐을 때, getId라는 변수가 '이벤트(e)를 타겟(target)으로 한 값(value)'을 전달받게 된다."

로 해석할 수 있다.

그다음

// (2) input에 값을 입력받고 함수가 실행되면 값을 입력받게되는 함수 
const [id, getId] = useState('');
const [pw, getPw] = useState('');

위 useState('')는 함수이므로 이 함수를 호출하게 되면 반환 값으로 두 가지 값이 담긴 배열을 반환하게 된다.

이 두 가지 값이 담긴 배열 중,

첫 번째 "id"는 동적으로 관리할 상태 값을 나타내고,
두 번째 "getId"는 첫 번째 요소를 초기값에서 다른 값으로 변경해 주는 값이다.
즉, 두 번째 getId에 특정 값을 입력받게 되면 첫 번째 id 값이 입력받은 값으로 변경된다.

이러한 이유로 (1) 번에서 이벤트(e)가 실행되면, 실행된 이벤트(e)를 타겟(target)으로 입력받은 값(value)을 두 번째 요소인 "getId"에 전달해 주고, 전달받은 getId의 값에 의하여 첫 번째 요소인 "id" 역시 getId와 동일한 값을 가지게 된다.

이는 곧 우리가 찾던 유저들의 각기 다른 id와 pw의 값을 담아줄 유동적인 자료가 된다.
이 자료들을 조합하고 구성하여 정보를 만들고 그 정보가 최초 입력받은 정보와 일치하게 되면 로그인 버튼에 불이 들어오게 하여 로그인을 허가하는 것이다.

자, 그렇다면 이제 로그인 버튼을 활성화시켜보자.

머리속으로 로직 그려보기.

로그인 버튼이 작동한다는 것 :

-> 입력받은 값이 특정 값과 일치하다면 버튼에 불이 들어온다는 것.(if 문)
-> 버튼에 불이 들어온다는 것은 정상적으로 작동한다는 뜻이고, 반대로 불이 들어오지 않아서 정상적으로 작동하지 않는 상황도 있다는 것.(두 가지 상황)
-> 버튼에 불이 들어온다는 것은 색상이 변경된다는 것.(scss 부분)
-> 버튼에 불이 들어와서 정상작동할 경우에 "클릭"이라는 특정 행동을 하면 페이지가 이동된다는 것.(Link)

코드 구성

REACT

let loginIdPw = id.indexOf('@') !== -1 && pw.length >= '5';

우선 앞서 변수로 불특정한 값을 입력받을 수 있는 id 와 pw를 이용하여 변수를 하나 만들어주자.

loginIdPw라는 변수는 "id로 입력받은 값에 @가 "포함되지 않는 경우가 아니다 = 포함한다" 그리고 pw의 길이(length)는 5보다 길거나 같다." 라는 조건을 갖고 있다.

이러한 조건을 활용하여 버튼 활성화 기능에 적용시켜보자.

HTML

//(3)
<Link to="mainPage">  
    <button
    className={loginIdPw ? 'rightValue' : 'wrongValue'}
    disabled={loginIdPw !== true}
    >
    로그인
    </button>
</Link>

우선 먼저 봐야할 부분은

className={loginIdPw ? 'rightValue' : 'wrongValue'}

이 부분이다.

앞서 변수로 선언하였던 loginIdPw를 삼 항 연산자로 계산하였다.

만약 loginIdPw의 조건이 참(true)일 경우에 버튼은 'rightValue'라는 className을 가지게 되고 거짓(false)일 경우 'wrongValue'라는 이름을 갖게 된다는 뜻이다.

scss

.rightValue {
    background-color: #0096f6;
}

.wrongValue {
    background-color: #c3dffd;
}

그리하여 만약 버튼이 className으로 rightValue라는 이름을 갖게 되면 배경 색상이 "background-color: #0096f6;" 이 색상으로 변경될 것이고
wrongValue라는 이름을 갖게 되면 "background-color: #c3dffd;" 이 색상(기존 색)을 나타내게 된다.

그다음으로 넘어가면,