TIL.2) Router & Sass_React

🚨 Caution 🚨

해당 내용은 wecode에서 학습하며 정리한 내용입니다.
필자가 이해한 부분을 바탕으로 작성한 글이기 때문에 실제 내용들과 다소 차이가 있을 수 있습니다.
이 점 유의해서 읽어 주시면 감사하겠습니다.

내용에 대한 친절한 피드백은 언제나 감사합니다.

💡 뭔가 좀 이상하다..?

이전에 만들어놓은 html 파일과 css 파일들을 이용해 웹페이지를 만들때는
하나의 html 파일당 하나의 css를 적용해서 페이지 하나를 구성해 화면에 보여줬다.

근데 react를 통해 구현한 건 index라는 html 하나에만 구현이 가능하게 되어서
내가 이전에 만든 페이지를 사용하고 싶어도 어찌해야할지 방도를 몰랐었다.

📱 SPA (Single Page Application)

이렇게 하나의 페이지로 구성 된 어플리케이션을 SPA라고 한다.
이런 SPA에 주소를 달리해서 다른 페이지들을 보여주는 방법으로
하나에 html에 페이지 변화를 줄 수 있는데 이 기능을 Routing이라고 한다.

🖥 Router

Routing 이라는 기능은 다른 경로에 따라 다른 화면을 보여준다고 했는데,
react에는 이런 기능이 있지 않다..
그래서 react-router-dom에서 해당 기능을 하는 컴포넌트를 불러와
작업을 할 수 있도록 해줘야 한다.

▪️ router 기능 적용 방법

import React from 'react';
import {BrowserRouter as Router,Switch,Route,} from 'react-router-dom';
import LoginBox from './pages/Login/Login.js';
import MainBox from './pages/Main/Main.js';

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

export default Routes;

이런식으로 router를 적용해 index.js에 component를
import 시켜주면 페이지 주소에 따라서 다른 화면을 보여주는 페이지가 만들어진다.

▪️ route 이동 방법

router.js 를 만들었다고 화면이 무조건 전환되는 것은 아니다.
기본적으로 어떤 버튼을 누르거나 링크를 누르는 것으로 화면이 전환되는데,
이 방법에는 두 가지 방법이 있다

1. <Link> 태그 이용하기

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

class Login extends React.Component {
  render() {
    return (
      <div>
        <Link to="/signup">회원가입</Link>
      </div>
    )
  }
}

export default Login;

react-router-dom에 있는 Link 컴포넌트를 이용해서
회원가입 링크를 누르면 singup 경로로 이동하게 해주는 코드다.
<a> 태그를 통해서도 이동이 가능한데, Link 와 a 의 결정적인 차이는
페이지가 새로고침이 되는지 아닌지의 차이다.

<a> : 새로고침 O / 모든 정보를 새로 다시 받아옴 / 외부링크 연결시 사용
<Link> : 새로고침 X / 필요한 정보만 받아와 보여줌 / 내부 페이지 이동시 사용

이런 용도에 따라 구별해 사용하면 되겠다.

2. this.props.history.push() 이용하기

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

class Login extends React.Component {

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

  render() {
    return (
      <div>
        <button 
            type="submit" 
            className="loginBtn" 
            onClick={this.goToMain}>
                로그인
        </button>
      </div>
    ) 
  }
}

export default withRouter(Login);

이 방법은 JS에서 event를 만들어줬던 방법과 비슷하다.
click 이벤트를 만들어서 해당 버튼을 클릭시 화면이 이동하도록 한건데,
특이한건 컴포넌트를 넘겨줄 때 withRouter(props) 같이 컴포넌트에
withRouter를 함께 전달해준다는 점이다.

이렇게 하면 Route에 연결 되지 않은 컴포넌트에서 props의 route정보를
받을 수 있게 된다고 한다.

자세한건 더 뒤에 공부해보도록 하자

📱 SASS

Sass 는 css의 확장 언어다.
마치 css를 통해서 해당 페이지의 레이아웃을 볼 수 있을 정도로
스타일을 적용할 수 있다.

sass 예시

// 원래 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;
  }
}

전에는 하나의 태그 혹은 선택자에 속성을 부여했는데
이런식으로 어떤 태그 안에 다른 태그 속성을 집어넣어 주면서
어떤 태그에 어떤 속성이 적용되는지를 볼 수 있어서
속성간의 관계를 이해하는데 굉장히 도움이 되었다.

$theme-color: blue;

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

또한 이렇게 변수나 연산자들을 생성해서
자주 사용하는 속성들을 미리 지정해 둔 뒤에
원하는 곳에 넣어줄 수 있어서 효율적인 방법도 sass에서 할 수 있었다.