6일차 React Router DOM(01~02장) - 생활코딩! React 리액트 프로그래밍

01 수업 소개

02 실습 준비

 

내용을 읽어보니 이 부분이 사실상 리액트가 SPA(Single Page Application) 프레임워크로 기능하기 위한 기본이자 핵심이었다.

전통적인 웹서버는 URI path에 따라 실제 파일을 제공하는 역할을 한다. 예를 들어,

super.smart.ai/intro/

라고 요청을 하면 웹서버의 intro 폴더 밑에 index.htm(.html)의 내용을 응답으로 준다. 그리고,

super.smart.ai/download/portable/ai.zip

이렇게 요청을 한다면 download/portable 폴더 아래의 ai.zip 파일을 제공한다.

 

하지만, SPA는 URI path를 통해 자신이 화면에 보여줄 내용을 결정한다. 즉,

super.smart.ai/intro/

라고 요청을 하면 intro라는 힌트(routing path)를 이용하여 해당 내용을 렌더링해서 보여주는 것이다.

전통적인 웹서버로는 이 것이 불가능하다. 왜냐하면 위 경로는 실제 경로가 아니기 때문에 4xx 에러를 응답하기 때문이다.

그러므로, SPA를 서비스하기 위해서는 웹서버 역시 SPA에 맞는 세팅이 필요하다. 본 교재의 실습 환경에서 사용하는 웹서버 역시 SPA를 위한 특별한 세팅을 사용한다. 이 부분은 나중에 post로 남겨 볼까 한다.(사실 너무 쉬운 내용이라 안 쓸 수도 있다.)

 

어쨌든, 이제 URI 경로를 가지고 보여 줄 내용을 결정하는 구조를 만들려면 5일차까지 배운 내용으로는 사실 너무 힘들다. 직접 URI 경로를 보고 분기를 태워야 하기 때문이다. 리액트는 이 힘든 부분을 Router라는 피처를 이용하여 손쉽게 서비스해 준다.

 

이 React Router DOM 편의 1, 2장은 이 주제를 이해하는 것이 중요하다. 그외에는 교재에서 안내하는 바를 잘 따라가기만 하면 된다.