28일차 (1) - React SPA

dudu00·2022년 11월 30일
0

codestates

목록 보기
25/25

1. React SPA

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아
브라우저에서 해당하는 부분만 업데이트하는 방식으로
작동하는 웹 애플리케이션이나 웹 사이트를 말합니다.

- 장점

  • 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트하기 때문에
    SPA는 사용자의 행동에 빠르게 반응합니다.
  • 서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과거와 같은 과부하 문제도 현저히 줄일 수 있습니다.
  • 또한 화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공합니다.
  • Youtube, facebook, Gmail, airbnb, Netflix 등 우리가 일상적으로 사용하는 다양한 서비스들이 SPA 방식으로 제작되어 있습니다.

- 단점

  • 브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후
    그 안의 script 요안에 있는 JavaScript 파일을 다시 받아오는 과정을 거칩니다.
  • 자연스럽게 JavaScript 파일이 무거워집니다.
    때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어집니다.

Wireframe

  • Wireframe은 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말합니다. 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다.
    그리고 목업(mockup)은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말합니다.
  • 페이지를 먼저 만들기보다는 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상할 계획입니다.

2. React Router

SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않습니다.

예를 들어 Twittler와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요할 수 있습니다.

또한 이 화면에 따라 "주소"도 달라지겠지요.

이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을
"경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 합니다.

React 자체에는 이 기능이 내장되어 있지 않습니다.
React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용합니다.

React Router 활용

React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있습니다.

라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Routes 와 Route,
그리고 경로를 변경하는 역할을 하는 Link입니다
.

이 컴포넌트들을 사용하기 위해서는 React Router 라이브러리에서 따로 불러와야 합니다. 다음 명령어를 통해 사용할 수 있습니다.

Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용할 수 있습니다.

React Router 사용 환경 세팅

  • React Intro에서 배운 create-react-app으로 React 프로젝트 환경을 만들 수 있습니다.
    그 환경에 React Router 라이브러리도 설치할 수 있죠
    npm 명령어를 통해 간단하게 설치할 수 있습니다.
  • 컴포넌트를 꺼내오기 위한 import 구문도 작성해 보도록 합시다.

예시

profile
성장일지

0개의 댓글