1. 개요
백엔드와의 통신을 위해 State 객체를 통하여 사용자 입력 데이터를 저장하는 방법을 코드로 구현하였고 다음으로 로그인 버튼 활성화 기능을 만들어보았다. 주어진 조건에 따라서 input의 입력 값을 넣었을 때 로그인 버튼의 색은 더 진하게, 커서는 포인터로 효과를 주려고 한다.
2. 1차 코드
간단한 리팩토링이 되지 않은 채로 로그인 버튼 활성화 기능을 만들었다. 주어진 조건은 아래와 같다.
- 입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 한다.
- 예를 들어 ID -
@포함 / PW - 5글자 이상- 삼항 연산자를 적용하여 조건에 따라 버튼 색상에 변화를 준다.
초반에 조건을 읽고 생각해본대로 혼자서 써본 코드는 아래와 같았다.
this.state.idInput.includes('@') && this.state.pwInput.length >= 5
? false
: true하지만 DOM 환경에서의 코드와 리액트 환경에서의 코드는 다르기에 어려움이 있었다. 우선 disabled 속성의 값으로 boolean 타입을 주어서 활성화 여부를 결정하는 코드는 얼추 그럴듯하게 작성해보았으나 그에 따라 색상을 변경하는 속성을 주는 부분에서 막히게 되었다. 기존에 내가 경험했던 DOM 환경에서는 코드는 길었지만 조건에 따라서 버튼 활성화 및 색상 변경을 한 페이지에서 다 같이 적을 수 있었는데 리액트 환경에서는 달랐다.
리액트에서는 버튼 태그의 disabled라는 속성으로 비활성화를, 클래스명을 통해 색상 변경을 줄 수 있었다. 그에 따라서 작성한 코드는 아래와 같다.
import React from 'react';
import './Login.scss';
class LoginSg extends React.Component {
constructor() {
super();
this.state = {
idInput: '',
pwInput: '',
};
}
goToMain = () => {
this.props.history.push('/MainSg');
};
updateIdInput = e => {
this.setState({
idInput: e.target.value,
});
};
updatePwInput = e => {
this.setState({
pwInput: e.target.value,
});
};
render() {
return (
<main className="loginSg">
<div className="boxWrapper">
<header>
<p className="login__logo">Westagram</p>
</header>
<section>
<form className="login__form">
<input
type="text"
id="login__id"
placeholder="Phone number, username, or email"
onChange={this.updateIdInput}
/>
<input
type="password"
id="login__pw"
placeholder="Password"
onChange={this.updatePwInput}
/>
<button
className={
this.state.idInput.includes('@') &&
this.state.pwInput.length >= 5
? 'changeButtonColor'
: 'normalButtonColor'
} // SCSS 상에서 위의 클래스명으로 색상 효과를 줄 수 있다.
disabled={
this.state.idInput.includes('@') &&
this.state.pwInput.length >= 5
? false
: true
}
onClick={this.goToMain}
type="button"
>
Log In
</button>
</form>
</section>
<section>
<div className="password__reset">
<a href="https://www.#.com">Forgot password?</a>
</div>
</section>
</div>
</main>
);
}
}
export default LoginSg;3. 2차 코드
import React from 'react';
import './Login.scss';
class LoginSg extends React.Component {
constructor() {
super();
this.state = {
idInput: '',
pwInput: '',
};
}
goToMain = () => {
this.props.history.push('/MainSg');
};
updateIdInput = e => {
this.setState({
idInput: e.target.value,
});
};
updatePwInput = e => {
this.setState({
pwInput: e.target.value,
});
};
render() {
const { idInput, pwInput } = this.state;
// 구조 분해 할당 => 객체, 배열 모두 사용 가능한 ES6 문법
const isActiveButton = idInput.includes('@') && pwInput.length >= 5;
// 변수 선언 및 반복되는 조건문 값 할당
return (
<main className="loginSg">
<div className="boxWrapper">
<header>
<p className="loginLogo">Westagram</p>
</header>
<section>
<form className="loginForm">
<input
type="text"
id="loginId"
placeholder="Phone number, username, or email"
onChange={this.updateIdInput}
/>
<input
type="password"
id="loginPw"
placeholder="Password"
onChange={this.updatePwInput}
/>
<button
className={
isActiveButton ? 'changeButtonColor' : 'normalButtonColor'
} // 변수 활용
disabled={!isActiveButton}
// 변수 활용, Boolean 타입이기에 not(!) 연산자 사용 가능
onClick={this.goToMain}
type="button"
>
Log In
</button>
</form>
</section>
<section>
<div className="passwordReset">
<a href="https://www.#.com">Forgot password?</a>
</div>
</section>
</div>
</main>
);
}
}
export default LoginSg;4. 알게된 점 및 느낀 점
반복되는 조건문은 render 함수와 return 문 사이에서 변수를 선언하고 값으로 할당되어질 수 있으며 그 변수 값을 return 문 안에서 대신 사용할 수 있다.
구조분해할당을 통하여 반복되는 this.state.idInput 과 같은 코드를 idInput 이라는 짧은 코드로 줄여서 간단히 사용할 수 있다.
disabled 함수는 데이터 타입이 boolean 이기 때문에 삼항 연산자 형태에서 not(!) 연산자를 사용한 속성 값 형태로 나타낼 수 있다.
솔직히 말하자면 리액트를 배우기 전 자바스크립트와 DOM 을 통하여 로그인 버튼 활성화 기능을 만들었을 때에도 복잡하고 어려운 면이 없지 않아 있었다. 코드카타나 주어진 과제를 수행하면서 컴퓨팅 사고를 통해 알고리즘이나 코드의 대략적인 흐름을 생각해보는 연습을 많이 하고 있으나 아직은 부족하다. 하지만 단기간에 얻어지는 것은 없으니 인내하고 꾸준히 노력해야겠다.
