TIL : React-Router-Dom

영아·2021년 5월 26일

리액트 Sprint를 진행하면서 갑자기 React-router-dom이라는 것이 나왔었다.
그때는 관심있게 보지않았는데 .. React로 페이지를 만들어보고 싶어서 복습하던 도중 여러페이지로 쉽게 나눠주는 것이 React-router-dom이라고 해서 다시 복습하게되었다.😩
(블로깅을 자주 못한 내가 잘못이지만 😭 😭)

https://youtu.be/WLdbsl9UwDc (44분정도 되는 강의입니다)
늘 감사한 생활코딩으로 👍🏻

복습 시작

1. React-Router-Dom

https://reactrouter.com/web/guides/quick-start 으로 가면 설치부터 가이드가 잘 작성되어있다.

npm install react-router-dom 를 통해서 설치!

1-1. Router


import {BrowserRouter , Route } from 'react-router-dom'

// 사용하기 위해서는 항상 import를 해야한다!!

BrowerRouter는 전체 페이지에 Route를 사용하기 위한 전체의 묶음으로 보면 이해하기 편한 것 같다.
(최상위 컴포너트를 감싸주는 것)

Route는 URL에 따라 변경되야하는 페이지에 설정해주는 것이다.

function App() {
  
  return (
 	<div>
    		<h1>React Router DOM example</h1>
    			<ul>
    				<li><a href='/'>Home</a></li>
    				<li><a href='/topics'>Topics</a></li>
    				<li><a href='/contact'>Contact</a></li>
    			</ul>
    		<Route path='/'><Home></Home></Route>
    		<Route path='/topics'><Topics></Topics></Route>
    		<Route path='/contact'><Contact></Contact></Route>
  	</div>
  )
}
ReactDom.render(<BrowerRouter><App /></BrowerRouter>, document.getElementById('root'));

원하는 페이지를 Route컴포넌트로 감싸고 경로를 path로 설정해준다.
하지만 여기에 exact 를 사용하지 않으면 정확하게 path가 일치하는 경우에만 표시하게 된다.
(exact가 없다면 /topics를 입력해도 home도 같이 나오게 됨)

1-2. Switch


import {BrowserRouter , Route, Switch } from 'react-router-dom'

// 사용하기 위해서는 항상 import를 해야한다!!

만약 exact를 쓰지않고도 똑같은 효과를 보기위해서는 Switch라는 컴포넌트로 감싸주는 것이다.

Switch로 Route를 감싸게되면 path와 일치하는 컴포넌트가 발견되면 가장 먼저 일치하는 것을 출력해버린다. 그렇기때문에 모든 라우트 앞에 exact가 있어야한다.

1-3. Link


import {BrowserRouter , Route, Switch, Link } from 'react-router-dom'

// 사용하기 위해서는 항상 import를 해야한다!!

Link는 싱글페이지 앱을 만드는데 중요한 페이지가 계속해서 리로드 되지않고 동적으로 가져오는 데이터를 비동기적으로 가져와야한다.
앞에서 사용했던 a태그를 사용하면 항상 리로드가 되지만, Link를 사용하면 리로드 되지않고 페이지가 변화된다.

function App() {
  
  return (
 	<div>
    		<h1>React Router DOM example</h1>
    			<ul>
    				<li><Link to='/'>Home</a></li>
    				<li><Link to='/topics'>Topics</a></li>
    				<li><Link to='/contact'>Contact</a></li>
    			</ul>
    		<Switch>
    			<Route path='/'><Home></Home></Route>
    			<Route path='/topics'><Topics></Topics></Route>
    			<Route path='/contact'><Contact></Contact></Route>
    		</Switch>
  	</div>
  )
}

1-4. HashRouter


import {HashRouter , Route, Switch,Link } from 'react-router-dom'

// 사용하기 위해서는 항상 import를 해야한다!!

HashRouter를 사용하기위해서는 이전에 사용했던 BrowerRouter 대신 사용하면 된다.

주소 뒤에 어떠한 path가 들어와도 root페이지에 있는 html파일을 서비스할수 있으면 BrowerRouter를 사용하면 되지만 그것이 힘들다면 HashRouter를 사용하면 된다.

function App() {
  
  return (
 	<div>
    		<h1>React Router DOM example</h1>
    			<ul>
    				<li><Link to='/'>Home</a></li>
    				<li><Link to='/topics'>Topics</a></li>
    				<li><Link to='/contact'>Contact</a></li>
    			</ul>
    		<Switch>
    			<Route path='/'><Home></Home></Route>
    			<Route path='/topics'><Topics></Topics></Route>
    			<Route path='/contact'><Contact></Contact></Route>
    		</Switch>
  	</div>
  )
}
ReactDom.render(<HashRouter><App /></HashRouter>, document.getElementById('root'));

1-5. NavLink


import {BrowserRouter , Route, Switch, NavLink } from 'react-router-dom'

// 사용하기 위해서는 항상 import를 해야한다!!

(이전의 코드 Link 를 NavLink로 변경해서 사용)

NavLink 는 Link와 유사하지만 기능이 좀 더 추가된 것이다.
NavLink를 사용하게되면 사용자가 어떤페이지를 이용하고 있는지 직관적으로 알 수 있게 해준다.
element를 보게 되면 이용하고 있는 페이지에 active라는 class가 추가 되어있다.

1-6. Nested Routing

Route 안에 Route를 중첩하여 페이지를 계속해서 분할 할 수 있다.

1-7. Parameter

직접 li태그를 작성해서 Link를 만들 수 있지만 페이지 수가 계속해서 늘어난다면 직접 추가하는것은 엄청나게 힘들 것이다. 그래서 객체,배열,반복문을 이용해서 자동으로 그수에 맞게 링크를 만들면 편리하다.


let contents = [
  {id:1 , title:'HTML', descrition :'HTML is ...'},
  {id:2 , title:'JS', descrition :'JS is ...'},
  {id:3 , title:'React', descrition :'React is ...'}
]

// 생성할 함수형 컴포넌트 내에 반복문 작성하기!
let lis = [];
for(let i=0;i<contents.length ;i++){
 lis.push(<li key={contents[i].id}><NavLink to={'/topics'+contenst[i].id}>{contents[i].title}</NavLink></li>)
}

// li를 반복문으로 해당 배열만큼 생성하기!
<ul>
    {lis}
</ul>

useParams 이용하기 (아래 코드 참고)


import {BrowserRouter , Route, Switch, NavLink,useParams } from 'react-router-dom'
// 사용 할때는 항상 import

fuction Topic(){
	let parmas = useParams();
  	//console.log(prams) 
  	// 아래 :topic_id를 키값으로 한 값이 나온다.!! 
  	let topic_id = params.topic.id
    //초기값.
   	let selected_topic={
      title: 'Sorry',
      desciption : 'Not Found'
    };
  
  for(let i=0;i<contents.length;i++){
    if(contents[i] === Number(topic_id)){
      	selected_topic = contents[i]
    	break;
    }
    
    return(
    	<div>
      		<h3>{seleted_topic.title}</h3>
      			{seleted_topic.desciption}
      	</div>
    )
  
}

<Route path='/topics/:topic_id'>
	<Topic></Topic>  
</Route>