[TIL] Unit 5. React SPA

string_mainΒ·2022λ…„ 6μ›” 3일
0

React

λͺ©λ‘ 보기
2/7
post-thumbnail

🌱 React SPA (Single Page Application)


  • μ •μ˜ : μ„œλ²„λ‘œλΆ€ν„° μ™„μ „νžˆ μƒˆλ‘œμš΄ νŽ˜μ΄μ§€λ₯Ό λΆˆλŸ¬μ˜€μ§€ μ•Šκ³  νŽ˜μ΄μ§€ 갱신에 ν•„μš”ν•œ λ°μ΄ν„°λ§Œ μ„œλ²„μ—μ„œ 전달받아 λΈŒλΌμš°μ €μ—μ„œ ν•΄λ‹Ήν•˜λŠ” λΆ€λΆ„λ§Œ μ—…λ°μ΄νŠΈν•˜λŠ” λ°©μ‹μœΌλ‘œ μž‘λ™ν•˜λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄λ‚˜ μ›Ή μ‚¬μ΄νŠΈ

기쑴의 μ›ΉνŽ˜μ΄μ§€λŠ” μ›Ήμ‚¬μ΄νŠΈ λ‚΄μ˜ λ‹€λ₯Έ νŽ˜μ΄μ§€λ₯Ό λ‘œλ”©ν•  λ•Œλ§ˆλ‹€ μ„œλ²„μ— 미리 μ€€λΉ„λ˜μ–΄ μžˆλŠ” νŽ˜μ΄μ§€ 전체(HTML 파일)λ₯Ό 전달 λ°›μ•„μ™€μ„œ λ Œλ”λ§μ„ ν–ˆλ‹€. ν•˜μ§€λ§Œ, 규λͺ¨κ°€ 컀질수둝 μ‚¬μš©μžμ™€μ˜ μƒν˜Έ μž‘μš©μ΄ λ§Žμ•„μ§€κ³ , 속도 μ €ν•˜ λ“±μ˜ λ¬Έμ œκ°€ λ°œμƒν•˜κ²Œ λ˜μ—ˆλ‹€..γ… γ… 

➑️ Reactμ—μ„œλŠ” μ΄λŸ¬ν•œ 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ HTML λ¬Έμ„œ 전체가 μ•„λ‹Œ, μ—…λ°μ΄νŠΈμ— ν•„μš”ν•œ λ°μ΄ν„°λ§Œ μ„œλ²„μ—μ„œ 전달 λ°›μ•„ λ™μ μœΌλ‘œ HTML μš”μ†Œλ₯Ό μƒμ„±ν•΄μ„œ 화면에 λ³΄μ—¬μ£ΌλŠ” 방식인 SPAλ₯Ό μ‚¬μš©ν•œλ‹€! (Youtube, facebook, Gmail, airbnb, Netflix λ“±)

  • μž₯점 :

    • 전체 νŽ˜μ΄μ§€κ°€ μ•„λ‹ˆλΌ ν•„μš”ν•œ λΆ€λΆ„μ˜ λ°μ΄ν„°λ§Œ λ°›μ•„μ„œ 화면에 μ—…λ°μ΄νŠΈ ν•˜λ©΄ 되기 λ•Œλ¬Έμ— μ‚¬μš©μžμ™€μ˜ μƒν˜Έμž‘μš©(interaction)에 λΉ λ₯΄κ²Œ λ°˜μ‘ν•œλ‹€.
    • μ„œλ²„μ—μ„œλŠ” μš”μ²­ λ°μ΄ν„°λ§Œ λ„˜κ²¨μ£Όλ©΄ λ˜μ–΄μ„œ μ„œλ²„ κ³ΌλΆ€ν•˜ λ¬Έμ œκ°€ 쀄어든닀.
    • 전체 νŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ ν•  ν•„μš”κ°€ μ—†μ–΄ 더 λ‚˜μ€ μœ μ € κ²½ν—˜(UX)을 μ œκ³΅ν•œλ‹€.
  • 단점 :

    • JavaScript 파일의 크기가 μ»€μ„œ 첫 ν™”λ©΄ λ‘œλ”© μ‹œκ°„μ΄ 길어진닀.
    • HTML이 거의 λΉ„μ–΄μžˆκΈ° λ•Œλ¬Έμ— 검색 엔진 μ΅œμ ν™”(SEO)κ°€ 쒋지 μ•Šλ‹€. (검색 엔진은 검색 λ‘œλ΄‡μ΄ μ›Ή νŽ˜μ΄μ§€μ— μžˆλŠ” HTML 파일의 정보λ₯Ό μˆ˜μ§‘ & λΆ„μ„ν•΄μ„œ 인덱슀λ₯Ό λ§Œλ“€μ–΄ κ΄€λ ¨μ„± 순으둜 λ³΄μ—¬μ£ΌλŠ” 방식, 검색 엔진이 λ°œμ „ν•¨μ— 따라 이 단점은 사라지고 μžˆλŠ” μΆ”μ„Έλ‹€.)
    • λΈŒλΌμš°μ €μ˜ μ•žμœΌλ‘œ κ°€κΈ°, λ’€λ‘œ κ°€κΈ° λ“±μ˜ μƒνƒœ 관리도 ν•΄μ•Ό ν•΄μ„œ 개발의 λ³΅μž‘λ„κ°€ λŠ˜μ–΄λ‚œλ‹€.

