리액트 | 라우터

SPA란? (single page application)

하나의 페이지로 만들어진 어플리케이션을 의미합니다.

SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 이용해서 처리합니다.

브라우저에서 사용자가 상호작용 하면 필요한 부분만 업데이트 해서 처리합니다.

멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됩니다.

 

SPA의 단점

• 앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래걸리게 됩니다.
• 브라우저에서 렌더링이 완료되기 까지 비어있는 화면이 나오게 됩니다.
• 그래서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리합니다. (웹팩 설정 필요)

 

라우팅이란?

• 브라우저의 주소상태에 따라 다양한 화면을 보여주도록 처리하는 것을 라우팅이라고 합니다.

 

사용이유

• create-react-app로 프로젝트를 생성하게 되면 기본적으로  SPA에 CSR(클라이언트 렌더링) 입니다.
• 하나의 페이지만 사용하게 되는 것입니다.
• SPA이지만 라우터를 활용해서 사용자로 하여금 여러 페이지가 존재하는 것처럼 느껴지게 할 수 있습니다.

 

라우터 설치하고 프로젝트 시작하기

1. 라우터를 적용할 프로젝트 생성

npm create react-app 프로젝트명

생성한 프로젝트의 경로에서 

2. 라우터 설치

npm add react-router-dom

3. 프로젝트 시작

npm start

 

 

라우터 적용하기

1.  라우터를 사용할때는 index.js에서 App컴포넌트를 <BrowserRouter>로 감싸줍니다.
2.  페이지 컴포넌트 만들기
3.  App컴포넌트에서 <Routes>를 사용해서 분기하기
4.  주소요청을 통해 확인하기

index.js

....
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>

);

App.js

• /요청은 Home컴포넌트가 나타납니다
• /user요청은 User컴포넌트가 나타납니다.
• /info요청은 Info컴포넌트가 나타납니다.

function App() {

  return (
    <Routes>
        <Route path='/' element={<Home/>}/>
        <Route path='/user' element={<User/>}/>
        <Route path='/info' element={<Info/>}/>
    </Routes>
  );
}

export default App;

 

Link를 이용해서 다른페이지로 이동하기

• link태그는 화면에서 a태그로 생성됩니다.
• to 속성에는 연결할 요청주소를 적습니다.
• 어느 컴포넌트든 사용할 수 있습니다.

/로 연결되는 Home

//.....
return (
	<ul>
		<li><Link to='/user'>회원페이지</Link></li>
	</ul>
)

URL파라미터 or 쿼리스트링

같은 컴포넌트라도 전달되는 데이터에 따라서 다른 내용을 보여줘야 하는 경우가 있습니다.

EX) 글 상세

이 때 URL주소의 매개변수를 전달 할 수 있고, 컴포넌트는 그 값을 받아서 사용 할 수 있습니다.

 

1. 쿼리스트링

• 쿼리스트링은 주소의 ? 뒤에 키=값 의 형태로 넘어가는 매개값입니다.
• 별도의 라우터 설정은 하지 않아도 됩니다.
• 컴포넌트에서는 useLocation() 훅 or useSearchParams() 훅을 사용 해서 쿼리스트링을 받을 수 있습니다.

/경로?키=값&키=값

링크에서는...

//.....
return (
	<ul>
		<li><Link to='/user?id=aa123&key=1'>회원페이지(쿼리파람)</Link></li>
	</ul>
)

컴포넌트에서는....

 

 useLocation() 훅

const location = useLocation();