로그인 플로우를 배워보자.
유저가 로그인 했을 때는 Hello가 나오고,
로그인 안했을 때는 로그인 form 박스가 나오도록 해보자.
시작 코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/jsx"></script>
</body>
</html>
styles.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: 300;
}
body {
font-family: "Source Sans Pro", sans-serif;
color: white;
font-weight: 300;
background: #50a3a2;
width: 100%;
height: 100%;
}
.container {
margin: 10% auto;
padding: 80px 0;
text-align: center;
}
.container h1 {
font-size: 40px;
font-weight: 200;
}
form {
padding: 20px 0;
position: relative;
}
form input {
border: 1px solid rgba(252, 252, 252, 0.4);
background-color: rgba(252, 252, 252, 0.2);
width: 250px;
border-radius: 3px;
font-family: "Source Sans Pro", sans-serif;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
text-align: center;
font-size: 18px;
color: white;
font-weight: 300;
}
form button {
appearance: none;
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #50a3a2;
border-radius: 3px;
width: 250px;
font-size: 18px;
}
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
<div>
<App />
</div>,
document.getElementById('root'));
App.js
import React from "react";
function App() {
return (
<div className="container">
<h1>Hello</h1>
<form className="form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
);
}
export default App;
유저가 맨 먼저 화면에 들어갔을 때는
로그인이 안되어 있는 상태이다.
시작 화면으로 로그인 form 화면이 보이게 한다.
isLoggedIn이라는 변수 하나를 만들고,
false로 설정해 준다.
여기서 로그인이 안되어 있으면
isLoggedIn === false
form으로 가게 하고
isLoggedIn === true;
이면 <h1>Hello</h1>로 가게 한다.
어떻게 해야할까?
이미 배운 내용을 활용하면
if statement가 들어간 함수를 만들어 아래처럼 쓸 수 있을 것이다.
if (isLoggedIn === true)를 줄인 것이
if (isLoggedIn) 이다.
isLoggedIn을 true로 바꿔주면 h1이 나오고,
false인 경우 로그인 폼 화면이 나온다.
하지만 이 코드는 너무 길다.
좀 더 나은 방법이 있다.
Single-responsibility Principle (SRP)란?
A class should have one and only one reason to change, meaning that a class should have only one job.
form을 일단 컴포넌트로 뺀다.
각 컴포넌트는 single responsiblity를 가져야 한다.
1. Login form을 컴포넌트로 만든다.
Login.jsx 파일을 만들고 안에 form을 넣은 함수를 만든다.
App.jsx 에서 Login 컴포넌트를 부른다.
2. Login.jsx에서 input만 따로 떼서 또 컴포넌트로 만든다.
Input.jsx 파일에 컴포넌트를 만든다.
Login.jsx 파일에서 불러온다.
3. App.jsx 코드를 정리하기 위해
renderConditionally() 함수를
{ } 안 익명 함수로 바로 넣어 코드를 짧게 만든다.
하지만 함수를 집어넣으면 에러가 발생한다.
이유는 renderConditionally() 함수가 statement이기 때문이다.
jsx { }안에는 expression은 들어갈 수 있지만,
statement는 들어갈 수 없다.
그렇다면 어떻게 함수안에 if statement 함수를 집어 넣을 수 있을까?
이런 경우 Ternary Operator를 쓸 수 있다.
Conditional Rendering | Ternary Operator
if statement를 expression으로 만들어 함수 안에 넣는다.
condition ? do if true : do if false
ex) isCloudy===true ? bringUmbrella():bringSunscreen()
=== true를 없애 버리고 그냥 제목만 써줘도 된다.
간단한 코드는 아래처럼 나타낸다.
시간에 따라 내용 바꿔보기
do if false 는 내용이 없어서 null 이다.
&& (AND Operator)
(Expression && Expression)
var x = 5; 로 정의하고
(x > 3 && x < 7)
x > 3 도 true 고
x < 7 도 true 니깐 전체를 true로 보고
var x = 1;
(x > 3 && x < 7)
x > 3 조건에 false가 되기에
x < 7은 자바스크립트가 쳐다보지도 않는다.
둘 중에 하나만 false여도 전체 라인을 false로 본다.
condition && expression
하지만 이 경우는 expression && expression 경우와 다르다.
둘 다 true 조건을 바라는 것이 아니다.
condition이 true면 expression을 렌더하라는 의미이다.
condition && expression
true && expression
false && expression
condition이 true면 express를 실행한다.
condition이 false면 express는 실행되지 않는다.
그래서 ? : null 을 지우고 간단하게 && 표시로 나타낼 수 있다.
currentTime < 12 가 true면 옆에 statement를 render한다.
하지만 false면 statement는 쳐다보지도 않는다.
&& 가 둘 다 참이여 한다는 표시가 아니다.
속지 말자.
로그인과 회원가입 Conditional Rendering 하기
Form.jsx 파일 하나로 login과 signup 두 형태 모두를 나타내보자.
기본형
회원 가입 여부에 따라 다른 Form 나오게 하기
Register
Login
2 개의 폼을 만드는 것이 아니라
조건에 따라 칸을 만들었다 없앴다 한다.
Step 1)
Form.jsx 에서 상황에 따라 Register <---> Log In 글자를 바꿔보자.
유저가 회원가입이 된 경우 글자를 Log in으로
가입 안된 경우 Register 글자 나오게 하기
userIsRegistered === true; 글자 Log in 으로 나오고
userIsRegistered === false; 글자 Register로 나오기
문제는 물어보는 건 app.jsx 파일에 있는데
바꿔야 하는 내용은 Form.jsx 파일에 있다.
어떻게 하면 다른 파일에 있는 내용을 바꿀 수 있을까?
Form.jsx에 있는 내용을 App.jsx 파일에 props로 pass over 한다.
prop 이름을 isRegister로 한다.
이 값을 위에 있는 userIsRegistered과 같도록 맞춘다.
Form.jsx 파일에서 props를 받아 조건을 완성한다.
true 일 때
false 일 때
step 2)
true 일 때 Confirm Password 칸 없애고
false 이면 Confirm Password 칸 있게 하기
props.isRegistered === false 와
!props.isRegisteered 같다.
userIsRegistered === true; 일 때 로그인 페이지
userIsRegistered === false; 일 때
'React > React Basic' 카테고리의 다른 글
| [React] Hooks | useState() | 좋아요 숫자 올리기 | 1초마다 시간 나오게 하기 | (0) | 2022.03.20 |
|---|---|
| [React] State | Declarative vs Imperative Programming (0) | 2022.03.19 |
| [React] Arrow Function (0) | 2022.03.16 |
| [React] 이모티콘 자료에서 뜻만 빼서 100자 까지만 보이기 (0) | 2022.03.15 |
| [React] forEach(), map(), filter(), reduce(),find(),include() (0) | 2022.03.14 |
댓글