[TIL] Day28 #SPA #React-Router

[TIL] Day28
[SEB FE] Day28

☑️ React SPA

전통적인 웹사이트는 페이지 이동 시 매번 HTML 파일로 된 ‘페이지 전체'를 불러와야만 했음 → ‘깜빡인다’
→ 사용자/서비스 사이의 상호작용 증가로 트래픽 증가와 사용자 경험 저하 야기
→ 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JS가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작 ⇒ SPA

➰ SPA(Single Page Application)
: 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재 페이지를 업데이트함으로써 사용자와 소통하는 웹 애플리케이션 / 웹 사이트

✋ SPA는 JavaScript에 의존적
✋SPA는 하나의 웹 문서가 아니라, 하나의 웹 애플리케이션을 개발할 수 있음
✋ 컴포넌트 기반 개발 방법 - 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상

📎 SPA 장점

• 필요한 부분의 데이터만 받아서 화면을 업데이트함으로 사용자와의 Interaction에 빠르게 반응
• 서버에선 요청받은 데이터만 넘겨주면 되므로 서버 과부하 문제가 현저하게 감소
• 전체 페이지를 렌더링할 필요가 없기 때문에 더 나은 유저경험 제공

📎 SPA 단점

• JS 파일 크기가 큼 → 첫 화면 로딩 시간이 길어짐
• 검색 엔진 최적화(SEO; 검색엔진이 자료 수집하기 좋도록 웹 페이지를 구성하는 것)가 좋지 않음
  • SPA는 HTML이 거의 비어있기 때문에 검색 로봇이 충분한 자료를 수집하지 못하기 때문

➰ Wireframe
: 웹페이지의 레이아웃과 UI 요소 등에 대한 뼈대

➰ Mockup
: 데모 시연, 평가를 위한 최소한의 기능만 담은 모형

---

☑️ React Router

➰ Routing(라우팅)
: 다른 주소에 따라 다른 뷰를 보여주는 과정 ⇒ ‘경로에 따라 변경한다’라는 의미

📎 React Router 주요 컴포넌트

• BrowseRouter: 라우터 역할(router)
  • 페이지를 새로고침하지 않고도 주소 변경 가능
  • 상위에 작성
• Routes: 경로 매칭(route matchers)
  • 여러 <Route> 컴포넌트를 감싸서 그 중 경로가 일치하는 하나의 라우터만 렌더링
  • <Routes>를 사용하지 않으면 매칭되는 모든 요소 렌더링
• Route: 경로 매칭(route matchers)
  • path 속성을 지정해서 해당 path에서 어떤 컴포넌트를 보여줄지 정함
  • element 속성으로 연결하고자 하는 컴포넌트 지정
  • <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동
• Link: 경로 변경(route changers) ⇒ 경로 연결
  🤷‍♀️ Q: <a> 요소가 아닌 <Link>를 굳이 사용하는 이유는?
       A: <a> 요소는 페이지 전환 과정에서 페이지를 불러오기 때문에 처음부터 렌더링시킴 ⇒ 새로고침 현상
            But, <Link> 컴포넌트는 페이지 전환 방지 기능이 내장되어 있어 SPA 구현 가능
  
  ✋ 지정된 주소 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있음
  ⇒ path=”*” (미지정 주소 접근시 이 속성이 설정되어 있는 컴포넌트를 보여줌)
  

// react-router 라이브러리 install
// @version은 선택사항
npm install react-router-dom@^6.3.0

// import는 필요한 모듈을 불러오는 역할
// 구조 분해 할당 문법과 비슷하게 이용 - {}
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

// App.js에서 기본적인 react-router 사용할 때
function App() {
	return(
		<BrowserRouter>
			<div>
				<nav>
					<ul>
						<li>
							<Link to="/">Home</Link>
						</li>
						<li>
							<Link to="/mypage">MyPage</Link>
						</li>
					</ul>
				</nav>

				<Routes>
					<Route path="/" element={<Home/>} />
					<Route path="/mypage" element={<MyPage/>} />
                </Routes>
			</div>
		</BrowserRouter>
	)
}

function Home() {
	return <h1>Home</h1>;
}

function MyPage() {
	return <h1>MyPage</h1>;
}

export default App;

// index.js에 <BrowserRouter>를 넣어서 활용 또한 가능
// React Version 18

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

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

---

☑️ [Pair] React Twittler SPA

어제 진행했던 React Twittler Intro 에서 기능 develop

// MyPage.js

const MyPage = () => {
	
	// username이 'kimcoding'인 데이터만 골라내기 -> filter 메서드 사용
  const filteredTweets = dummyTweets.filter(
    (el) => el.username === "kimcoding"
  );

  return (
    <section className="myInfo">
      <ul className="tweets__mypage">
		{/* kimcoding인 데이터가 하나가 아닐 수 있기 때문에 
            map으로 kimcoding에 해당하는 데이터 모조리 가져와서 보여주기 */}
        {filteredTweets.map((tweet) => {
          return (
            <li className="tweet" id={tweet.id}>
              <div className="tweet__profile">
                <img src={tweet.picture} />
              </div>
              <div className="tweet__content">
                <div className="tweet__userInfo">
                  <span className="tweet__username">{tweet.username}</span>
                </div>
                <div className="tweet__message">{tweet.content}</div>
              </div>
            </li>
          );
        })}
      </ul>
      <Footer />
    </section>
  );
};

export default MyPage;

➰ useNavigate()
: 특정 행동을 했을 때 해당 주소로 이동시켜주는 역할
✋ useNavigate는 Link와 달리 함수 호출을 통해 특정 조건에 따라 페이지 이동 가능

import React from "react";
import { useNavigate } from "react-router-dom";

function Goback() {
  const navigate = useNavigate();

  return (
		<div>
	    <button onClick={() => {navigate(-1)}}>
	      <i className="far fa fa-arrow-left"></i>
	    </button>
	    <button onClick={() => {navigate(1)}}>
	      <i className="far fa fa-arrow-right"></i>
	    </button>
		</div>
  );
}

export default Goback;

🫠 개념 정리를 따로 안 해둔 상태에서 거의 1년만에 React 기초부터 다시 하려니까 기억이 가물가물 거의 백지 상태다,, JS를 어느정도 깊이 공부한 다음에 React를 공부했었어야 했는데 JS 개념도 잘 모르면서 React를 공부하려고 했으니 코드도 주먹구식으로 따라 쓰기만 했었던 것 같다. 이래서 vanilla js가 왜 중요한지 뼈저리게 느낄 수 있었던..
💪 이번 주말엔 꼭꼭꼭 알바 갔다오고 나서 저녁 시간에 계속 미루고 미뤘던 TIL 모조리 복습하고 코플릿 문제도 다시 풀어보기!!