React Router

React 라이브러리는 SPA(Single Page Application)로 오직 하나의 HTML 파일만 있다.
참고) SPA 란?

기존 개발에서는 페이지의 수 만큼 HTML 파일이 있었는데 그럼 다른 React에서 다른 페이지를 어떻게 보여줄까?

이때 바로 사용하는 것이 React-Router이다.

다른 경로(주소)에 따라 다른 View(화면)를 보여주는 것

1) React Router 설치

npm install react-router-dom --save

--save를 해주는 이유는 package.json의 dependencies에 확실히 남기기 위해!

2) Routes 컴포넌트 구현

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import Login from './pages/Login/Login';
import Signup from './pages/Signup/Signup';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
	  <Route exact path="/signup" component={Signup} />
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

3) index.js

ReactDOM.render(<Routes />, document.getElementById('root'));

Routing 기능을 적용하기 위해서는 Routing을 설정한 컴포넌트(<Routes/>)로 변경 해야 한다.

4) Route 이동

Route 이동 방법에는 2가지가 있다.

1. <Link> 컴포넌트 사용

import React from 'react';
import { Link } from 'react-router-dom';

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/Main"> 홈 </Link>
      </div>
    )
  }
}

export default Login;

• react-router-dom에서 제공하는 <Link> 컴포넌트는 DOM에서 <a> 로 변환(Compile) 된다.

<a> 태그와 <Link>태그 둘 다 지정한 경로로 이동시켜주는 기능인데 그럼 <a> 태그는 React에서 사용을 안할까?

아니다! <Link> 태그는 SPA 내에서 페이지를 전환하는 경우에 사용되고 외부 사이트로 이동하기 위해서는 <a>태그를 사용한다.

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
          class="loginBtn"
          onClick={this.goToMain}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);

• goToMain 에서 props의 객체의 history(this.props.history)에
  접근해서 이동할 수 있다.
• props에 route 정보(history)를 받으려면 export하는 컴포넌트에 withRouter로 감싸주어야 한다.

★ <Link> 와 withRouterHOC의 활용 차이

<Link> 는 클릭시 바로 이동 하는 로직을 구현할 때 사용
ex) Nav bar에서 메뉴 클릭시 해당 메뉴 페이지로 이동

withRouterHOC는 페이지 전환시 추가적으로 처리할 로직이 있을 경우 사용
ex) 로그인 버튼 클릭시 -> Back API로 데이터전송 / User Data 인증, 인가

Scss

Scss는 왜 사용하게 되었을까?

웹은 점점 복잡해지고 그만큼 많은 양의 CSS 파일이 생기고 코드가 중복되어 유지 보수가 어려워진다. 이런 문제를 해결하기 위해 프로그래밍 개념(변수, 함수 등)이 접목되어 나온 것이 CSS 전처러기이다.

Scss 기능

1. Nesting

Sass의 가장 기본적인 기능. Nesting
JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, .scss 파일에서도
최상위 요소 안쪽 에서 하위 요소 스타일 속성을 정의 할 수 있다.

기존 CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Scss 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 등 기능 적용 가능

어떤 웹이든 자주 사용하는 theme-color가 있다. 이런 경우 반복해서 사용되기 때문에 $표시로 변수처럼 생성하여 사용할수 있다.

extend는 속성과 값이 완전히 동일한 코드를 여러 곳에서 쓰고 싶을때 사용한다.

$theme-color: blue;  // 색깔을 변수로 지정

%center {
	display: flex;
	justify-content: center;
  	align-items: center
}

mainContainer {
  @extend center; // 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;
		}
	}
}

공식 문서를 참고하면 더 다양한 기능 알아 볼수 있다.
[공식문서] Sass Basic Guide