[React] 라우팅이란

라우팅이란 무엇일까? 

 

라우팅을 이야기하기전에 먼저 알아야 할 것이 있다. 바로 SPA(single page application)이다. 이것은 말 그대로 서버에서 주는 html이 1개 뿐인 어플리케이션이다. 그러니까 하나의 페이지만 가지고서 그 안에서 다양한 모습을 보여주는 방식인 것이다. 

여기서 궁금증이 생길만한 부분이 있다. 왜 굳이 하나의 페이지만 가지고 이용을 하려고 하는 것일까? 전통적인 웹사이트의 경우, 다양한 페이지들을 로드한다. 로그인 페이지를 예로 들어보자. 만약에 로그인 내용을 입력하다가 잠시 뒤로 가기를 다녀오면, 기존에 적었던 내용들이 다 사라져버린다. 이것은 로그인페이지와 그 전 페이지가 다른 html파일로 이루어져 있기 때문이다. html을 다시 불러오기 때문에, 모든 내용들이 초기화되어버린다. 

그런데 SPA를 이용하는 경우, 뒤로 가기를 눌러도 사실은 하나의 html파일 안에서 다른 컴포넌트만 끼워줄 뿐이다. 그렇기 때문에 기존에 입력했던 데이터들은 html파일에 그대로 남아있게 된다. 결과적으로 사용자는 이전의 데이터를 그대로 사용할 수 있다. 이런 것이 사용성이다. 이것은 사용성의 한 예시이다. 이런 이유로 우리는 SPA를 사용하는 것이다. 

 

이제 진짜 라우팅에 대해서 알아보겠다. 쉽게 말해서 페이지를 이동해서 다니는 것이다. 카페 페이지에 있다가, 블로그 페이지에 넘어가면 그게 라우팅이다. 그러면 html을 한개만 가진 상태에서는 어떻게 페이지를 이동해다닐 수 있을까? 주소창에 있는 데이터를 읽고, 그렇게 읽어온 데이터대로 컴포넌트를 화면에 띄워주는 방식으로 하는 것이다. 이것을 직접 구현하려고하면 쉽지 않을 것이다. 그래서 우리는 잘 만들어져 있는 라우트 패키지를 사용하는 것이다.