2. Routes

React Router 사용법

설치

npm i react-router-dom

사용하기

Routes 안에 Route를 넣어서 path와 컴포넌트를 지정

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
</Routes>

컴포넌트를 BrowserRouter로 감싼 뒤 사용해줘야함

function main() {
  const element = document.getElementById('root');

  if (!element) {
    return;
  }

  const root = ReactDOM.createRoot(element);

  root.render((
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
  ));
}

테스트

테스트에서 사용시에는 BrowerRouter 대신에 MemoryRouter를 사용

describe('App', () => {
  context('when the current path is "/"', () => {
    it('renders the homepage', () => {
      render(
        <MemoryRouter initialEntries={['/']}>
          <App />
        </MemoryRouter>,
      );
      screen.getByText(/Welcome/);
    });
  });
});

라우터

• 네트워크에서는 컴퓨터 네트워크 간에 데이터 패킷을 전송하는 중계 장치 의미

• 위치에 대한 최적의 경로를 찾아 데이터를 전달하는 것

• 라우터라는 개념은 네트워크 상에서 통신데이터를 보낼 경로를 선택하는 과정을 의미하지만 SPA 환경에서는 요청에 따라 알맞은 페이지를 반환해주는 과정으로 이해할 수 있음

• 리액트에는 주소에 따라 다른 뷰를 보여주는 기능이 내장되어 있지 않아 직접 브라우저 API를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 함

React Router

• 서버의 도움없이 클라이언트 사이드 라우팅을 가능하게 하는 라이브러리

Browser Router

• HTML5를 지원하는 브라우저의 주소를 감지

• 브라우저의 History API를 통해 현재 위치의 URL 저장

• 앱에서 단 하나의 라우터만 사용가능

Route

• URL과 컴포넌트, 데이터 로딩, 데이터 뮤테이션을 연결

• 중첩 라우트를 통해 복잡한 어플리케이션 레이아웃과 데이터 종속성을 단순하고 선언적으로 만들 수 있음

• path를 통해 URL을 분기할 수 있고, 중첩해서 사용 가능

Memory Router

• 배열에 주소를 저장

• 외부 자원과 연결되지 않음

• 테스트 목적으로 history stack을 조작할때 사용할 수 있음