[CodeStates-Section2]U5.React SPA

1.후기

 실습이 재밌었던 하루였다. 파일 간의 관계가 이해되면서 내가 원하는 대로 코드를 짤 수 있겠다는 자신감이 들었다. 과제도 Advanced까지 도전해서 성공했다. 하지만 내일이 어렵겠지...?

 요즘 블로그 정리에 신경을 쓰고 있다. 처음에는 '순서 상관없이 까먹을 것 같은 것만 적자' 였는데 뒤죽박죽 써놓으니 머릿속에서도 정리가 되지 않는다는 느낌을 받았다. 그 후로 카테고라이징에 신경 썼더니 훨씬 눈에도 머리에도 잘 들어온다. 사실 이것을 차치하고도 그냥 꾸준히 게시글을 올리고 있다는 것에 스스로가 기특하다😎

2.새롭게 알게 된 것

Section2 Unit5 - [React] React SPA
Chapter1. React SPA
Chapter2. React Router
과제 - React Twittler SPA

<Chapter1. React SPA>

1.SPA 등장 배경, 장단점

1) SPA 등장 배경

(출처: https://www.excellentwebworld.com/what-is-a-single-page-application/)

-MPA, SPA 차이
MPA(Multiple Page Application, 예전 방식) -> 페이지 전체를 로딩
SPA(Single Page Application) -> 업데이트가 필요한 부분만 새로 불러옴

-MPA 단점
서버와의 불필요한 트래픽을 발생
사용자 경험 저하

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

-장점

• 사용자와의 Interaction에 빠르게 반응(필요한 부분의 데이터만 받아서 화면을 업데이트)
• 서버 과부하 문제가 현저하게 줄어듦(서버에서는 요청받은 데이터만 넘겨주면 됨)
• 더 나은 유저 경험 제공(전체 페이지를 렌더링할 필요가 없음)

-단점

• 첫 화면 로딩 시간 김(JavaScript 파일의 크기가 크기 때문)
• 검색 엔진 최적화(SEO)가 좋지 않음(SEO는 HTML 파일의 자료를 분석하는 방식을 이용, 하지만 SPA는 HTML 파일에 별다른 자료가 없음, 다만 SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지는 추세)

참고. 검색 엔진 최적화
구글이나 네이버 같은 검색엔진이 자료를 수집하기 좋도록 웹 페이지를 구성하는 것

2.Wireframe

와이어프레임으로 먼저 어떤 컴포넌트를 만들고 조합할지 구상해야 함

-Wireframe: 디자인에 들어가기 전 단계로 선(wire)을 이용해 윤곽선(frame)을 잡는 것
-Mockup: 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것

<Chapter2. React Router>

React에서 npm으로 React Router를 설치(npm install react-router-dom@^6.3.0)하고 이용할 수 있다.
React Router를 이용하여 SPA를 구현할 수 있다.
라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.

1.Routing(라우팅)

-다른 주소에 따라 다른 뷰를 보여주는 과정
-React 자체에는 라우팅 기능이 내장되어 있지 않음. 그러므로 React Router라는 라이브러리 사용.

2.React Router 라이브러리

1) React Router 라이브러리 설치 방법

//'폴더이름'에 React App 설치
npx create-react-app 폴더이름
//생성한 폴더로 진입
cd 폴더이름
//해당 폴더 안에서 react-router 라이브러리 설치
npm install react-router-dom

2) App.js로 React Router 컴포넌트 꺼내오기

// import: App.js 최상단에 입력
import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

// export 방식1. App 컴포넌트에서 직접 export
export default function App() {
	return (...)
}

// export 방식2. App 컴포넌트 작성 후 하단에서 export
function App() {
	return (...)
}

export default App;

3) React Router 주요 컴포넌트

4) React Router 주요 컴포넌트 위치
-<BrowserRouter>

// 방법1. ReactDOM의 렌더 단계에 삽입(권장)
	// index.js 파일-App 컴포넌트의 부모 컴포넌트
	ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));

// 방법2. App 컴포넌트 생성 단계에 삽입
	// App.js 파일-App 컴포넌트의 최상위 부모 컴포넌트
	const App = () => {
      return (
    	<BrowserRouter>
      	  ...
    	</BrowserRouter>
  	  );
	};

// 주의: `<BrowserRouter>`은 자식이 하나여야 함

-<Routes> -> <BrowserRouter> 내부
-<Route> -> <Routes> 내부
-<Link> -> <BrowserRouter> 내부, 링크 걸고 싶은 요소를 감쌈

5) React Router 주요 컴포넌트 설명

