28일차 (React SPA)

오늘은 React SPA를 배웠다. 이전 같은 경우에는 다른 내용을 출력하려면 다른 HTML을 만들어서 출력했어야 했다.  HTML에서 내가 바꾸고 싶은 내용만 바꾼다는 것이 신기했다. 이벤트 핸들러를 사용하지 않고도 다른 것에 변화를 줄 수 있다는 것도 알게 되었다.

 

React SPA

  페이지를 바꿀 때 원래는 매번 페이지 전체를 불러와야 했다. 하지만 매번 페이지를 불러오면서 사용자와 서비스 간 상호작용이 많아지게 되면 중복되는 요소들 때문에 불필요한 트래픽이 발생한다. 그로 인해 사용자 입장에서는 서비스의 느린 반응을 경험하게 된다.(좋지 않은 사용자 경험(UX)을 제공하게 된다)

 

  SPA를 사용하게 되면 중복되는 부분은 불러오지 않고 바꾸려는 부분만 불러오기 때문에 불필요한 트래픽이 감소되면서 위의 단점을 보완할 수 있다.

즉, SPA는 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이라고 할 수 있다.(화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트)

 

  하지만 이러한 장점만 있는 것은 아니다. 일단 첫 화면의 로딩 시간이 길어진다. 불러올 HTML의 문서의 개수는 줄었지만 JS의 코드가 거의 모든 일을 하기 때문에 JS파일이 무거워질 수밖에 없다. JS의 파일이 무거워지게 되면 JS의 파일을 읽는 시간이 길어져 첫 화면의 로딩 시간이 길어지게 된다. 

  또한 검색 엔진에 대한 최적화가 좋지 않다. 검색 엔진에 쓰이는 로봇들은 자료를 수집할 때에 웹페이지의 URL뿐만 아니라 HTML의 태그나 링크 등을 분석하는데 SPA의 경우 HTML이 거의 비어있는 상태이기 때문에 검색 로봇이 충분한 자료수집을 못하게 된다.  그래서 검색엔진 최적화에 대한 대응책을 따로 마련해야 하기 때문에 개발의 복잡도가 증가한다. 하지만 SPA에서 검색엔진 최적화에 대응할 수 있도록 발전하고 있어서 이 단점은 사라지고 있는 추세이다.

 

WireFrame

  wireframe은 디자인에 들어가기 전에 선을 이용해 윤곽선을 잡는것을 말한다. 이 작업을 통해 개발자는 사이트의 대략적인 디자인과 기능에 대한 이해를 할 수 있다.

  mockup은 데스크톱, 스마트폰의 프레임을 씌워 직관적으로 이해하기 쉽게 디자인한 것을 말한다.

=> 페이지를 먼저 만들기보다는 어떤 컴포넌트를 만들과 이들을 조합할 지부터 계획해야 한다. 또한 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트끼리 유기적으로 주고받을 수 있도록 설계하여야 한다.

 

React Router

React 자체에는 주소에 따라 다른 화면을 보여주는 라우팅 기능이 내장되어 있지 않다. 그래서 React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 사용한다. SPA는 하나의 페이지를 보여주고 있지만 화면을 여러 개를 가지고 있다. 화면을 바꾸어주려면 주소가 필요하고 주소를 변경함에 따라 다른 화면을 보여주는 것을 라우팅이라고 하며, '경로에 따라 변경한다.'라는 의미를 가지고 있다.

 

React Router의 주요 컴포넌트

• BrowserRouter : History API를 이용하여 UI를 URL과 동기화된 상태를 유지해주는 역할
• Routes : Route로 생성된 자식 컴포넌트 중에서 매칭되는 첫 번째 Route를 랜더링
• Route : 경로를 지정해주는 역할
• Link : 사용자가 원하는 경로로 이동시켜주는 역할