[C/F TIL] 28์ผ์ฐจ - react, react SPA

mu-engยท2023๋…„ 5์›” 20์ผ
1

TIL (in boost camp)

๋ชฉ๋ก ๋ณด๊ธฐ
29/53
post-thumbnail

Code States
Front-end boost camp
Today
I
Learned

๐Ÿœ 5์›” 19์ผ 28์ผ์ฐจ~ ์˜ค๋Š˜ ์ ์‹ฌ ์Œ€๊ตญ์ˆ˜ ใ…‹_ใ…‹


๐Ÿœ React SPA

ํŽ˜์ด์ง€๋ฅผ ์œ ์ €์—๊ฒŒ ๋ณด์—ฌ์ค„ ๋•Œ, ์„œ๋ฒ„์— ๋ฏธ๋ฆฌ ์ค€๋น„๋˜์–ด ์žˆ๋Š” ํŽ˜์ด์ง€๋ฅผ ์ „๋‹ฌ๋ฐ›์•„์™€ ๋ Œ๋”๋ง ํ–ˆ์ง€๋งŒ ๊ทœ๋ชจ๊ฐ€ ์ปค์งˆ์ˆ˜๋ก ์‚ฌ์šฉ์ž์™€์˜ ์ƒํ˜ธ ์ž‘์šฉ์ด ๋งŽ์•„์ง€๊ณ  ๊ทธ์— ๋”ฐ๋ผ ์†๋„ ์ €ํ•˜ ๋“ฑ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒ. ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด?

react SPA(Single Page Application) ์‚ฌ์šฉ !

  • ์ „ํ†ต์ ์ธ ์›น์‚ฌ์ดํŠธ์—์„œ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์›น์‚ฌ์ดํŠธ ๋‚ด์˜ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•˜๋ฉด, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํŽ˜์ด์ง€๋ฅผ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด ๋งค๋ฒˆ HTMLํŒŒ์ผ๋กœ ๋œ "ํŽ˜์ด์ง€ ์ „์ฒด"๋ฅผ ๋ถˆ๋Ÿฌ์™€์•ผ๋งŒ ํ–ˆ์Œ : ๊นœ๋นก์ธ๋‹ค๊ณ  ํ‘œํ˜„
    -- ํ•˜์ง€๋งŒ SPA๋Š” ์—…๋ฐ์ดํŠธ๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ์ƒˆ๋กœ ๋ถˆ๋Ÿฌ์˜ด

  • SPA๋Š”
    -- ์™„์ „ํžˆ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ์ด ์•„๋‹˜
    -- ํ™”๋ฉด์„ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ์„œ๋ฒ„์—์„œ ์ „๋‹ฌ๋ฐ›์•„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ•ด๋‹นํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ์—…๋ฐ์ดํŠธ

  • ์žฅ์ ?
    -- ์‚ฌ์šฉ์ž์˜ ๋ฐ˜์‘์— ๋น ๋ฅด๊ฒŒ ๋ฐ˜์‘ (ex. SNS ๋Œ“๊ธ€ ๊ธฐ๋Šฅ)

  • ๋‹จ์ ?
    -- ๋Œ€๋ถ€๋ถ„์˜ ์ฝ”๋“œ๋Š” JavaScript ํŒŒ์ผ ์•ˆ์— ์žˆ์–ด ๋ฌด๊ฑฐ์›Œ์ง์œผ๋กœ์จ js ํŒŒ์ผ์„ ๊ธฐ๋‹ค๋ฆฌ๋Š” ์‹œ๊ฐ„์œผ๋กœ ์ธํ•ด ์ฒซ ํ™”๋ฉด์˜ ๋กœ๋”ฉ ์‹œ๊ฐ„์ด ๊ธธ์–ด์ง
    -- ์—”์ง„ ์ตœ์ ํ™”๊ฐ€ ์ข‹์ง€ ์•Š๋‹ค

๐Ÿœ React Router

  • ์›นํŽ˜์ด์ง€ ํ™”๋ฉด ์•ˆ์— ์žˆ๋Š” ๋‹ค๋ฅธ ํ™”๋ฉด
    -- ์ด ํ™”๋ฉด์— ๋”ฐ๋ผ "์ฃผ์†Œ"๋„ ๋ณ€๊ฒฝ๋จ
  • ์ฆ‰, Routing ์ด๋ž€ : ๋‹ค๋ฅธ ์ฃผ์†Œ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๋ทฐ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ณผ์ •์„ "๊ฒฝ๋กœ์— ๋”ฐ๋ผ ๋ณ€๊ฒฝํ•œ๋‹ค"๋Š” ์˜๋ฏธ
  • React Router
    -- BrowserRouter : ๋ผ์šฐํ„ฐ ์—ญํ• 
    -- Routes : ๊ฒฝ๋กœ๋ฅผ ๋งค์นญ
    -- Link : ๊ฒฝ๋กœ๋ฅผ ๋ณ€๊ฒฝ
  • ์‚ฌ์šฉ๋ฒ• : React Router ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๋”ฐ๋กœ ๋ถˆ๋Ÿฌ์™€ ์‚ฌ์šฉ
// ํ•ด๋‹น ํด๋” ์ง€์ • ํ›„ react app ์„ค์น˜
npx create-react-app simpleroute

// react-router ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜
npm install react-router-dom
// ์ปดํฌ๋„Œ์ธ  ๊บผ๋‚ด์˜ค๊ธฐ ์ „ import ๊ตฌ๋ฌธ
inport React from "react":
inport { BrowserRouter, Routes, Route, Link} from "react-router-dom";

export default function App() {
  return ( ... )
}

๐Ÿœ 28์ผ์ฐจ ์ˆ˜์—…์„ ๋งˆ์น˜๋ฉฐ...

๋ƒ‰๋ฌด

profile
[๋ฌด์—ฅ์ผ๊ธฐ] ๋ฌด์—ฅ,,, ๋‚ด๊ฐ€ ๋จธ์จ์ด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋  ์ˆ˜ ์ด์“ฐ๊นŒ,,,

0๊ฐœ์˜ ๋Œ“๊ธ€