React 서버 렌 더 링 의 길 03

모든 소스 코드, 문서, 그림 은 github 창고 에 있 습 니 다. 클릭 하여 창고 에 들 어 갑 니 다.
관련 읽 기

React 서버 렌 더 링 의 길 01 - 프로젝트 기초 구조 구축

React 서버 렌 더 링 의 길 02 - 가장 간단 한 서버 렌 더 링

React 서버 렌 더 링 의 길 03 - 경로

React 서버 렌 더 링 의 길 04 - redux - 01

React 서버 렌 더 링 의 길 05 - redux - 02

React 서버 렌 더 링 의 길 06 - 최적화

React 서버 렌 더 링 의 길 07 - CSS 스타일 추가

React 서버 렌 더 링 의 길 08 - 404 와 리 셋

React 서버 렌 더 링 의 길 09 - SEO 최적화

1. 경로

페이지 에 내용 이 있 으 면 우 리 는 경로 의 도약

을 해 야 한다.

다운로드 루트 의존 패키지, react - router - dom, npm i react-router-dom -S

여 기 는 다단 계 루트 를 잠시 소개 하지 않 고 다단 계 루트 를 뒤에 놓 고 소개 합 니 다. 지금 우 리 는 1 급 루트 만 소개 합 니 다

1.1 루트 소개

우리 가 클 라 이언 트 렌 더 링 을 사용 할 때 페이지 전환 경 로 는 전단 에서 제어 되 고 주로 두 가지 모델 이 있 으 며 하 나 는 history 모델 이 고 다른 하 나 는 hash 모델 이다.

어떤 모델 이 든 경로 전환 작업 을 할 수 있 습 니 다. 유일한 차이 점 은 history 모델 은 백 엔 드 에서 404 페이지 를 제어 해 야 하고 hash 모델 은 필요 하지 않 습 니 다

서버 에서 렌 더 링 을 하려 면 정적 경로 (static router) 가 필요 합 니 다. 클 라 이언 트 의 경로 모델 과 다 릅 니 다

경로 의 통 제 는 서버 뿐만 아니 라 클 라 이언 트 도 똑 같은 경로 규칙 을 해 야 한다. 그러면 우 리 는 클 라 이언 트 와 서버 가 함께 사용 할 수 있 는 경 로 를 쓸 수 있다

.
1.2 경로 페이지 구성 요소

경로 전환 은 최소 두 페이지 급 구성 요소 가 필요 하기 때문에 뉴스 페이지 구성 요소, containers / News / index. js

를 먼저 만 들 수 있 습 니 다.

이전에 우 리 는 홈 페이지 급 구성 요 소 를 가지 고 있 었 습 니 다. 지금 은 두 개의 구성 요소 가 있 습 니 다. 지금 은 페이지 가 준비 되 어 있 습 니 다

containers/News/index.js

// containers/News/index.js
import React, { Component } from 'react';

class News extends Component {
  render() {
    return (
      
        News Page
      
    );
  }
}

export default News;

1.3 루트 파일

경로 구성 요 소 를 내 보 내야 합 니 다. 구성 요소 내 부 는 Route

입 니 다.

내 보 낸 경로 구성 요 소 는 하위 구성 요소 로 서 페이지 에 렌 더 링 할 수 있 습 니 다

지금 우 리 는 이런 모델 을 먼저 사용 하고 후기 에 우 리 는 다른 모델 을 사용 할 것 이다. 그러나 어떤 모델 이 든 실질 적 으로 똑같다

주석: <>> 라벨 과 라벨 은 똑 같 습 니 다. 모두 집합 서브 요소 의 라벨 입 니 다. 실제 DOM 노드

를 추가 하지 않 습 니 다.

src/routes.js

// src/routes.js
import React from 'react';
import { Route } from 'react-router-dom';
import Home from './containers/Home';
import News from './containers/News';

export default (
  <>
    
    
  >
);

1.4 클 라 이언 트 경로

클 라 이언 트 의 경로 가 비교적 간단 하고 경로 구성 요 소 를 하위 구성 요소 로 직접 전달 하면 된다

여기 서 직접 길 을 여기에 두 면 실제 적 으로 경로 파일 에 있 는 여러 개의 Route 를 여기에 두 는 것 이다. 만약 에 우리 가 경로 안의 Route 를 여기에 두 면 우 리 는 실제 적 으로 똑 같 고 차이 가 없다 는 것 을 알 게 될 것 이다

import React from 'react'
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import routes from '../routes';

hydrate(
  
    {routes}
  , window.root);

1.5 서버 경로

서버 의 경로 가 상대 적 으로 복잡 하기 때문에 무 상태 경로, 즉 정적 경로 인 StaticRouter

를 사용 해 야 한다.
서버 는 요청 이 어떤 모드 를 통과 하 는 지 모 르 고 서버 도 알 필요 가 없 기 때문에 서버 는 클 라 이언 트 가 보 낸 요청 에 따라 해당 하 는 처 리 를 하면 됩 니 다.

StaticRouter 에 서 는 두 가지 속성 을 전달 해 야 합 니 다. 하 나 는 context 이 고 하 나 는 location

입 니 다.

