TIL 26)React 2 Router,Sass

한개의 웹페이지 안에서 여러개의 페이지를 보여주기 위해서 react에서 Routing을 사용한다.

Routing

다른 경로에따라 다른 화면을 보여주는 것
이 기능을 사용하기 위해서는 react-router를 설치해야 합니다.

설치 이후 react.js를 생성하고 import를 추가해줍니다.

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

as 는 BrowserRouter를 Router 라고 쓰겠다고 말해주는 것이다.

routes에서는
Router , Switch , Route를 사용합니다.

<Router>
  <Switch>
    <Route/>
  </Switch>    
</Router>

이러한 형식으로 사용됩니다.

간략하게 각자 용어를 설명하면
router :컴파일링 역할을 합니다.
switch : url 값과 일치하는 첫번째 route를 불러줍니다.
route : 경로에서 해당 componet를 보여준다. Path를 사용해 경로url을 작성해주고 component를 이용해 component를 가지고 옵니다

예시)

  <Router>
        <Switch>
          <Route exact path="/" component={Login} />
	<Route exact path="/signup" component={Signup}/>
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>

Route 에서 사용된 exact는 스위치가 첫번째를 불러주는데 혼용을 없애기 위해서 사용됩니다.
스위치의 첫번째 route를 보면 path가 "/"로 되어 있고 로그인페이지가 랜더링 됩니다. 모든 주소에서는 /가 들어가서 경로를 바꿔주는데 exact를 사용하지 않으면 /main 이여도 /까지 먼저 읽어버려서 경로를 변경해도 로그인 페이지만 보게 됩니다.

Route를 생성했다면 index.js도 수정해줍니다.
render 부분에섯 로 변경해줍니다.

, 처럼 하나씩 작성해야 했던 것들이 Routes를 작성하면서 두개다 이용이 가능해졌습니다.

Route 이동하기

이동하는 방법에는 두가지가 있습니다.
1. < link> 컴포넌트 사용방법
2. withRouterHoc 사용방법

< link> 컴포넌트 사용방법

link컴포넌트는 a태그와 같습니다. 바벨이 a태그로 변환시켜줍니다.
import 를 작성해줍니다.
import { Link } from 'react-router-dom'
< Link to="/mian">< /Link> 이러한 형식으로 사용됩니다.

a 태그는 외부 사이트로 이동하는 경우 사용됩니다.(사이트에서 인스타 사이트로 갈때 .. )

Link 태그는 프로젝트 내에서 페이지 전환하는 경우에 사용됩니다. ( 메뉴 카테고리들 이동, 상품 보기 등)

withRouterHoc 사용방법

import 를 작성해 줍니다.
import { withRouter } from 'react-router-dom';

render 이전에 함수를 만들어서 함수를 활용하여 조건을 줄 수 있어서 Link와 차별이 됩니다.
Link처럼 태그를 만들지 않고 사용할 태그에 함수를 넣어줍니다.

예시)

class Login extends React.Component {

  goToMain = () => {
    this.props.history.push('/main');
  }
  render() {
    return (
      <div>
        <button
          className="loginBtn"
          onClick={this.goToMain}
        >
          로그인
        </button>
      </div>
    )
  }
}

export default withRouter(Login);

export 에서 해당 컴포넌트를 WithRouter로 감싸주어야 합니다.
이와같이 해당 컴포넌트를 감싸주는 것을 Higher Order Component(HOC)라고 합니다.