• <BrowserRouter> 컴포넌트: 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 함. <BrowserRouter> 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있음.

• <Routes> 컴포넌트: 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링시켜주는 역할. <Routes> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링.

• <Route> 컴포넌트: path 속성을 지정하여 해당 path에서 어떤 컴포넌트를 보여줄지 정함. <Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동.

  ```javascript
  <Routes>
  	<Route path='경로' element=<보여주고 싶은 컴포넌트 /> />
  <Routes>
  ```

  참고. path = "*"
  사용자가 지정 주소 이외의 주소로 접근하게 되면 의도한 화면이 보이지 않을 수 있음. 이럴 때 path = "*" 속성이 설정된 컴포넌트를 보여주게 됨.

• <Link> 컴포넌트: 경로를 연결해 주는 역할. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경. ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 요소로 바뀌는 모습을 볼 수 있음.

  ```javascript
  return (
  <BrowserRouter>
  	<Link to='경로'>Home</Link>
  </BrowserRouter>
  )
  ```

  참고. React Router에서 <a> 요소가 아닌 <Link>를 사용하는 이유
  <a> 요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링시킴. 즉, 새로고침 현상이 일어나게 됨. 하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있음.

<과제 - React Twittler SPA>

1.Create React App 구성

-Create React App 생성 시 구성

-과제 파일 구성

//✅: React Creat App 생성 시 자동으로 만들어지는 파일, 폴더
/
├── /Twittler React SPA
 	├── ✅/node_modules
    ├── ✅/public                 # create-react-app이 만들어낸 파일, yarn/npm start로 실행할 시에 쓰입니다, index.html 파일이 들어가는 폴더
    └── ✅/src                    # React 컴포넌트가 들어가는 폴더
    │    ├── /static               # dummyData가 들어가는 폴더
    │    │    └── dummyData.js
    │    ├── /Pages                # 페이지를 표시하는 컴포넌트가 들어가는 폴더
    │    │    ├── About.css
    │    │    ├── About.js
    │    │    ├── MyPage.css
    │    │    ├── MyPage.js
    │    │    ├── Tweets.css
    │    │    └── Tweets.js
    │    ├── ✅App.css
    │    ├── ✅App.js
    │    ├── Footer.js            # 항상 표시되어야 하는 컴포넌트이므로 Pages 폴더 밖에 위치
    │    ├── ✅index.js
    │    └── Sidebar.js           # 항상 표시되어야 하는 컴포넌트이므로 Pages 폴더 밖에 위치
    ├── ✅.gitignore
    ├── ✅package.json
    ├── ✅package-lock.json
    └── ✅README.md

2.useNavigate

import { useNavigate } from 'react-router-dom';

const App = () => {
  const navigate = useNavigate();

  const goBack = () => {
    navigate(-1); // 뒤로 가기
  };

  const goForward = () => {
    navigate(1); //앞으로 가기
  };

  const reload = () => {
    navigate(0); // 새로고침
  };

  return (
    <div>
      <button onClick={goBack}>뒤로가기</button>
      <button onClick={reload}>새로고침</button>
      <button onClick={goForward}>앞으로가기</button>
      <div className='App'>
        ...
      </div>
    </div>
  );
};

3.ReactDOM.render()

-사용법
render(element, container[, callback])
render(렌더링 하고 싶은 컴포넌트, html에서 가져온 root 태그)

-예시

4.export & export default

-export
import { 함수명 } from *
import 파일에서 반드시 사용되어야 함
import 시 함수명 고정

-export default
import 함수명 from *
import 파일에서 사용되지 않아도 됨
import 시 함수명 변경 가능

5.틸드와 캐럿

-틸드(~, tilde): x.y.z 중 z 범위 내에서 버전 업데이트
-캐럿(^, caret): x.y.z 중 x 이하 하위호환성이 보장되는 범위 내에서 버전 업데이트(실무에서 많이 사용)

예시.
~1.2.3: >=1.2.3 <1.3.0
z 범위내에서 버전 업데이트
범위가 1.2.3을 포함해서 같거나 크고, 1.3.0보다 작은 범위내에서 업데이트
^1.2.3: >=1.2.3 <2.0.0
x 이하 하위 호환성이 보장되는 범위내에서 버전 업데이트
1.2.3보다 크거나 같고, 2.0.0보다 작은 범위내에서 업데이트
결국 Major 버전이 바뀌지 않고, 하위호환성을 유지하기 때문에 실무에서 가장 많이 사용

출처(틸드, 캐럿): https://umanking.github.io/2022/05/05/npm-version-tilde-caret/