[TIL 30] React | Router

Router를 사용하는 이유

react는 SPA (Single Page Application)다.
-> html이 딱 1개
-> 그럼 한 개의 웹페이지 안에서 여러개의 웹페이지를 어떻게 보여줄까?
-> Routing

Routing

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

react자체에는 이런 기능이 내장되어있지 않기 때문에 Third-party Library인 React-router를 사용해 라우팅 기능을 구현한다.

React-router 설치

npm install react-router-dom --save

• --save : install했는데도 설치가 안됐다고 에러 뜰 때가 있어서 확실하게 package.json 에도 저장하겠다는 뜻.

Route 이동하기

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

• path 속성으로 경로를 지정할 수 있다.
• 실제 경로와 완벽하게 일치하는 경로만 불러오려면 exact 속성을 추가해야한다.

<Link>

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

• Link 컴포넌트는 a태그로 컴파일된다.
• 주로 클릭 시 바로 이동하는 기능을 구현할 때 사용한다. (ex. 쇼핑몰 웹페이지에서 아이템 클릭 시 상세 페이지로 이동할 때)
• a vs Link
  • <a> - 외부 사이트로 이동하는 경우 (페이지 전체를 새로고침하여 렌더링한다.)
  • <Link> - 프로젝트 내에서 페이지 전환하는 경우 (페이지 전체를 새로고침하지 않고 필요한 부분만 reload한다.)
• Link를 object형태로도 사용할 수 있다.
  https://reactrouter.com/web/api/Link/to-object

<Link to={{
            pathname:"/about",
            state: {
                fromNavigation: true
            }
        }}>
About
</Link>

withRouterHOC

class Login extends React.Component {

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

• props 객체의 history (this.props.history) 에 접근해서 이동할 수 있다.
• 주로 페이지 전환 시 추가로 처리해야하는 로직이 있을 때 사용한다. (ex. 로그인 시)