React SPA
전통적으로 한 페이지에서 다른 페이지로 넘어갈 때 MPA(Multiple Page Application) 방식을 사용했다. 다른 페이지로 넘어갈 때 HTML 문서 전체를 새로 불러오는 방식이었다. MPA는 사용자와 서비스 사이의 상호작용이 증가하면 트래픽이 증가하고, 사용자 경험 저하를 야기했다.
SPA는 Single Page Application의 줄임말로 한 페이지에서 다른 페이지로 넘어갈 때 서버로부터 완전히 새로운 페이지를 불러오는 것이 아닌, 갱신에 필요한 데이터만 받아와 이 데이터를 Js가 동적으로 HTML 요소를 생성해서 현재 페이지를 업데이트 함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트를 말한다.
(ex: 유튜브, 페이스북, 지메일, 에어비앤비, 넷플릭스 등이 SPA방식을 사용)
SPA의 장점
- 사용자와 상호작용에 빠르게 반응
- 서버 과부하 문제 줄어듦
- 더 나은 사용자 경험 제공
SPA의 단점
- Js파일의 크기가 커짐(대부분의 코드가 HTML이 아닌 JS 파일에 들어있음)
=> 첫 화면 로딩 시간이 길어짐. - SEO(검색엔진 최적화)가 좋지 않음.
=> 검색 로봇이 웹 페이지 정보, 자료를 수집할 때 웹 페이지에서 URL, HTML문서 내 태그, 링크 등을 분석하는데 SPA는 HTML파일이 거의 비어있어 로봇이 충분한 자료를 수집하지 못함.
=> 검색 노출 중요한 웹 어플리케이션은 검색 엔진 최적화 대응 필요. (개발 복잡도 증가)
(But 최근에는 SPA에서도 검색 엔진 최적화 대응할 수 있게 발전하는 추세)
React Router
-
Routing(라우팅) : 다른 주소에 따라 다른 뷰를 보여주는 과정.
-
React SPA에서 라우팅하기 위해 가장 많이 사용하는 라이브러리 'React Router'
npm install react-router-dom@^6.3.0 //리액트 라우터 설치 - 필요한 모듈 불러오는 import 사용해서 아래의 컴포넌트들을 불러올 수 있다.
import {BrowserRouter, Routes, Route, Link} from "react-router-dom"React Router 주요 컴포넌트
- BrowserRouter : 라우터 역할
=> 가장 상위에 작성되어야 페이지를 새로고침 하지 않고도 주소 변경할 수 있는 역할 해줌. (BrowserRouter는 HTML5의 History API 통해 위의 역할 해줌.)
- Routers, Route : 경로 매칭
=> Routers는 여러 Route를 감싸 경로가 일치하는 단 하나의 라우트만 렌더링 시켜주는 역할.
=> Route path="" element={}와 같은 형식으로 작성.
- Link : 경로 변경
=> 경로를 연결해주는 역할을 하고 a 태그처럼 작동하나, a 태그는 페이지를 전환할 때 새로고침 현상이 일어나는데 Link는 안 일어남.
=> Link to="Route 컴포넌트에 설정해준 path주소" 형식으로 작성.
+@ Route 경로를 path='*'로 설정하면 정의하지 않은 경로를 핸들링할 수 있다.
(직접 구상한 404페이지 등으로 연결해줄 수 있음)
오늘의 과제
어제 하던 twittler 과제를 이어서 하는 느낌이었는데, 오늘은 좌측에 있는 사이드바 버튼을 누르면 다른 페이지로 이동하도록 만들어야 했다.
-
다른 js 페이지에 있는 컴포넌트는 import를 해와야 사용할 수 있었다.
-
라우터 주소를 App.js에서 BrowserRouter, Routers, Route 등을 통해서 설정해주고 난 뒤에 Link는 Sidebar.js 문서에서 불러올 수 있었다.
- 베어 미니멈 기능을 구현하고 뭔가 더 추가해볼까 하다가 트위터에 있는 것처럼 fontawesome에서 깃펜 모양의 아이콘을 받아와서 사이드바에 넣어야겠다고 생각했다. 근데 i className = "fa-solid fa-feather"을 아무리 적용해봐도 아이콘이 나타나지 않았다...
=> 구글링해보니 fontawesome의 버전 문제일 수도 있다고 해서 HTML 파일에 들어있는 키트 주소를 내 폰트 어썸 키트 주소로 바꿨더니 문제가 해결되었다!
=> 다른 동기분이 알려주시길... 포크해온 HTML 안에 있는 키트 주소가 폰트 어썸 버전 5를 따라갔다고 한다. 폰트어썸 버전 6이 비교적 최신이라 포크해온 파일에는 갱신이 되지 않았던 것 같다. 내 키트 주소를 바꾸는 게 아니라 폰트어썸 5에서 아이콘을 찾아서 추가하면 이미지도 나타난다고 함!
- useNavigator를 직접 구현하지는 못했지만 설명을 들으면서 알게된 점? useNavigator를 통해서 단순히 뒤로 가기, 앞으로 가기 등만을 구현하는 게 아니라 아래 예시와 같이 이벤트를 핸들링하는 것도 가능하다고 한다.
(Link와 다른 점 : useNavigate는 Link와 달리 함수 호출을 통해 특정 조건에 따라 페이지를 이동할 수 있다.)
import {useNavigate} from "react-router-dom";
function MypageForm(){
let navigate = useNavigate();
function handelClick(){
if(로그인한 상태){
navigate('/mypage');
}else{
navigate('/login');
}
}
return <button onClick={handleClick}>마이페이지</button>;- JSX에서는 예외적으로 화살표 함수를 사용할 때 중괄호 속 리턴문 한 줄이 아니더라도 아래처럼 중괄호를 생략할 수 있다고 한다. (예외 많은 JSX녀석...)
{filteredTweets.map(tweet =>
<li className="tweet" key={tweet.id}>
<div claaName="tweet__profile">
<img src ={filteredTweets[0].picture}/>
</div>
//중략
)} 