Routing이란?

공식 문서에 따르면 Routing은 다음과 같다.

Routing은 웹 URL을 웹 어플리케이션 내의 특정 리소스에 바인딩 해주는 것이다. React에서 Routing은 URL을 Component와 바인딩해준다.
즉, Routing은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다.

React Router?

React에서는 기본적으로 Routing을 공식적으로 지원하지 않는다.
따라서, Third-party를 사용해야 한다. React Router가 이 중 하나이다.
(다른 선택지로 Next.js도 있는데, 옛 React Router를 사용한 경험을 되살리고자..)

왜 사용하려고?

네이버, 구글같은 대형 포털 사이트만 보더라도 메인 화면에 검색 기능을 제공한다.
사용자가 어떤 키워드로 검색을 하면, 그 키워드에 맞춰서 검색 결과를 페이지에 뿌려준다. 이때 보이는 화면은 메인 화면과는 다름을 알 수 있다.

Routing이 왜 필요하게 됐냐면, 현재 진행중인 토이 프로젝트에 규모를 좀 더해보고자, 키워드를 검색하면 그 키워드를 포함한 영화 목록을 뿌려주는 페이지를 구현하려고 했다.

React Router의 Link와 비슷한 a 태그를 이용해도 비스무리하게 구현할 수 있지만,,, 일단 뭔가 있어보이고 싶었다! 그래도 둘이 뭐가 다른지는 알고 있으면 좋을 것 같아, 무엇이 다른고 찾아보니..

a태그 : 브라우저의 주소를 이동하며 페이지 자체를 새로고침 한다.
Link : 브라우저의 주소만 바꿀 뿐 새로고침은 하지 않는다.

페이지 새로고침이 뭐 어때서? 라고 생각할 수 있다!
하지만 이건 매우 중요하다.

a 태그로 이동하면...

a 태그의 href로 이동하면 상태 값을 잃고 속도가 저하된다.
리액트는 단일 URL을 가지고 SPA로 사이트를 표현하는 프레임워크로 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 리소스를 로드하는 애플리케이션이다.

그렇기 때문에, 페이지를 새로 불러오게 되면 앱이 지니고 있는 state가 초기화되고, 렌더링 된 컴포넌트도 모두 사라지고 새로 렌더링을 해야 한다. 상태 유지와 속도의 효율성을 위해 새로운 페이지를 불러오는 대신 업데이트하는 방식으로 구현해야 한다.

Link 태그로 이동하면...

Link 컴포넌트는 HTML5 History API를 사용하여 브라우저의 주소만 바꿀 뿐, 페이지를 새로 불러오지는 않는다.

React에서는 Link 사용을 권장한다고 한다...

적용하기

일단 컴포넌트 트리의 구조를 설명하자면,

• Home.js : 메인 화면
• SearchResult.js : 검색 결과를 뿌려주는 화면
• App.js : Routing을 담당하는 컴포넌트
  으로 이루어져 있다.

Home.js

const Home = props => {
	return (...);
};

SearchResult.js

const SearchResult = props => {
  	return (...);
};

App.js

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/search/" element={<SearchResult />} />
      </Routes>
    </BrowserRouter>
  );
};

간략하게 보자면, BrowserRouter를 최상위에 선언하고 Routes를 그 다음으로, 그리고 Route를 선언한다.
여기서 Route가 어느 경로로 가면 어느 컴포넌트를 보여주는지를 의미한다.

Route 태그 구조

<Route path="원하는 경로" element={<컴포넌트 이름 />} />

path에는 원하는 경로를 설정해주면 된다.
element는 어떤 컴포넌트를 화면에 뿌려줄지를 의미한다.