TIL: 2022-09-29

⚙️ 오늘 배운 주제

React SPA

 

🐹 오늘의 기분

클릭할 때마다 위에 주소가 바뀌는 원리가 궁금했었는데 SPA에서는 path 속성 덕분에 가능하다는 걸 배웠다.

오늘은 과제하다가 문득 이렇게 베이스 코드가 다 주어지고 남은 부분만 채워넣는 것도 어려운데, 다음에 솔로 프로젝트나 진짜 프로젝트는 잘 할 수 있을지 걱정이 됐다. 나중에 정말 멘붕오지 않도록 코드를 직접 써보는 연습을 꾸준히 해야겠다는 생각을 다시금 하게 되었다. 

 

🗝 키워드

SPA, MPA, 라우팅, react-router-dom, BrowserRouter, Routes, Route, Link

 

🗣 스스로에게 설명

SPA, Single Page Application

기존 웹사이트는 페이지 전체를 불러오는 방식으로 작동됐었다.

이는 사용자가 상호작용을 할 때마다 전부 다 새로 불러와야 하기에 많은 트래픽을 발생시킨다. 

또한 웹사이트에 많은 기능이 들어가고 상호작용하는 부분이 많아질수록 화면이 자주 깜빡거리는 등 불편함이 커진다는 단점이 있다. 

 

그래서 등장한 것이 SPA이다. 

SPA에서는 header나 footer같이 중복되는 부분은 새로 불러오지 않는다.

새로 접근하는 페이지만 불러오면 되기 때문에 반응 속도가 빠르고 과부하가 일어나지 않는다는 장점이 있다.

 

하지만 그만큼 자바스크립트 파일이 크기에 첫 화면 로딩 시 오래 걸릴 수도 있다는 것을 염두에 두어야 한다.

그리고 html 파일을 기반으로 탐색하는 검색 엔진에서의 최적화가 어렵다. (SEO, Search Engine Optimization)

html 파일에는 별다른 자료가 있지 않고, JSX로 작성된 js 파일에 정보가 들어가있기 때문이다. 

 

SPA의 대표적인 사이트로는 넷플릭스, 페이스북, 트위터 등이 있다.

What is Single Page Application? 3 Examples, Pros and Cons

 

컴포넌트

작업에 들어가기 전에 와이어프레임으로 컴포넌트를 어떻게 만들지 구상하는 것이 중요하다. 

단순 구현만을 생각하면 안 되고, 앱 안의 데이터를 컴포넌트끼리 유기적으로 주고받을 수 있도록 설계해야 한다.

React router를 이용하면 컴포넌트끼리의 유기적인 연결이 가능해진다. 

 

React Router

라우팅은 주소에 따라 각기 다른 뷰를 보여주는 과정이다.

트위터

위 gif에서 트위터 사이드바의 아이콘을 클릭할 때마다 주소창이 바뀌는 것을 볼 수 있다.

트위터는 SPA이기 때문에 아이콘을 클릭한다고 해서 화면 전체가 다시 렌더링되지 않는다. (화면이 깜빡거리지 않는 이유)

리액트에서 이런 것을 구현하려면 프로젝트 디렉토리에서 npm install react-router-dom@버전을 입력하면 된다.

리액트 라우터에 있는 주요 컴포넌트는 아래와 같다. 

• <BrowserRouter> : 라우터 역할, 큰형님으로 이해하면 쉬움. 가장 바깥에 위치해야 함.
• <Routes> : 경로 매칭 / 여러 Route 컴포넌트를 감쌈. 경로가 일치하는 단 하나의 라우터만 렌더링
• <Route> : 경로 매칭 / path 속성으로 주소 지정. element 속성으로 어떤 컴포넌트 보여줄지 결정
• <Link> : 경로 변경 / 링크를 적용할 컴포넌트에 쓰는 태그. to 속성으로 path와 같은 주소를 부여하면 클릭했을 때 그 주소로 이동한다.

js 파일에서 아까 install했던 리액트 라우터를 사용하려면 import로 불러와야 한다.

파일 맨 위에 이렇게 작성해주면 된다.

import { BrowserRouter, Routes, Route, Link } from “react-router-dom”;

 

BrowserRouter는 App.js에서 다른 태그를 최상위에서 감싸고 있어야 하지만,

이렇게 index.js에서 <App /> 컴포넌트를 감싸도록 써줄 수도 있다. (당연히 import로 BrowserRouter를 불러와야 한다.)

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

 

Routes와 Route 사용하기

위의 트위터 주소를 참고해 작성해보았다. 당연히 실제 트위터에는 이렇게 구현되어있지 않을 것이다. 

Routes와 Route가 이렇게 쓰인다는 걸 보여주기 위한 예시이다.

<Routes>
  <Route path="/home" element={<Home />}></Route>
  <Route path="/explore" element={<Explore />}></Route>
  <Route path="/notifications" element={<Notifications />}></Route>
  <Route path="/messages" element={<Messages />}></Route>
  <Route path="/bookmarks" element={<Bookmarks />}></Route>
</Routes>

 

Link 사용하기

(편의상 아이콘은 생략했다)

사이드바에서 각 요소를 누르면 to 속성에서 위의 Route의 path와 같은 주소값을 가진 컴포넌트가 렌더링된다. 

<Link to="/home">홈</Link>
<Link to="/explore">탐색하기</Link>
<Link to="/notifications">알림</Link>
<Link to="/messages">쪽지</Link>
<Link to="/bookmarks">북마크</Link>

 

❓ 막히는 or 막혔던 부분

Routes의 위치가 헷갈렸다. 처음에 맨 밑에 넣었다가 엉뚱한 위치에서 컴포넌트가 렌더링되고 있는 걸 발견해서 설마 위치 때문인가 하고 옮겼더니 정상적으로 작동했다.

오타 때문에 참 많은 오류를 만났었다..ㅎ 이건 숙명인 듯 ㅠㅠ

 

🔍 공부가 더 필요한 부분

Advanced에 useNavigate가 있었는데 해보지 못했다.

레퍼런스 코드 보면서 실습해봐야겠다.