1. 리액트 라우터(React router)

라우팅 in 웹애플리케이션 : 사용자가 요청한 URL에  따라 알맞은 페이지를 보여주는 것을 의미한다.

-> 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템이다.

 

리액트에서는 라우팅 시스템을 리액트라우터와 Next.js로 구축할 수 있다.

 

고전적인 웹애플리케이션은 멀티 페이지 애플리케이션이다.

멀티페이지 애플리케이션

멀티페이지 애플리케이션은 사용자가 페이지를 이동할 때 마다 새로운 html를 서버로 부터 전송 받아서 렌더링한다. 이때 css, js등 리소스도 다시 로딩된다.

 

멀티페이지 애플리케이션

하나만 바꾸고 싶어도 서버는 바뀐것을 반영한 새로운 html을 다시 전송한다. 서버의 자원낭비가 심하다

 

서버의 자원을 아끼고 사용자 경험을 좋게 하기 위해 싱글페이지 애플리케이션이 도입되었다.

싱글페이지 애플리케이션

싱글페이지 애플리케이션은 처음에만 html을 받아오고, 이후에 필요한 데이터들을 요청하여 업데이트한다.

 

원래 브라우저 주소창이 변경되면 페이지가 이동되는 데, 리액트 라우터에서는 브라우저의 history api를 사용하여 주소창을 변경만 하고 기존의 html을 유지한다.

 

뒤에서 나오지만 BrowserRouter컴포넌트가 주소창이 변경되어도 페이지가 이동되지 않도록 해준다.

 

프로젝트에 라우터 적용하기

 

프로젝트에 라우터를 적용하지 않으면 라우팅이 되지 않는다. 이걸로 삽질을 많이 했었다.

 

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

  <BrowserRouter>

    <App />

  </BrowserRouter>

);

BrowserRouter 컴포넌트를 react-router-dom에서 가져온 뒤 App컴포넌트를 감싸주었다.

주소창이 변경되어도 페이지가 이동되지 않고 라우팅을 할 수 있게 해주는 기능도 있다.

 

라우트컴포넌트로 경로에 대응되는 페이지컴포넌트 지정해주기

첫 줄에 라우팅을

           라우팅 in 웹애플리케이션 : 사용자가 요청한 URL에  따라 알맞은 페이지를 보여주는 것을 의미한다.

라고 했다.

 

사용자가 요청한 url을 경로라고 생각하고 그 경로에 맞는 페이지를 컴포넌트라고 하면, 사용자가 요청한 경로에 맞는 컴포넌트를 보여주는 것이 라우팅이다.

 

라우팅

사용자가 입력한 경로에 맞는 컴포넌트를 전달한다.

 

형식은 

          <Route path="경로" element={컴포넌트} />

이렇다.

 

예시

       <Route path="/" element={<Home />} />

 

라우팅 예시

/ 경로 입력시 home컴포넌트가 보여진다.

 

a태그와 Link컴포넌트는 뭔 차이?

 

a태그는 클릭하면 페이지를 새로 불로온다. Link컴포넌트는 페이지를 새로 불러오는 것을 막고 주소의 경로만 바꿔준다. 이때 history api를 사용한다.

 

Link와 a

Link태그를 사용하면 경로만 수정하고 그 수정된 경로에 대해 Route에서 지정한 컴포넌트를 보여주면 된당

 

다음포스팅은 URL파라미터랑 쿼리스트링에 대해 포스팅 하겠당.

 

 

참고서적: 리액트를 다루는 기술, 김민준 저, 길벗