[React] #05-2 Server Side Rendering React-Router (simple)

https://stepover10.tistory.com/13 기본세팅 코드에서 SPA를 사용하기 위해 React-Router를 연결해보겠다. 

먼저 npm 모듈을 설치해주자

npm install --save react-router-dom

 

그리고 정말 간단하게 코드를 작성해보겠다

server/server.js

import path from 'path';
import express from 'express';

import React from 'react';
import { renderToString } from 'react-dom/server';

// 라우터 모듈 삽입
import { StaticRouter } from 'react-router-dom';

import App from '../src/App';
import Html from './html';


const server = express();
const port = 3000;

// get 주소는 * 설정
server.get('*', function(req, res){  
  const context = {};
  const AppComponent = renderToString( 
    <StaticRouter location={req.url} context={context}>
      <App />   
    </StaticRouter>
  );

  res.send( Html({ app: AppComponent}) )
});

server.listen(port, () => {
  console.log(`Express App on port ${port}`);
});

서버에서는 <BrowserRouter> 대신 <StaticRouter> 컴포넌트를 사용한다 context 리액트 라우터에서 this.props로 받을수 있다

 

src/app.js 

import React from 'react';
import User from './User';
import { Switch, Route, Link } from 'react-router-dom';

export default class App extends React.Component{
  render(){    
    return (
      <>
        React-Router SSR Test!
        <div>
          <Link to="/">Intro</Link> <br />
          <Link to="/user">UserPage</Link>
        </div>
        <Switch>          
          <Route path="/user" component={User} />
        </Switch>
      </>
    )
  }
}

React-Router의 모듈을 불러와서 사용해야 한다 <Link>는 a 태그의 역할을 한다 <Switch>는 페이지 이동을 할수 있도록 해준다.

User라는 컴포넌트를 만들고 위의 코드처럼 연결을 해주면 쉽게 이동이 가능하다.

 

파라미터를 연결해보겠다 app.js를 아래의 코드처럼 수정해보자

/src/app.js

export default class Appssr extends React.Component{
  render(){    
    return (
      <>
        Server Side!
        <div>
          <Link to="/">첫화면</Link> <br />
          <Link to="/user/butter">UserPage</Link>
        </div>
        <Switch>          
          <Route path="/user/:id" component={User} />
        </Switch>
      </>
    )
  }
}

그리고 console.log를 보면 match.params의 값이 넘어오는걸 알수있다. 

url?page=1&list="start" 이러한 형태는 데이터 형태로 바꿔주는 모듈을 만들어서 써야한다

정말 기본 세팅이다 단지 React-Router를 테스트하기 위한 글이다. React-Router를 사용함으로써 Front에서 주소관리가 가능하다 또한 파라미터도 전달이 가능하기 때문에 다양한 개발이 가능하다.