라우터는 뭘까...
이전에 만들었던 투두리스트는 한개의 컨텐츠를 한개의 페이지에서 보여주기 때문에 라우팅이라는 기술이 필요하지가 않다. 하지만 대부분의 페이지는 여러개의 컨텐츠를 다뤄야하기 때문에 라우팅이라는 것이 필수적이다. 그래서 이런 블로그를 예를 들면 글을 쓰는 페이지, 글을 읽는 페이지, 수정하는 페이지 등 각 기능을 컴포넌트로 나누어 각각의 페이지로 보여준다.
그래서 나는 react-router-dom이라는 라이브러리를 사용하겠다. 이 라이브러리를 사용하면 SPA, 즉 싱글 페이지 에플리케이션을 쉽게 구현할 수가 있다.
SPA란
Single Page Application의 약어로 한개의 페이지에서 모든 것을 해결하는 것이다. 기존의 방식은 메인 페이지에서 다른 페이지를 요청했을때 그때마다 html과 css를 불러오는 방식으로 되어있다. 그래서 트래픽이 몰리거나 불러오는 페이지가 무거울 경우 페이지를 불러오는 방식이 비효율적이다.
하지만 싱글페이지로 구성을 한다면 메인 어플리케이션만 불러온 후 변경이 필요한 부분만 업데이틀 하는 방식으로 이뤄진다. 실제로는 한개의 페이지이지만 사용자는 멀티 페이지를 사용하는 것처럼 느낄 수 있다.
이런 방식으로 얻을 수 있는 장점도 있지만 단점도 존재한다.
사용자가 사용할 때에는 필요한 부분만 업데이트함으로 빠른 속도를 보장하고 그에 따른 데이터와 서버의 이점이 생긴다. 하지만 당장 사용하지 않는 부분까지 초기 렌더링시에 불러와야 하기 때문에 속도와 파일 크기에서 단점이 발생한다.
- 장점
빠른 속도, 효율적인 데이터 캐싱, 서버 리소스 사용 최소화- 단점
초기 로딩 시간 느림, 사용 기록 안남음, 자바스크립트파일의 크기가 커짐
그럼 이제 리액트에서 설치하고 사용하는 방법까지 달려보겠다.
react-router-dom 설치
설치는 매우 간단하다.
npm install react-router-dom
이렇게 하면 리액트에 설치가 된다.
package.json 을 살펴보면 v6버전으로 설치된 것을 확인할 수가 있다.
react-router-dom 사용법
라우터를 사용하기 위해서 미리 해주어야하는 것이 있다.
const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <BrowserRouter> <App /> </BrowserRouter> );
렌더링을 진행할 App.js 을 <BrowserRouter> 로 감싸주어야한다. 그러면 이제 진행하는 프로젝트에서 라우터 기능을 사용할 수 있다. 이제 새로고침 없이 주소를 변경해서 주소에 관련된 정보를 불러올 수 있다.
라우터를 사용하기 전에 컴포넌트를 만들어 주겠다.
Home.js
const Home = () => { return( <div> <h1>홈</h1> <p>기본으로 보여지는 페이지</p> </div> ); }; export default Home;
About.js
const About = () => { return( <div> <h1>소개</h1> <p>리액트 라우터 사용하기</p> </div> ); }; export default About;
이 두개의 컴포넌트를 라우터를 활용해 페이지를 만들어 보겠다.
우선 컴포넌트와 라우터 경로를 연결해 주겠다. 이때는 <Route> 를 통해서 연결해준다.
<Route path=“주소” element={컴포넌트}/>
위와 같은 방법으로 사용한다. 아무렇게 사용하는 것이 아니라 <Routes>안에서 사용해야 한다.
import './App.css'; import Home from './components/Home'; import About from './components/About'; import { Route, Routes } from 'react-router-dom'; function App() { return ( <Routes> <Route path='/' element={<Home/>}/> <Route path='/about' element={<About/>}/> </Routes> ); }; export default App;
위의 코드는 기본 주소인 http://localhost:3000/에서는 Home.js 컴포넌트가 보여지고 주소가 http://localhost:3000/about에서는 About.js가 보여진다.
- Home페이지
- About페이지
주소에 따라 원하는 페이지를 불러올 수 있다. 하지만 직접 주소창에 입력을 하는 것이 아니라 링크 기능을 통해 직접 원하는 주소로 이동이 가능하다.
자바스크립트에서 링크기능은 <a>태그를 사용한다. 하지만 새로고침 기능을 동반하기 때문에 리액트에서는 사용할수 없다. 그래서 라우터에서 지원하는 링크 기능은 <Link>를 사용해서 원하는 주소로 이동한다.
<Link to=“경로”></Link>
이제 About페이지로 이동하는 링크를 만들어 보겠다.
Home.js에 About페이지로 이동하는 링크를 추가해준다.
const Home = () => { return( <div> <h1>홈</h1> <p>기본으로 보여지는 페이지</p> <Link to='/about'>소개</Link> </div> ); };
이제 Home페이지를 확인해보면
링크를 누르면 새로고침 없이 About페이지로 이동하는 것을 확인할 수 있다.
이제 중첩된 라우터를 구현하고 해당 기능을 사용한 layout을 만들어보겠다.
게시글 목록이 나오는 컴포넌트를 구현했다. 해당 링크를 누르면
게시글 내용이 나오는 컴포넌트인데 게시글과 함께 목록을 보여주도록 하겠다.
이럴때에는 <Outlet/>을 사용한다. 해당 기능을 사용하지 않는다면 게시글을 보여주는 컴포넌트에 따로 목록을 보여주는 코드를 작성해야한다. 간단하게 예시를 들면
return ( <div> <h2>게시글 {id}</h2> <PostList/> </div> );
이런 방식으로 목록을 보여주는 코드를 집어넣어야만 했다. 하지만 이 방식은 컴포넌트 갯수도 늘어나고 그에 따른 관리해야할 부분이 많아진다. 그래서 <Outlet/>을 사용해 간편하게 구현하겠다.
우선 App.js 에서 route를 수정해준다.
function App() { return ( <Routes> <Route path='/' element={<Home/>}/> <Route path='/about' element={<About/>}/> <Route path='/posts' element={<Posts/>}> <Route path='/posts/:id' element={<Post/>}/> </Route> </Routes> ); };
위의 코드처럼 라우터를 중첩해서 사용하고 싶은 부분을 중첩해서 코드를 작성한다. 그리고 해당 컴포넌트에서
<div> <Outlet/> <ul> <li> <Link to="/posts/1">게시글 1</Link> </li> <li> <Link to="/posts/2">게시글 2</Link> </li> <li> <Link to="/posts/3">게시글 3</Link> </li> <li> <Link to="/posts/4">게시글 4</Link> </li> </ul> </div>
<Outlet/>을 위에 추가해서 게시글 목록을 보여준다. 그러면 중첩된 라우터가 해당 위치에 나타나게 된다.
그래서 이 기능은 layout을 구현하는데 사용하기 좋다.
const Layout = () => { return ( <div> <header style={{ background: 'lightgray', padding: 16, fontSize: 24 }}> Header </header> <main> <Outlet /> </main> </div> ); };
페이지 상단에 간단한 layout을 만들었다. 레이아웃을 제일 위에 보여주고 아래에 중첩된 라우터를 보여주도록 만든다. 그리고 App.js를 수정해준다.
function App() { return ( <Routes> <Route element={<Layout/>}> <Route path='/' element={<Home/>}/> <Route path='/about' element={<About/>}/> <Route path='/posts' element={<Posts/>}> <Route path='/posts/:id' element={<Post/>}/> </Route> </Route> </Routes> ); };
이제 만든 layout이 모든 라우터에 적용되서 보여진다.
이제 마지막으로 지정되지 않은 주소로 이동했을때 보여지는 Not Found를 만들어 보겠다. Not Found 페이지를 만들어준다.
function NotFound(){ return( <div> <h1>잘못된 웹페이지 입니다!</h1> </div> ); };
그리고 App.js에서 코드를 추가해준다.
function App() { return ( <Routes> <Route element={<Layout/>}> <Route path='/' element={<Home/>}/> <Route path='/about' element={<About/>}/> <Route path='/posts' element={<Posts/>}> <Route path='/posts/:id' element={<Post/>}/> </Route> </Route> <Route path='*' element={<NotFound/>}/> </Routes> ); };
여기서 *는 아무 텍스트나 매칭한다는 것이다. 그래서 주소에 입력된 문자를 확인후 없으면 NotFound페이지를 보여준다.
마무리
이렇게 리액트에서 핵심적으로 사용하는 라우터의 기능을 간단하게 공부해봤다. 추가적인 내용들도 있지만 당장 사용하고 기초적인 기능만 넣어두었다. 다른 프로젝트를 진행하면서 필요한 부분들은 그때그때 추가하고 공부하도록 하겠다. 이제 이후에는 간단한 쇼핑몰 홈페이지를 구현해보겠다.
