React-router-dom 라이브러리가 필요한 이유

React-router-dom 라이브러리가 필요한이유

이 라이브러리가 왜 필요한지 설명전에 우리에게 익숙한 형식의 웹 애플리케이션을 살펴 보겠습니다.

우리에게 익숙한 형식의 라우팅은 다음과 같습니다.

브라우저에 "어떤사이트.com"을 입력하고 들어가면 index.html 이 렌더링 됩니다.

index.html은 어디서 온것일까요??

바로 "어떤 사이트" 의 서버에서 온것입니다.

어떤사이트 주소를 렌더링 할 html 과 여타 다른 파일들을 리턴한 것입니다. 

마찬가지로 어떤사이트.com/login 을 입력하고 들어가면 이 요청은 GET 요청이 되어 해당 사이트의 서버에 전달됩니다.

서버는 로그인 경로를 보고 login.html 페이지를 반환합니다. 브라우저는 이런 라우팅을

서버-사이트 라우팅 이라고 합니다.

Server-Side Routing

 스탠더드 라우팅 방법으로 우리에게 가장 익숙한 라우팅 방법이기도 합니다.

우리가 사용하는 라우팅은 서버-사이트 라우팅이 아닙니다. 

이미 알고 있듯이 우리 애플리케이션은 한 페이지에서만 동작하는 싱글 페이지 애플리케이션으로 사용하는

라우팅은 클라이언트-사이드 라우팅입니다.

이름에서 짐작할 수 있듯이 클라이언트- 사이드 라우팅은 서버로 어떤 요청도 보내지 않습니다.

모든 라우팅은 클라이언트 코드, 즉 자바스크립트가 해결합니다.

우리의 경우 그 자바스크립트가 바로 리액트입니다.

클라이언트 - 사이드 라우팅을 그림으로 그린것입니다.

우리 프로그램도 로컬3000포트에 접속하면 프론트엔드 서버가 리액트 애플리케이션을 리턴합니다. 

이 애플리케이션은 앞으로 브라우저에서 필요한 모든 리소스를 가지고 있습니다.

리소스는 html, javaScript, css 파일 등을 의미합니다.

다시 말해, 

처음 로컬에 접속하면 이후에 필요한 모든 페이지와 라우팅 로직 등 우리가 프론트엔드에 구현한
모든 로직이 리턴된다.

그런다음 로컬3000 포트의 로그인을 브라우저 주소창에 입력하면 리액트 라우터가 이를 가로챕니다.

이 리액트 라우터의 로직은 URL을 파싱한 후 login 템플릿을 렌더링합니다.

login페이지를 가져오는 두 번쨰 요청은 인터넷이 끊기더라도 실행됩니다.

모든것은 클라이언트 사이드, 즉 브라우저 내부에서 실행되고 서버로 아무것도 요청하지 않기 때문입니다.

사이드 라우팅은 보편적으로 브라우저가 동작하는 방식이 다릅니다. 

그래서 라이브러리가 필요합니다. 어떤 자바스크립트 프레임워크를 사용하느냐에 따라

개발자의 기호에 따라 라이브러리는 달라질 수 있습니다.

우리 프로젝트에서는 클라이언트-사이드 라우팅 라이브러리로 react-router-dom을 사용합니다.