[React] 라우팅 (Route, Link, NavLink, Switch) + QueryParameter

# <Route path="" exact component={} render={}/>

 • path : 해당 path 에 접근 시, 설정된 component나 render 함수를 실행 

  * :변수명 을 사용하여 변수를 URL에 삽입가능

 • keyword exact : 정확히 path에 일치할때만 component 를 render

 • component : 해당 path 에 접근 시, component render

 • render : 인자로 함수를 받으며, 해당 path에 접근 시, render 함수 실행 

   (따라서, 논리연산이 필요한 작업은 render를 사용)

   * component 와 render를 같이 사용 시, component가 우선권을 가져 render는 실행되지 않음

 

# <Link to=""></Link>

 • html의 a 태그(anchor)를 조작하여, 해당 URL로 진입시 서버에서 리소스를 리로딩하지 않고 SPA 개념을 지키게 해줌.

  * 위의 이유로 React 앱에서 a 태그는 사용을 지양하여야 함.

    (개발자도구 Network에서 확인가능, 기본적인 a태그는 앱을 새로고침하면서 경로를 이동)

 • a태그의 href와 Link의 to 는 같은 의미

 

# <NavLink to="" activeStyle={} isActive={} activeClassName={} exact></NavLink>

 • Link와 다르게, 브라우저의 URL이 'to' 에 지정된 URL과 일치(매칭)할 시, 특정 스타일을 적용할 수 있음

 • Route의 path 처럼 동작하기 때문에 exact 키워드가 있음.

 

# <Switch> Route Component </Switch>

 • Route 컴포넌트 들을 switch-case 문과 같이 작동하게 끔 로직을 만들 수 있음 

 • exact 키워드를 일일이 관리할 필요가 없어짐 

 • NotFound 페이지를 만들어 렌더링 가능 (이때는 "/"를 path로 하는 Route에 excat를 추가)

<BrowserRouter>
      <Switch>
        <Route path="/login"  
              render={()=>(isLogin? <Redirect to="/"/> : <Login/>)}
              component={Login}/>
        <Route path="/profile/:id" component={Profile}/>
        <Route path="/profile" component={Profile}/>
        <Route path="/about" component={About}/>
        <Route path="/" exact component={Home}/>
        <Route component={NotFound}/>
      </Switch>
</BrowserRouter>

---

# URL에 쿼리파라미터 실어 보낼 때

• URL/about?name=json 실행 시, Route("/about")으로 렌더링되며, 쿼리파라미터는 props.location.search에 있다.

 

 1. 브라우저 내장함수 URLSearchParams(props.location.search)

   • 브라우저 내장함수를 이용하는 방법. 특정 브라우저에서 지원되지 않으니 종속성이 부여됨. 사용 비추

 2. queryString 사용

   • npm i query-string 으로 설치 후, import 하여 사용

   • 외부 js 라이브러리 이므로, 종속성이 생기지 않음 (사용 권장)

import queryString from 'query-string';

export default function Test(props){
	const query = queryString.parse(props.location.search);
    
    return(
    	<div>{query.name && <p>His name is {query.name}.}</div>
    );
}