React : Router/Sass

군밤먹으면서코딩·2021년 6월 22일

React Sass

React

목록 보기

4/8

Router

라우팅이란 경로를 찾아주는것!

SPA

하나의 HTML로 여러 경로들을 보여줄 수 있다. <=> MPA

이 때 한 페이지에서 여러 경로들을 보여줄 수 있는 방법이 Routing기술이다.

Routing

React는 프레임워크가 아닌 라이브러리이기 때문에 라우팅 기능이 포함되지 않았다.

react-router 설치하기

npm install react-router-dom --save

여기서 --save = package.json에 dependencies에 저장한단 의미

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;

exact path : exact를 붙여주지 않으면 중복된 '/' 를 제대로 인식하지 못한다. exact 속성을 통해 정확한 주소를 인식할 수 있게 된다.

Link 컴포넌트로 이동하기

   <div>
      <Link to="/signup">회원가입</Link>
   </div>

Link태그는 a태그로 컴파일 되어 실행된다.

그럼 Link vs a 차이는 무엇일까??

a 태그는 서버에 요청해 전체 파일을 통째로 다시 받아온다.
link 태그는 새롭게 파일을 받아오는 요청을 하는게 아니라, 변화되는 부분만 수정된다.
때문에 a 태그는 화면이 완전히 전환되는 경우 (ex 커머스 사이트에서 인스타 페이지로 이동)

withRouterHOC 사용해 이동하기

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

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/main');
  }

 ** // 실제 활용 예시
  // 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);

Tip ) 여기서 this는 해당 클래스 즉 Login을 뜻한다. class 내에서 함수를 생성할 때에는 꼭 arrow function을 사용해줘야 한다. 안그러면 this가 뭔지 헷갈려 예상치 못한 오류 발생 가능!

Nav 컴포넌트도 Login,Main 처럼 history,location,match를 주입받기 위해서는 export 해줄때 withRouter로 감싸줘야 한다.
페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 withRouterHOC 방법으로 구현.
ex. 로그인 버튼 클릭 시
- Backend API로 데이터(User Info) 전송
- User Data 인증 / 인가
- response message
- Case 1 : 회원 가입되어 있는 사용자 > Main 페이지로 이동
- Case 2 : 회원 가입이 되어 있지 않은 사용자 > Signup 페이지로 이동

Sass

최종적으로 서버에 올라가기 전에 css화 해주는 뇨속.
기본 css보다 편리한 문법들을 제공한다.

설치법

npm install node-sass --save : 여기서 --save는 package.json에 올린다는 의미

설치 후 파일 확장자명을 .sass로 바꿔주면 된다.

Nesting 기능

react에서 Route 컴포넌트 내에 있는 Login, Main 컴포넌트들은 sass를 적용하기 전에는 class가 같을 경우 css가 함께 적용됨을 알 수 있다. 이를 방지하기 위해 sass에서는 Nesting 기능을 제공한다.

기본 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;
}

Sass

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
		li {
			display: inline-block;
		}
  }

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

이렇게 하면 중복되서 효과가 적용되는 것을 방지할 수 있다!

변수 활용 , mixin 기능 적용하기

insta 클론 코딩을 하면서 중복되는 css작업이 상당히 귀찮고 소모적이라는 생각을 했엇는데, 드디어 이를 해결해 주는 뇨속을 만났다!!!

$ : 변수를 선언해 중복되는 것들 ( color , px 등 )을 변수로 선언해 이후 코드 유지 보수에도 효과적일 것 같다!

@mixin : 중복되는 css 구문들을 한데 묶어서 사용할 수 있다.

include: @mixin으로 묶어줬던 뇨속을 적용시킬 때!

$theme-color: blue;

@mixin flex-center {
	display: flex;
	justify-content: center;
  align-items: center
}
- **적용 예시**
login-container {
  @include flex-center;
	button {
	  width: 200px;
		height: 100px;
		background-color: $theme-color;