Unit5 회고

React SPA

🔆 SPA 등장 배경

전통적인 웹사이트의 한계😥

페이지 이동 시 매번 페이지 전체를 불러왔던 전통적인 웹사이트
-> 시간이 지나며 사용자와 서비스 사이의 상호작용 증가
-> 중복되는 요소를 매번 불어와 서버와의 불필요한 트래픽 증가
-> 느린 반응성으로 인한 사용자 경험의 저하

SPA의 등장🤓

1990년대 후반 업데이트에 필요한 데이터만 서버에게 전달받아 JavaScript가 이 데이터를 조작하여 HTML 요소를 생성, 화면에 보여주는 방식이 개발 및 사용되기 시작하며 SPA가 등장

🔆 SPA

SPA란 무엇일까❓

• 서버로부터 페이지 갱신에 필요한 데이터만 받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트

• SPA의 장점
  • 사용자와의 interaction에 빠르게 반응
  • 서버 과부화 문제 감소
  • 더 나은 사용자 경험 제공
• SPA의 단점
  • 큰 JavaScript 파일 크기 -> 첫 화면 로딩 시간 증가
  • 좋지 않은 검색 엔진 최적화 -> 이에 대응할 수 있도록 검색 엔진이 발전하는 추세

React Router

❗️React Router의 필요성❗️

• 컴포넌트는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계해야 하는데 이를 도와주는 것이 React Router
• React SPA에서는 경로에 따라 다른 뷰를 보여주는데 라우팅(다른 주소에 따라 다른 뷰를 보여주는 과정)에 따라 다른 뷰를 보여주기 위해 React에서는 React Router라는 라이브러리를 주로 사용

🔆 React Router 활용

React Router 사용 환경 세팅 🥸

• React 프로젝트 환경 설정(create-react-app과 같은,,) 후 그 환경에 npm 명령어로 React Router 라이브러리 설치
  • 형식: npm install react-router-dom@설치하고 싶은 버전
• 컴포넌트를 꺼내오기 위한 import 구문 작성
  • 형식: import {BrowserRouter, Routes, Route, Link} from "react-router-dom"

React의 주요 컴포넌트 🧐

• BrowserRouter
  • 라우터 역할
    • <BrowserRouter> 컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지 새로고침 없이 주소 변경 가능
    • <BrowserRouter>가 상위에 작성되어 있어야 React Router의 컴포넌트 사용 가능
• Routes, Route
  • 경로를 매칭해주는 역할
    • <Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸 그 중 경로가 일치하는 단 하나의 라우터만 렌더링
    • <Route> 컴포넌트는 path 속성을 지정, 해당 path에서 보여줄 컴포넌트 지정
• Link
  • 경로를 연결해주는 역할
    • <Link> 컴포넌트는 페이지 전환 방지 기능이 내장되어 있어 SPA 구현 가능
    • 참고: <a> 요소는 페이지 전환 과정에서 페이지를 불러오므로 새로고침 현상 발생
    • <Link>의 to 속성을 활용하여 <Route>의 path 주소를 연결

React Twittler SPA

css를 입힌 React Twittler SPA👨🏻‍💻

<오늘의 일기>
어제 React를 처음 마주했을 때 너무 충격을 받아서 그런지 오늘 공부는 당황스러움보다는 비교적 즐겁게 임할 수 있었던 것 같다. 처음에는 컴포넌트의 중요성에 대한 내적인 의구심이 들었는데 이번에 React Twittler SPA 과제를 수행하며 깨닫게 되었다. 내가 느낀 가장 중요한 점은 직관적이기 때문에 편리하다는 것이었다. css파일을 다룰 때에도 컴포넌트별로 구분지어 놓으면 시간도 훨씬 단축되고 js파일을 수정할 때도 보기 편하다는 생각이 들었다. 나는 이제 막 react를 접하고 이해하는 수준에 머무르고 있고 아직 컴포넌트를 효율적으로 나누는 작업은 어렵고 취약한 부분인데 이 부분을 잘 발전시킨다면 나중에는 큰 장점으로 활용할 수도 있겠다는 생각이 들었던 유닛이었다.