Router
React-router는 공식적이지는 않지만 써드파티 라이브러리로써 가장 많이 사용되고 있는 라이브러리다
그렇다면. . . 라우터는 무엇인가 ??
다른 주소에 따라 다른 뷰를 보여주는것이 라우팅이다!
하지만? 리액트는 이 기능이 내제되어 있지 않다. . .
따라서 우리가 직접 API를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 한다
리액트라는 라이브러리는 SPA(Single Page Application)으로써 오직 단 하나의 HTML 문서만 가진다
SPA 장점 :
1. 뷰 렌더링을 사용자의 브라우저가 담당함
2. 사용자와의 인터렉션이 발생할 경우 필요한 부분만 자바스크립트를 사용하여 업데이트
SPA 단점 :
1. 앱의 규모가 커지게 되면 자바스크립트 파일 사이즈가 너무 커진다.
(유저가 실제로 방문하지 않을수도 있는 페이지에 관련되어 있는 렌더링 관련 스크립트도 불러오기 때문)
2. 자바스크립트를 실행하지 않는 일반 크롤러에서는 페이지의 정보를 수집하지 못한다.
이러한 점들을 개선하기 위해 라우터를 이용한다
라우터를 이용하는법은 아래와 같이 두가지다
1. Link 컴포넌트 사용
2. withRouterHOC를 사용하여 구현
1. Link 컴포넌트 사용하는 방법
상단에 import { Link } from 'react-router-dom'; 추가
(react-router-dom이라는 패키지에서 Link라는 컴포넌트로 접근하여 사용할 수 있게 한다)
컴포넌트에서 a태그 혹은 link태그를 사용하여 이동
(a와 link태그의 차이 a는 외부사이트로 이동 / link는 프로젝트 내 페이지 이동)
2. withRouterHOC 로 구현하는 방법
import React from 'react';
import { withRouter } from 'react-router-dom';
class Login extends React.Component {
goToMain = () => {
this.props.history.push('/signup');
}
// 실제 활용 예시
// goToMain = () => {
// if(response.message === "valid user"){
// this.props.history.push('/main');
// } else {
// alert("너 우리 회원 아님. 가입 먼저 해주세요")
// this.props.history.push('/signup');
// }
// }
render() {
return (
<div>
<button
className="loginBtn"
onClick={this.goToMain}
>
로그인
</button>
</div>
)
}
}
export default withRouter(Login);(withRouterHOC같은 경우 아직 미구현을 하여 개념정리로 예시 코드만 따왔다😢)
상단에 import { withRouter } from 'react-router-dom'; 추가,
상단에 goMain이라는 event handler에서 구현한 것 처럼 props 객체의 history(this.props.history)에
접근해서 이동할 수 있다!
또한 이 컴포넌트(Login 컴포넌트)에서 props에 route 정보(history)를 받으려면 export하는 컴포넌트에 withRouter로 감싸주어야 한다 (하단 확인 !)
이렇게 withRouter와 같이 해당 컴포넌트를 감싸주는 것을 Higher Order Component(HOC)라고 한다!
link컴포넌트 사용하는 이유와 withRouterHOC을 사용하는 이유에 대해서는 아래와 같다!
-
link컴포넌트 : 클릭시 바로 이동하는 로직 구현시 사용
예) Nav Bar, Aside Menu 아이템 리스트 페이지에서 아이템 클릭 시 > 상세 페이지 이동 -
withRouterHOC : 페이지 전환 시 추가적으로 처리해야하는 로직이 있을 경우
예) 로그인 버튼 클릭시 > Back API로 데이터전송 / User Data 인증, 인가
회원 가입이 되어 있는 사용자 > MainPage / 회원 가입이 안되어 있는 사용자 > SignupPage
Sass
Sass가 등장하게 된 이유
React 혹은 다양한 Framework로 프로젝트를 진행하다보면 Front-End 개발자는 css작업을 하게 된다.
css의 경우 추가적인 플러그인이 필요하지 않지만 대형 프로젝트를 진행하다보면 css의 파일이 많아져
코드가 중복되거나 자주 쓰는 스타일값등이 반복적으로 나오게 된다 그렇게 되면 전체적인 코드의
복잡성이 증가하게 된다 ! 이를 해결하기 위해 나온것이 바로 css 전처리기이며 그 종류에는
[Sass, Less, Stylus, PostCSS]등이 있다 모두 각자의 장점과 특징을 가지고 있다
Sass 기능
1. Nesting
Sass의 가장 기본적인 기능으로는 Nesting 이라는 것이 있다.
JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, .scss 파일에서도
최상위 요소 안 쪽 에서 하위 요소 스타일 속성을 정의 할 수 있다.
Nesting 하기 전
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}Nesting 후
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
}
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}2. 변수 활용, & 연산자, extend 등 기본 기능 적용하기
Sass 에는 Nesting외에도 여러기능이 있다
자신이 자주 사용하는 속성들을 집합하여 묶어 준다던지 아니면 자주 사용하는 color의 값들을
$표시로 변수처럼 생성하여 사용해주는 기능까지 정말 다양하다
고치기전
login-container {
display: flex;
justify-content: center;
align-items: center
}
button {
width: 200px;
height: 100px;
background-color: blue;
}
button:hover {
background-color: red;
cursor: pointer;
}
input {
background-color: blue;
}
input:focus {
background-color: red;
}고치고 난 후
$theme-color: blue;
%flex-center {
display: flex;
justify-content: center;
align-items: center
}
login-container {
@extend flex-center;
button {
width: 200px;
height: 100px;
background-color: $theme-color;
&:hover {
background-color: red;
cursor: pointer;
}
}
input {
background-color: $theme-color;
&:focus {
background-color: red;
}
}
}