React 프론트엔드 라우팅과 백엔드 라우팅의 차이점: 1. 프론트엔드 라우팅은 "react-router"의 Link 태그를 통해 트리거되고 백엔드 라우팅은 ajax를 통해 트리거됩니다. 브라우저 이벤트 모니터링을 기반으로 하며 백엔드 라우팅은 http 통신 프로토콜을 기반으로 합니다. 3. 프런트엔드 라우팅은 부분 렌더링을 달성할 수 있는 반면 백엔드 라우팅은 전체 페이지를 다시 렌더링할 수 있습니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
백엔드 라우팅 메커니즘
백엔드를 아는 학생들은 백엔드 라우팅이 백엔드가 app.js에 백엔드 라우팅 기능을 등록하고 프런트엔드가 ajax를 통해 해당 라우팅 콜백 기능을 트리거한다는 것을 알고 있습니다(Express를 예로 들어보겠습니다).
트리거: 아약스
응답: app.get('/router',callback)
원리: http 통신 프로토콜 기반
//app.jsapp.get('/', (요청, 응답) => { let ret = { "성공": true, "code": 200, "message": "", "data": [], } 응답.전송(ret)})프런트엔드 라우팅 메커니즘
프런트엔드 라우팅(react-router라고 함)은 프런트엔드에서 프런트엔드 라우팅과 컴포넌트 매핑을 router.js에 등록하고, 프런트엔드는 Link에서 설정한 경로를 통해 컴포넌트 렌더링을 하거나, 브라우저에서 해당 경로:
트리거: 반응 라우터의 링크 태그
응답: Rout 태그에서 해당 구성 요소를 렌더링합니다.
원리: 브라우저의 해시(React-Router v2 이전), 기록(React-Router v4)을 기반으로 합니다.
//index.jsclass ListContent extends Component { constructor(props){ super(props); this.state = { } } render() { return ( <Row> <Button>+ <Link to="/topic"> 게시물 주제 </Link> </Button> </Row> ) }}//router.js<Router> <div> <Header/> <Switch> <경로 정확한 경로="/" 구성요소={index} /> < 경로 정확한 경로="/topic" 구성요소={topic} /> </Switch> </div></Router>router.js에서 헤더 구성요소는 항상 페이지에 존재하지만 Switch 태그의 구성요소는 트리거된 후에만 렌더링됩니다. 트리거되지 않은 구성요소는 null이며 표시되지 않는다는 점을 간단히 이해하면 됩니다.
따라서 로컬 렌더링이 형성됩니다.
//프런트 엔드 라우팅 '/topic'이 트리거되면 인덱스 구성 요소가 렌더링되지 않습니다. <Router> <div> <Header/> <Switch> <Route 정확한 경로="/" 구성 요소={null} /> < 경로 정확한 경로=" /topic" 구성요소={topic} /> </Switch> </div></Router>프런트엔드 라우팅과 백엔드 라우팅의 차이점
프런트엔드 라우팅은 브라우저 이벤트 모니터링을 기반으로 하며 http 통신 프로토콜을 통과하지 않습니다.
프런트엔드 라우팅은 부분적으로 렌더링되고 백엔드는 전체 페이지를 다시 렌더링합니다. 상대적으로 프런트엔드 라우팅 환경이 더 좋습니다.