🌱 Wireframe


  • μ™€μ΄μ–΄ν”„λ ˆμž„(wireframe) : λ””μžμΈμ— λ“€μ–΄κ°€κΈ° μ „ λ‹¨κ³„λ‘œ μ„ (wire)을 μ΄μš©ν•΄ μœ€κ³½μ„ (frame)을 μž‘λŠ” 것을 λ§ν•œλ‹€.

  • λͺ©μ—…(mockup) : λ°μŠ€ν¬νƒ‘, 슀마트폰의 ν”„λ ˆμž„μ„ λ§μ”Œμ›Œ μ§κ΄€μ μœΌλ‘œ μ΄ν•΄ν•˜κΈ° μ‰½κ²Œ λ””μžμΈν•œ 것을 λ§ν•œλ‹€.

예λ₯Ό λ“€μ–΄, <Header /> μ»΄ν¬λ„ŒνŠΈλŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ–΄λŠ νŽ˜μ΄μ§€μ— 가더라도 항상 ν™”λ©΄ 상단에 μœ„μΉ˜ν•˜λ―€λ‘œ ν•œλ²ˆλ§Œ λ§Œλ“€μ–΄μ„œ λͺ¨λ“  νŽ˜μ΄μ§€μ—μ„œ μ‚¬μš©ν•  수 있게 λ‘œμ§μ„ μ§œμ•Όν•œλ‹€!

🌱 React Router


  • λΌμš°νŒ…(Routing) : λ‹€λ₯Έ μ£Όμ†Œμ— 따라 λ‹€λ₯Έ λ·°λ₯Ό λ³΄μ—¬μ£ΌλŠ” 과정을 "κ²½λ‘œμ— 따라 λ³€κ²½ν•œλ‹€."λΌλŠ” 의미

SPAλŠ” ν•˜λ‚˜μ˜ νŽ˜μ΄μ§€λ₯Ό 가지고 μžˆμ§€λ§Œ, ν•œ μ’…λ₯˜μ˜ ν™”λ©΄λ§Œ μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€. ➑️ 화면에 따라 μ£Όμ†Œκ°€ 달라진닀!

ν•˜μ§€λ§Œ, React μžμ²΄μ—λŠ” λ‚΄μž₯된 κΈ°λŠ₯이 μ—†κΈ° λ•Œλ¬Έμ— React RouterλΌλŠ” 라이브러리λ₯Ό μ‚¬μš©ν•œλ‹€.

🌿 μ£Όμš” μ»΄ν¬λ„ŒνŠΈ

  • <BrowserRouter> : λΌμš°ν„° μ—­ν•  μ»΄ν¬λ„ŒνŠΈ
  • <Routes>, <Route> : 경둜λ₯Ό λ§€μΉ­ν•΄μ£ΌλŠ” μ»΄ν¬λ„ŒνŠΈ
  • <Link> : 경둜λ₯Ό λ³€κ²½ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈ
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
  • 비ꡬ쑰화 ν• λ‹Ή(destructuring assignment)으둜 ν•„μš”ν•œ λͺ¨λ“ˆμ„ import ν•œλ‹€.

🌿 λΌμš°νŒ… μ‹€μŠ΅

  1. 개발 ν™˜κ²½ ꡬ좕
npx create-react-app simpleroute
cd simpleroute
npm start // λ¦¬μ•‘νŠΈ μ•± μ‹€ν–‰

npm install react-router-dom@^6.3.0 // React Router μ„€μΉ˜
// μ»΄ν¬λ„ŒνŠΈ import
import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
// App.js
function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link μ»΄ν¬λ„ŒνŠΈλ₯Ό μ΄μš©ν•˜μ—¬ 경둜λ₯Ό μ—°κ²°ν•©λ‹ˆλ‹€ */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* κ²½λ‘œλŠ” path둜 μ»΄ν¬λ„ŒνŠΈλŠ” element둜 μ—°κ²°ν•΄ μ€λ‹ˆλ‹€. */}
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

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

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

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

export default App;
  • index.js에도 <BrowserRouter>λ₯Ό ν™œμš©ν•  수 μžˆλ‹€.
// 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>
);

// Version 17 κΈ°μ€€
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));

🌱 Check List


  • SPA(Single-Page Application) κ°œλ…μ„ μ΄ν•΄ν•˜κ³  μ„€λͺ…ν•  수 μžˆλ‹€.
  • SPA의 μž₯, 단점에 λŒ€ν•΄ μ΄ν•΄ν•˜κ³  μ„€λͺ…ν•  수 μžˆλ‹€.
  • μ™€μ΄μ–΄ν”„λ ˆμž„μ„ 보고 μ–΄λŠ 뢀뢄을 μ»΄ν¬λ„ŒνŠΈλ‘œ ꡬ뢄할지 슀슀둜 μ •ν•  수 μžˆλ‹€.
  • Reactμ—μ„œ npm으둜 React Routerλ₯Ό μ„€μΉ˜(npm install react-router-dom@6.3.0)ν•˜κ³  μ΄μš©ν•  수 μžˆλ‹€.
  • React Routerλ₯Ό μ΄μš©ν•˜μ—¬ SPAλ₯Ό κ΅¬ν˜„ν•  수 μžˆλ‹€.
  • λΌμš°νŒ… ꡬ쑰λ₯Ό 지 수 μžˆμ–΄μ•Ό ν•˜κ³ , 이에 ν•„μš”ν•œ 기초 문법듀을 μ‚¬μš©ν•  수 μžˆμ–΄μ•Ό ν•œλ‹€.

🌱 μΆ”κ°€ ν•™μŠ΅


  • κ°„λ‹¨ν•œ React ν”„λ‘œμ νŠΈ λ§Œλ“€μ–΄λ³΄κΈ°

| 참고자료 |

  • CodeStates - UrClass
profile
FE developer

0개의 λŒ“κΈ€