Router) What is..... React - Router

Single Page Application 이란말을 React 공부하면서 많이 들어봤을 것이다...

혹시 이거 모른다면 내가혼던것처럼 그쪽도...혼나야...크큼 여튼

SPA에서는 라우팅을 클라이언트가 담당한다.

 

그럼 라우팅은 뭐지? 물론 책에 잘나와있지만

-> 간단하게 말하면 어떤 주소에 어떤 UI를 보여줄지 택하는것

 

원래는 서버쪽에서 관리하는 로직이 이제는 클라이언트가 관리함!!

이거 주소타면 전체 다시 받아서 새로고침마냥? (그래서 댓글처리할때 비동기 하는거 이런거 빼고)

user가 about페이지를 서버에 요청하면 서버가 이에대해 응답을 하는 형식이다.

 

하지만 새로운 데이터를 요청해야한다면 계속 요청하다보면 서버자원은 계속 많이 사용하게 되고 불필요한 트래픽 사용 등 안좋아...

->간단하게 말하면 데이터가 바뀐부분만 ...ㅎㅎ

서버쪽에서 자원을 많이 아낄수있고 클라이언트는 사용자가 더 좋은 사용자 경험을 누릴수 있다.

 

 

그럼 장점만 있나?

1.

-> 앱의 규모가 커지면 js파일의 크기가 너무 커질수 있다.   // 하지만 Code Splitting으로 해결할수 있다.

기능별로 분리하는 개념인데... 뒤에 글에서 설명하겠음.... (글 길게 쓰기 싫어...)

 

2.

-> 브라우저에서 자바스크립트가 구동 되지 않으면 UI를 볼 수 없다. ex) 검색엔진에서 크롤링 불가능 

또 다른뜻으로는 자바스크립트가 구동되기 전까지는 페이지를 볼수 없다.( 해본적은 없지만 빈페이지를 보게 되지 않을까....)   // Server Side Rendering으로 해결 가능

 

 

 

사용현황...

 

이정도면 닥치고 react-router 쓰라는거 아닌가? ㅋㅋㅋ 그런데 next 얘기도 블로그 돌아다니면서 꽤 들은거 같은데...

 

그래서 알아보니 

 

react-router   --> 컴포넌트 기반으로 라우팅 한다. 컴포넌트를 렌더링하고 그에대해 props를 사용해서....(react사용하는거의 특징인듯)

 

위에 보면 컴포넌트를 <Route path=~~ component={~~}> 해서 컴포넌트 기반으로한다.

 

 Next.js

-> 이 도구를 사용하게되면 서버사이드 렌더링을 엄청나게 쉽게 구현가능 & 코드스플리트도 굉장히 쉽게할수 있다.

 

그럼 이거 쓰지 왜?????  

 

->  파일경로, 이름을 기반으로 라우팅을 함.

 

 

하... 컴포넌트 로 쓰는게 낫구만...ㅎ

 

 

Router 종류가 있다며??

-> 해당 인덱스를 털어볼께(각 부분의 ts 인덱스 파일을 살펴보자)

<BrowserRouter>

export interface BrowserRouterProps {
    basename?: string;
    getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void);
    forceRefresh?: boolean;
    keyLength?: number;
}
export class BrowserRouter extends React.Component<BrowserRouterProps, any> {}

HTML에 HTML5 History API 라는게 있는데 이를 사용한다... 주소만 바꾸고 페이지는 다시 불러오진 않음

리액트 라우터를 사용할때 BrowserRouter를 많이 쓴다고한다.

 

 

<HashRouter>

export interface HashRouterProps {
    basename?: string;
    getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void);
    hashType?: 'slash' | 'noslash' | 'hashbang';
}
export class HashRouter extends React.Component<HashRouterProps, any> {}

좀 옛날에 사용하던 방식이라고 한다. 

#형태의 주소를 널때 사용하는 방식의 Router

ex) example.com/#/path/ro/route

-> #를 사용함. 못생김, 옛날 브라우저 전용

 

->

저 6-9 버전 가능하다. 하지만 요즘 누가 저거쓰나....ㅋㅋ( 쓰는데가 있으니까 이점 염두하고 쓰는곳이 있다고한다 ㅜ)

 

<MemoryRouter>

 

export interface MemoryRouterProps {
  initialEntries?: H.LocationDescriptor[];
  initialIndex?: number;
  getUserConfirmation?: ((message: string, callback: (ok: boolean) => void) => void);
  keyLength?: number;
}
 
export class MemoryRouter extends React.Component<MemoryRouterProps, any> { }

브라우저의 주소와 무관함(관계NO), 일체 건들이지 않음 임베디드 웹앱, 리액트 네이트브 등에서 사용

->테스트 환경이나 네이티브 환경등이 유용할수 있다.  ( 난 지금 그냥 웹에서 사용하고 있기에 쓸일이 있나? )

 

 

<StaticRouter>

export interface StaticRouterProps {
  basename?: string;
  location?: string | object;
  context?: StaticRouterContext;
}
 
export class StaticRouter extends React.Component<StaticRouterProps, any> { }

서버사이드 렌더링에서 사용하는 용도

 

<Route>

export interface RouteProps {
  location?: H.Location;
  component?: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
  render?: ((props: RouteComponentProps<any>) => React.ReactNode);
  children?: ((props: RouteChildrenProps<any>) => React.ReactNode) | React.ReactNode;
  path?: string | string[];
  exact?: boolean;
  sensitive?: boolean;
  strict?: boolean;
}
export class Route<T extends RouteProps = RouteProps> extends React.Component<T, any> { }

라우트를 정의할 때 사용하는 컴포넌트

 

위에 path --> 어느 경로로 들어 왔을때,...

       component --> 어떤 컴포넌트를 보여줄것이다. 이런 설정 ㅎ

 

<Link>

export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
    to: H.LocationDescriptor;
    replace?: boolean;
    innerRef?: React.Ref<HTMLAnchorElement>;
}
export class Link extends React.Component<LinkProps, any> {}

원래 a링크를 타면 새로고침이 되는건데....

사용한 Router의 주소를 바꿈 a태그지만 새로고침 안됨

 

설명 빡쌨다. 

다음글은 좀 세세하게 들어가보겠다.