context 는 주로 구성 요소 에 데이터 정 보 를 전달 하 는 데 사 용 됩 니 다. 이 속성 은 클 라 이언 트 와 서버 에서 서로 파 라 메 터 를 전달 할 수 있 습 니 다. 예 를 들 어 css 스타일 의 매개 변수

location 은 주로 요청 경로 정 보 를 수신 하 는 데 사 용 됩 니 다. 예 를 들 어 pathname, search, hash 등

src / server / index. js 수정

import routes from '../routes';

app.get('*', (req, res) => {
  let context = {};

  let domContent = renderToString(
    
      {routes}
    
  );

  // html       
  res.send(html);
});

코드 에서 볼 수 있 습 니 다. 홈 구성 요 소 를 제거 하고 routes 구성 요 소 를 도 입 했 습 니 다. routes 는 홈 과 뉴스 구성 요소

와 일치 하기 때 문 입 니 다.

StaticRouter 구성 요 소 를 추가 하여 context 값 을 입력 하여 express 의 req. path 를 location 속성 에 전달 하면 서버 에서 클 라 이언 트 의 경로 주소

를 알 수 있 습 니 다.

수정 app.get('/') 은 app.get('*') 입 니 다. 저희 서버 는 같은 경로 의 주 소 를 받 는 것 이 아니 라 / news 경로 도 있 기 때문에 루트 경 로 를 전체 일치 로 수정 해 야 합 니 다.전역 일치 로 수정 하지 않 아 도 됩 니 다. 다만 100 개의 경로 가 있다 면 100 개의 app. get ('/ xxx') 을 써 야 합 니 다. 원한 다 면 가능 합 니 다

원 리 는 바로

클 라 이언 트 는 루트 를 통 해 요청 한 주 소 를 수 정 했 고 서버 에서 해당 하 는 주 소 를 받 았 습 니 다. staticRouter 에서 클 라 이언 트 가 요청 한 루트 주소

를 얻 었 습 니 다.

routes 가 일치 하기 시 작 했 습 니 다. 일치 하면 일치 하 는 경로 구성 요 소 를 HTML 문자열 로 렌 더 링 하여 클 라 이언 트 에 보 냅 니 다.

일치 하지 않 으 면 http://localhost:3000/hello 경로 에 접근 하면 우리 의 routes 는 일치 하지 않 습 니 다. 일치 하지 않 으 면 renderToString 렌 더 링 결 과 는 비어 있 습 니 다. domContent 는 빈 값 으로 HTML 템 플 릿 을 삽입 하여 빈 페이지

를 얻 을 수 있 습 니 다.

이때 우 리 는 서로 다른 url 을 통 해 서로 다른 페이지 에 방문 하여 웹 페이지 소스 코드 를 볼 수 있 습 니 다. 서로 다른 url 에 대응 하 는 소스 코드 가 바로 해당 구성 요소 의 코드

임 을 볼 수 있 습 니 다.
1.5 페이지 효과 와 페이지 소스 코드

첫 페이지 효과

첫 페이지 소스 코드

뉴스 페이지 효과

news 페이지 소스 코드

2. 경로 이동

우 리 는 이미 경로 의 전환 을 실현 했다. 그러나 우 리 는 url 을 입력 하여 경로 전환 을 완성 했다. 분명히 우 리 는 클릭 을 통 해 점프 를 실현 해 야 하기 때문에 우 리 는 Link 를 사용 하여 경로 전환

을 실현 했다.

우 리 는 Header 네 비게 이 션 을 만 들 고 Header 네 비게 이 션 에서 클릭 경 로 를 통 해 페이지 전환

을 실현 합 니 다.

양식 이 더욱 아름 답 기 위해 도입 합 니 다[email protected]여 기 는 클 라 우 드 (bootcdn) 를 찍 는 boottstrap 자원 을 사용 합 니 다. 우 리 는 boottstrap 을 Public 폴 더 에 넣 고 client. js 를 도입 하 는 것 처럼 boottstrap. css 를 도입 할 수 있 습 니 다. 효 과 는 같 습 니 다

2.1 헤더 구성 요소

헤더 구성 요소 / 컴 포 넌 트 / 헤더 / index. js

boottstrap 의 네 비게 이 션 스타일 사용

/components/Header/index.js

// /components/Header/index.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Header extends Component {
  render() {
    return (
      
        
          
            REACT-SSR
          
          
            
                
                
            
          
        
      
    );
  }
}

export default Header;

2.2 Header 구성 요 소 를 동일 하 게 구성 합 니 다.

여기 서 같은 구 조 는 간단 합 니 다. Header 구성 요 소 를 BrowserRouter 와 StaticRouter 에 직접 넣 고 스타일 을 조금 만 조정 하면 됩 니 다

클 라 이언 트 동 구성, src / client / index. js

수정

// src/client/index.js
import React from 'react'
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import routes from '../routes';
import Header from '../components/Header';

hydrate(
  
    <>


      
        {routes}
      
    >
  , window.root);

서버 구성, src / server / index. js

수정

// src/server/index.js
import Header from '../compoents/Header';

let domContent = renderToString(
  
    <>


      
        {routes}
      
    >
  
);

React 서버 렌 더 링 의 길 03 - 경로

News Page

좋은 웹페이지 즐겨찾기