백엔드에서의 라우트지정, 프론트엔드에서의 라우트 지정

리액트 라우터와 Express 라우팅의 기본적인 아이디어는 비슷하지만, 두 가지 접근법은 목적과 사용법에서 다른 차이가 있습니다.

​

리액트 라우터는 싱글 페이지 애플리케이션(Single Page Application, SPA)의 라우팅을 다루기 위한 라이브러리입니다. SPA는 한 개의 HTML 파일과 JavaScript 코드로 구성되며, 브라우저에서 페이지를 새로고침하지 않고도 동적으로 콘텐츠를 업데이트할 수 있습니다. 리액트 라우터는 브라우저의 주소 창을 감시하고, URL 경로에 따라 애플리케이션의 다른 부분을 렌더링합니다.

​

반면에 Express는 서버 사이드 웹 프레임워크로서, 클라이언트가 서버로 HTTP 요청을 보내면, 서버는 그에 따른 응답을 반환합니다. 이 때, 요청의 URL 경로를 기반으로 적절한 처리를 하는데, 이를 라우팅이라고 합니다. Express에서는 요청을 처리하기 위해 라우터를 사용하며, 이를 통해 URL 경로에 따라 적절한 응답을 반환할 수 있습니다.

​

따라서, Express에서 HTML 파일을 보내주는 것은 클라이언트가 GET 요청을 보내면 서버에서 해당 URL 경로에 맞는 HTML 파일을 응답으로 보내는 것입니다. 이 경우, 서버 측에서 라우팅을 처리하고 HTML 파일을 반환합니다. 이와 달리, 리액트 라우터는 클라이언트 측에서 라우팅을 처리하며, 브라우저에서 자바스크립트 코드를 실행하여 렌더링합니다.

​

프론트에 리액트, 백에 익스프레스를 쓰는 경우, 일반적으로는 Express를 통해 RESTful API를 제공하고, 클라이언트 측에서는 리액트를 사용하여 SPA를 개발합니다. 이 경우, 리액트 라우터를 사용하여 클라이언트 측에서 라우팅을 처리하고, 필요한 경우에 서버에서 데이터를 가져와 렌더링합니다. 또한, Express에서는 클라이언트에서 보낸 요청에 대한 응답으로 JSON 데이터를 반환할 수도 있습니다.

Express에서 html을 보내주는건 말 그대로 서버에서 해당 주소로 파일을 라우팅하는 행위입니다. 이게 보통 생각하는 라우팅이죠.

​

리액트 라우터는 실제 서버 라우팅과는 관계없습니다. 브라우저 API를 이용해서 주소 정보응 기반으로 라우팅이 되는 것 처럼 꾸미는 겁니다.

​

리액트에서 서버를 쓰는 경우, html을 직접 전달하진 않고, JSON형태로 값을 반환하는 API를 만들어서 해당 API에 요청을 보내 가져온 데이터만 활용합니다.