React Router

라우팅(Routing)이란 다른 경로(주소)에 따라 다른 화면(View)을 보여주는 것이다. 리액트 자체에는 이러한 기능이 내장되어있지 않다. 따라서 리액트의 라우팅 기능을 위해 React-router라는 라이브러리를 사용한다. (Third-party Library) 리액트는 프레임워크가 아니고 라이브러리이다!!!

react-router 사용

CRA로 만든 앱에 route를 추가해서 사용하려면 src/app.js 대신에 routing을 설정한 컴포넌트로 대치해야 한다.

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

Routes 컴포넌트 구현하기

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from 'react-router-dom';
import Home from './Pages/Home';
import Signup from './Pages/Signup';

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

export default Routes;

Route 이동하기

1. Link 컴포넌트를 사용하는 방법

Routes에서 설정한 path로 이동하도록 구현하려면 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 컴포넌트는 dom에서 <a>로 변환되므로, 혹시 a 태그를 사용하고 싶지 않다면 Link를 사용하지 않아도 된다. 예를 들어 이미 다른 태그로 버튼 컴포넌트를 만들어 놓았을 경우.

Link vs a tag

Link는 내가 만든 컴포넌트 중에서 이동을 하게 될 때 주로 사용되고, a 태그는 갑자기 아예 외부의 링크로 연결될때 사용한다.

2. withRouter HOC로 구현하는 방법

Link를 사용하지 않고 요소에 onClick 이벤트를 달아서 이동하고 싶은 곳으로 넘기는 방법도 있다. 아래 goToSignup 이라는 event handler에서 구현한 것 처럼 this.props의 history에 접근해서 이동할 수 있다.

받은 history의 push 메서드에 이동할 path를 인자로 넘겨주면 해당 라우트로 이동할 수 있다.

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

class Login extends React.Component {

  goToSignup() {
    this.props.history.push('/signup');
  }

  render() {
    return (
      <div>
        <div
          class="btn signup-btn"
          onClick={this.goToSignup.bind(this)}
        >
          회원가입
        </div>
      </div>
    )
  }
}

export default withRouter(Login);

이 컴포넌트에서 props에 route 정보(history)를 받으려면 export하는 class에 withRouter로 감싸주어야 한다. 이렇게 withRouter과 같이 해당 컴포넌트를 감싸주는 것을 higher-order component(HOC)라고 한다.

HOC는 react에서 컴포넌트의 공통부분을 구현하는 패턴이라고 생각하면 된다. 간단히 설명해서, HOC는 컴포넌트를 인자로 받고 컴포넌트를 return 하는 함수이다.

this는 현재 컴포넌트를 의미한다. 함수를 arrow function으로 쓰게 되면 .bind(this)를 쓰지 않아도 된다.

각각 언제 사용할까?

Link 컴포넌트

내 컴포넌트 내에서 아묻따 바로 다른 path로 이동할때 사용한다.

withRouter HOC

이동하기 전에 뭔가 실행해야하는 함수가 있을때 사용한다.
예) 로그인을 위해 백엔드의 API와 소통해야 할 때.

Sass

• sass파일의 확장자는 .scss이다.
• sass의 가장 기본적인 기능으로 nesting이라는 것이 있다. JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, .scss 파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있도록 해주어야 한다.
• 변수 활용(@mixin) & 연산자(&) 등 sass 기본 기능 적용하기

[공식문서] Sass Basic Guide
Sass(SCSS) 완전 정복!
Sass에서 미디어쿼리(반응형) 적용하기