Code States 18일차

오늘의 키포인트

리액트 - SPA

나의 이해

SPA(Single Page Application) : 서버로부터 페이지의 모든 부분을 받아오지 않고 중복되는 부분을 제외한 필요한 부분만 받아 페이지 업데이트

문법 및 중요

spa
장점 : 사용자와의 interaction에 빠르게 , 서버 과부하 줄어듦, 전체 페이지 렌더링 안해도되서 더 나은 유저 경험

단점 : js파일이 큼 = 첫 로딩이 긺 (html파일은 거의 비었고 대부분 코드가 js에 들어있음),
 검색 엔진 최적화(SEO)가 좋지 않음 (html에 정보가 별로 없어서 검색 로봇이 동작못함)



wireframe : 디자인 전에 선을 이용해 윤곽선 잡는것

라우팅(Routing) : 주소에 따라 다른 화면 보이는거
React SPA에서 라우팅을 위해 React Router이라는 라이브러리 많이 이용



React의 주요 컴포넌트
<BrowserRouter> : router 역할
<Switch>
<Route> : Switch와 함께 route matchers (경로 매칭)
<Link> : route changers (경로 변경)

import{BrowserRouter, Switch, Route, Link> from “react-router-dom”; // 이거로 import해와야함



1      react-router라이브러리 설치
npx create-react-app simpleroute // simpleroute 폴더에 React App설치
cd simpleroute
npm install react-router-dom // react-router 라이브러리 설치


2      App.js로 react-router 컴포넌트 꺼내오기 // js파일 최상단에 씀
import React from “react”;
import{BrowserRouter, Switch, Route, Link> from “react-router-dom”;

export default function App(){
 return (…)
}



BrouwerRouter : 웹 애플리케이션에서 HTML5의 history API를 사용해 페이지 새로고침 안해도 주소 변경해주게끔
ReactDOM의 랜더 단계인 index.js에 넣어서 사용 가능 (BrowserRouter이 상위에 있어야지 Route 컴포넌트 사용가능)



index.js에 넣는 것

import React from 'react';

import ReactDOM from 'react-dom';

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));





<Switch> 컴포넌트는 여러 <Route>를 감싸서 경로 일치하는 하나의 라우터 렌더링 // 안쓰면 모두 렌더링
<Route> 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 지정. Link 컴포넌트가 정해주는 URL 경로와 일치해야 작동
<Link> 경로를 연결해주는 컴포넌트 페이지 새로 안불러오고 HTML5 History API를 이용해 주소만 변경 // ReactDOM으로 렌더하면 <Link>컴포넌트는 <a>태그로 바뀜 // <Link>쓰는 이유는 <a>쓰면 모든 페이지를 불러오기 때문에 link는 페이지 전환 방지

 

exact 쓰는 이유
이것을 안쓰면 home처럼 Link to = ‘/’인 경우 /로 시작하는 Route 컴포넌트를 모두 보여줌
물론 안쓰고 switch만 써서 할 순 있겠지만 순서와 위치를 잘 생각해야함



ex) 

<BrowserRouter>

  <div>

    <nav>

      <li>

        <Link to="/about">MyPage</Link>

      </li>

    </nav>



    <Switch>

      <Route exact path ="/">

        <Home />

      </Route>

    </Switch>

  <div>

</BrowserRouter>

 

기타

npm install react-router-dom : React router을 이용하기 위해 설치