오늘은 React Router에 대해서 알아보겠습니다.
이건 강의를 들은지 한참 지났는데, 자꾸 뭘 찾고 하다보니까 포스팅이 너무 늦었습니다. 빨리 진도를 나가야 하는데요. 산더미 같은데 할게..
Navbar에서 메뉴를 눌렀을때 다른 페이지로 이동을 해야하는데요.
이 navigate 기능을 react-router-dom package를 통해서 할 수 있답니다.
npm install react-router-dom 을 이용하셔야 합니다.
React Router
1. navigational Component의 집합입니다.
-> view들간의 navigation을 가능하게 해줍니다.
2. Router Component, route matching Component, navigation Component로 이루어져 있습니다.
1. Router Component
일단 내가 다른 페이지로 이동하려면, 페이지를 이동하겠다고 어디에 선언을 해야합니다.
<BrowserRouter> 을 먼저 선언해줘야합니다.
반드시 선언은 최상위 루트를 감싸주어야, 자식 노드들에도 모두 영향을 줄 수 있답니다.
이 컴포넌트는 브라우저 주소창에 있는 URL을 이용해서 저장을 하고, browser 내의 built-in History Stack을 이용해서 navigate 해줍니다.
모든 주소를 어디다가 저장은 해둬야 찾아서 이동을 해주겠쬬?
History는 제가 막 지어낸 말이 아닙니다.
HIstory 인터페이스 내에 push , createHref 뭐.. 저도 모두 이해하고 쓰는건 아니지만, url도 만들고, 교체하고 그런 작업을 하는게 있다는 것입니다.
return (
<BrowserRouter>
<div className="App">
<Main />
</div>
</BrowserRouter>
);이런식으로 감싸줘야 합니다.
*참고로 static server를 사용하면 <HashRouter>를 사용할 수 있다고 합니다.
자세한 이유는 모르겠지만, 이름이 해쉬인걸 보니 .. 미리 해싱으로 저장해두고 더 빠르게 불러올 수 있기에 따로 만들지 않았을까 생각해봅니다(뇌피셜)
2. Route matching Component
이것들의 종류에는 <Route>, <Switch> 가 있습니다.
Route는 뭘까요? if문으로 생각하면 편합니다.
만약에 path가 true면 렌더링 하고, false면 렌더링하지 않습니다.
Switch는 Route가 여러개일때, 해당되는 path가 여러개면 렌더링도 여러번 일어납니다.
이런걸 방지해주는 컴포넌트 입니다. 아래 예시를 봅시다.
참고로 Swtich는
자식 Route를 하나하나 순회하면서 매칭되는 path가 있다면, 그것만 렌더링을 하고 나머지는 그냥 넘어갑니다.
즉 한번만 렌더링을 일어나게 하는것이죠.
<Switch>
<Route path="/home" component={HomePage} />
<Route
exact
path="/menu"
component={() => <Mycomponent param={this.state.dishes} />}
/>
<Route path="/cocoa" component={Cocoa} />
<Redirect to="/cocoa" />
</Switch>
Route는 속성을 <Route path=" " component/> 이런식으로 주는데요, 만약 path가 맞다면 component로 이동하는 그런것입니다.
그렇다면 exact path는 무엇인가?
path는 beginning만 같으면 같다고 봅니다. 무슨말이냐 ?
<Route path ="/" /> 이렇게 하면 모든 페이지 url은 /home, /mouth 등 '/'로 시작되기에, 모든 url마다 렌더링되게 됩니다.
<Route path="/game" /> 이라면 url이 /game, /game/user, /game/player 등.. 모두 걸리게 됩니다.
따라서 'exact path' attribute를 이용한다면, 정확히 /game 만 잡히게 되는것이지요.
<Redirect>
만약 route에 해당하는게 없다면?
물론! <Route path="/">로 하면 switch case의 default 처럼 사용할 수 있답니다.
하지만 Redirect를 이용하면 어디 컴포넌트로 이동하라고 하지 않고, path('to' attribute)만 써줘도 잘 이동할 수 있습니다.
즉 Switch에서 해당하는게 없으면 Redirect의 url로 이동하라는 의미의 컴포넌트 입니다.
보통 이 라우팅 경로를 설정해주는건, 최상위 노드에 해줘야 합니다.
그래야 하위 노드들이 링크를 참조할 경로를 알려줄 수 있기 때문입니다.
<BrouwerRouter> <Main /> </BrouwerRouter>
------------------------------
Main.js
<Header>
<Swtich>
<Route>~~
<Route>~~~
<Redirect>~~ 이런 구조로 되어있습니다.
</Swtich>
<Footer>
3. route navigation
이제는 경로(route)를 만들어 줄 차례입니다.
어떤 route에서는 어떤 컴포넌트로 이동하라. 를 정해줬다면, 어떤 route는 어떻게 만들까요?
<NavLink>, <Link>를 통해서 만들 수 있습니다.
이 컴포넌트들은 link를 생성합니다. 경로를 만들어주는 것 입니다.
html의 a tag처럼 렌더링 된답니다.
<Link to="/home" /> 은 <a href="/home">이라고 생각하시면 됩니다.
그러면 NavLink는 뭔가? 하실 수 있습니다.
여러분들이 메뉴를 클릭했을때, 메뉴의 색이 변한다거나 이런것들 본 적 있으시죠?
이 NavLink는 자기가 active 상태인것을 스스로 체크할 수 있답니다. (현재 url과 Navlink 내의 path를 비교해서 맞으면 active 상태로 합니다)
그래서 만약 Active상태면 색을 바꿔라! 이런식으로 'style'을 줄 수 있답니다.
<NavLink to="/home" className="style name" />
또는
<NavLink to="/home" activeStyle={{ color:red, fontsize:15}}/>
이런식으로 속성을 줄 수 있습니다.
이것은 a tag로 바뀐다면 이렇게 바뀝니다.
만약 active 상태가 아닌경우 (url이 to의 path와 같지 않은경우)
-> <a href="/home">
만약 active 상태인경우
-> <a href="/home" className="주고싶은 style variable" >
이런식으로 렌더링됩니다.
<NavLink className="nav-link" to="/menu">
<span className="fa fa-list fa-lg" /> Menu
</NavLink>
<Link to="/home">Home</Link>
이런식으로 사용할 수 있답니다^^
감사합니다^^
공식 DOCS입니다
https://reactrouter.com/web/example/basic
React Router: Declarative Routing for React
Learn once, Route Anywhere
reactrouter.com
