[ReactJS] React 이론 공부 기초 - 5

 

MPA(Multi Page Application)란?

• 서버에 미리 여러페이지를 두고 유저가 네비게이션 요청 시 적합한 페이지를 전달하는 방식
• 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송됨
• 서버에 라우팅을 처리하는 기능이 있고, 서버가 여러 페이지를 관리함
• 페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지간 데이터를 재활용하기 힘듦

SPA(Single Page Application)란?

• 하나의 페이지 요청으로 전체 웹 앱을 사용하는 방식
• Client-side routing 기술을 활용해, 페이지 진입 시 리로드 없이 라우팅 함
• AJAX 기술을 활용, 페이지 이동 시 서버에 데이터만 요청하여 자바스크립트로 페이지를 만듦
• MPA와는 다르게 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현
• 자바스크립트만을 활용해 전체 페이지는 만들기에, 첫 요청 시 빈 페이지를 받게 됨

장점	단점
- 서버에서 페이지를 만들 필요가 없으므로 CDN에 캐싱 가능 - 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어듦  > 데이터 요청을 캐싱해 재사용하는 등의 제약조건이 줄어듦	- MPA 방식 보다는 Search Engine Optimization에 불리함 - 하나의 앱이 지속하기 때문에, 메모리 관리와 성능, 데이터 활용 등이 중요함 - 하나의 거대한 자바스크립트 앱을 전송받아야 하므로 코드가 많아질수록 로드 속도가 느려짐

• SPA의 라우팅
  • 주로 History API 또는 URL hash를 이용해 페이지 리로드 없는 페이지 전환을 구현함
  • history, location 등 HTML5 API를 활용
  • visibilitychange, postate, beforeunload, 등 window event를 활용하여 페이지 전환 등의 이벤트 시 핸들러 등록.
  • react-router, reach-router 등의 라이브러리를 활용하면, 라우팅 관련 기능을 쉽게 사용할 수 있음

React-router

• Declarative routing for React
• React의 JSX를 이용하거나, History API를 사용하여 라우팅을 구현
• 웹에서는 react-router-dom을 사용
• 적용 시, 서버의 모든 path에서 같은 앱을 서빙하도록 해야함
• React 컴포넌트를 특정 path와 연결하면, 해당하는 path로 진입 시, 컴포넌트를 렌더링하게 함
• 페이지 이동 시, 이벤트 핸들러를 등록함
• /post/my-post-1 등의 nested route를 구현함

React-router Components

• BrowserRouter
  • HTML5의 history API를 사용하여 UI와 URL의 싱크를 맞추는 역할
  • 모든 URL에 대해 동작하게 하기 위해서는 서버 설정이 필요함
  • 모든 path 앞에 basename을 지정할 수 있음
  • forceRefresh로, 페이지 이도시 리프레시 할 것인지 지정할 수 있음
• Switch
  • 여러 Route 중 Route 위에서부터 하나 선택하여 랜더링함
  • 매칭되는 Route가 없으면 아무것도 보여주지 않음
    • fallback용으로 404 Not found 페이지를 추가함
  • path="/" 의 경우 모든 path에 매칭되므로 exact 키워드를 추가하거나 가장 아래로 내려야함
  • Switch는 v5에서 사용되었고, v6부터는 "Routes"로 변경 되었음

    • // v6 예시
      
      <Routes>
         <Route path="/login" element={<LoginForm />} />
      </Routes>

• Route
  • path와 컴포넌트를 매칭함
  • 매칭되는 컴포넌트는 childern으로 넣어주거나 component prop으로 넘김
  • exact 키워드로 정확하게 매칭하는 path를 설정함
  • Route로 렌더링 되는 최상위 컴포넌트는 match, location, history를 prop으로 받음
  • render prop으로, 매칭되었을 때, 실제 어떤 컴포넌트를 렌더링 할 지 통제함
• Redirect 
  • Link와 비슷하나, 랜더링 되면 to prop으로 지정한 path로 이동함
  • Switch 안에 쓰일 경우 from, to를 받아 이동하게 만듦
    • from="/" to="/login"
• Link, NavLink
  • to prop를 특정 URL로 받아 클릭 시 네비게이션 해줌
  • anchor tag를 매핑함
  • NavLink의 경우, 매칭 시 어떤 스타일을 가질지 등의 추가 기능이 있음
  • to에 location object 나 함수를 받을 수 있음
• useLocation 
  • Hook은 현재 URL의 정보를 가지는 location 객체를 반환함
  • useLocation 객체는 대표적으로 key, pathname, search, state의 속성값을 가짐
    
    • pathname : endpoint를 의미함
    • search : ? 이후의 queryString을 값으로 가짐
    • state : 이전 페이지로부터 전달받은 인자를 의미함

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript