๐Ÿง‘๐Ÿปโ€๐Ÿซ ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ  ๋ฉด์ ‘ ๋‹จ๊ณจ ๊ฐœ๋…๋“ค ์ •๋ฆฌ (๋ฆฌ์•กํŠธ ํŽธ)

leememberยท2023๋…„ 3์›” 14์ผ
182

FE๋ฉด์ ‘์ค€๋น„

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

๊ณ„์† ์ถ”๊ฐ€ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๐ŸŸก ๋ฆฌ์•กํŠธ

๋ฆฌ์•กํŠธ๋ฅผ ์“ฐ๋Š” ์ด์œ ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ํŠน์ง•๋“ค๋กœ ์„ค๋ช…ํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“ Javascript + XML

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— HTML ํƒœ๊ทธ๋ฅผ ๋ผ์–น์€ ๋ฌธ๋ฒ•
    HTML ํƒœ๊ทธ ์•ˆ์—์„  ์ค‘๊ด„ํ˜ธ ({})๋ฅผ ์‚ฌ์šฉํ•ด์„œ JS๋ฅผ ์“ธ ์ˆ˜ ์žˆ๋‹ค.
  • ์จ๋ณด๋ฉด ๊ต‰์žฅํžˆ ํŽธ๋ฆฌํ•˜๋‹ค.
const apple = "์‚ฌ๊ณผ"
const title = <h1>{apple} ๋“œ์‹ค๋ถ„?</h1>

๐Ÿ“ ์ปดํฌ๋„ŒํŠธ

  • ํ™”๋ฉด์„ ์ด๋ฃจ๋Š” '์š”์†Œ'๋กœ ์—ฌ๋Ÿฌ ๊ณณ์—์„œ ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์ฝ”๋“œ ์กฐ๊ฐ์ด๋‹ค.
  • ๊ฐœ๋ฐœํ•˜๋‹ค๊ฐ€ ํŠน์ • ๋ถ€๋ถ„์—์„œ ๋ฒ„๊ทธ๊ฐ€ ์ผ์–ด๋‚˜๋ฉด ๊ทธ ์ปดํฌ๋„ŒํŠธ๋งŒ ์ˆ˜์ •ํ•˜์—ฌ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
    ๊ทธ๋ž˜์„œ ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ์ฆ๊ฐ€์‹œ์ผœ์ค€๋‹ค.
  • ๋ฆฌ์•กํŠธ ๋ฐ์ดํ„ฐ์˜ ํ๋ฆ„์€ ๋‹จ๋ฐฉํ–ฅ์œผ๋กœ ์ด๋ค„์ง„๋‹ค. ์ฆ‰, ๋ถ€๋ชจ์—์„œ ์ž์‹์œผ๋กœ ํ•œ๋ฐฉํ–ฅ์œผ๋กœ๋งŒ ๋ฐ์ดํ„ฐ๋ฅผ props๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ณต์œ ํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.

Props

  • ํ”„๋กœํผํ‹ฐ์˜ ์ค„์ž„๋ง์ด๊ณ  ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ -> ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•ด์ฃผ๋Š” ๊ฐœ๋…์ด๋‹ค.
  • ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ „๋‹ฌ ๋ฐ›์€ props๋Š” ์ฝ๊ธฐ ์ „์šฉ์ด๊ณ  Props๋ฅผ ์ „๋‹ฌํ•ด์ค€ ์ตœ์ƒ์œ„ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋งŒ props๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.

State

  • ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๊ณ  ๋™์ ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃฐ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
  • useState ํ•จ์ˆ˜๋กœ ์ƒํƒœ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • const [์ƒํƒœ๋ช…, ์ƒํƒœ๋ณ€๊ฒฝํ•จ์ˆ˜๋ช…] = useState(์ดˆ๊ธฐ๊ฐ’);

๐Ÿ“ ์ œ์–ด ์ปดํฌ๋„ŒํŠธ vs ๋น„์ œ์–ด ์ปดํฌ๋„ŒํŠธ

๋ฆฌ์•กํŠธ๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ์‹์œผ๋กœ form์˜ ์ž…๋ ฅ์„ ์ฒ˜๋ฆฌํ•œ๋‹ค.
๋ฐ”๋กœ ์ œ์–ด ์ปดํฌ๋„ŒํŠธ์™€ ๋น„์ œ์–ด ์ปดํฌ๋„ŒํŠธ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋Š”๋ฐ

๐Ÿ”ฅ (1) ์ œ์–ด ์ปดํฌ๋„ŒํŠธ

  • ์‚ฌ์šฉ์ž๊ฐ€ ์ œ์–ด ์ปดํฌ๋„ŒํŠธ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ๋ณ€๊ฒฝ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ํ˜ธ์ถœ๋˜๊ณ  ์ฝ”๋“œ๊ฐ€ ์—…๋ฐ์ดํŠธ๋œ ๊ฐ’์œผ๋กœ ๋‹ค์‹œ ๋ Œ๋”๋ง์ด ๋œ๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ form์— value ๊ฐ’์„ useState๋กœ ๊ด€๋ฆฌํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ตœ์‹ ํ™” ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.
const [inputValue, setInputValue] = useState('');

return (
 <input value={inputValue} onChange={(e) => setInputValue(e.target.value) />
)

์ด๋Ÿฐ์‹์œผ๋กœ ํ…์ŠคํŠธ ์ž…๋ ฅ์„ ํ•  ๋•Œ๋งˆ๋‹ค onChange์˜ ์ฝœ๋ฐฑ ํ˜ธ์ถœ์— ๋”ฐ๋ผ์„œ form์˜ ์ƒํƒœ๊ฐ€ ๊ณ„์† ์ฆ‰๊ฐ์œผ๋กœ ๋ Œ๋”๋ง ๋˜๋Š” ๊ฒƒ์„ ์ œ์–ด ์ปดํฌ๋„ŒํŠธ๋ผ๊ณ  ํ•œ๋‹ค.

ํ™œ์šฉ ์˜ˆ)

  • form์˜ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌํ•  ๋•Œ (์•„์ด๋””๋‚˜ ๋น„๋ฐ€๋ฒˆํ˜ธ ์ฒดํฌ์‹œ)
  • form์— ๋ฐ์ดํ„ฐ ๊ฐ’์— ๋”ฐ๋ผ ๋ฒ„ํŠผ ์ƒํƒœ๋ฅผ disabled๋กœ ํ‘œ์‹œ

๐Ÿ”ฅ (2) ๋น„์ œ์–ด ์ปดํฌ๋„ŒํŠธ

  • ์‚ฌ์šฉ์ž๊ฐ€ ํผ ํ•„๋“œ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ์—…๋ฐ์ดํŠธ๋œ ์ •๋ณด๊ฐ€ ๋ฆฌ์•กํŠธ์—์„œ ๋ณ„๋„ ์ฒ˜๋ฆฌํ•  ํ•„์š” ์—†์ด ์—˜๋ฆฌ๋จผํŠธ์— ๋ฐ˜์˜๋œ๋‹ค.
    ์ œ์–ด ์ปดํฌ๋„ŒํŠธ๋Š” useState๋กœ ๊ด€๋ฆฌํ•˜์ง€๋งŒ ๋น„์ œ์–ด ์ปดํฌ๋„ŒํŠธ๋Š” ref๋กœ ๊ด€๋ฆฌํ•œ๋‹ค.
const inputRef = useRef();

return (
<input ref={inputRef} value="hello" />
)

์ด์ฒ˜๋Ÿผ ref๋ฅผ ํ™œ์šฉํ•ด ์ž…๋ ฅ ํผ์˜ ์ƒํƒœ๋ฅผ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค. button์„ ํด๋ฆญํ•  ๋•Œ ref๋ฅผ ํ†ตํ•ด ๊ฐ’์„ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

ํ™œ์šฉ ์˜ˆ)

  • ๋ถˆํ•„์š”ํ•œ ๋ Œ๋”๋ง์„ ์ค„์ด๊ณ , ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜์—ฌ ์ œ์ถœํ•  ๋•Œ ๊ฐ’์ด ํ•„์š”ํ•  ๊ฒฝ์šฐ์— ์‚ฌ์šฉ

๐Ÿ“ ์ด๋ฒคํŠธ

์‚ฌ์šฉ์ž ์ด๋ฒคํŠธ(ํด๋ฆญ, ์Šคํฌ๋กค ๋“ฑ) ๋‹ค๋ฃจ๊ธฐ

  • ์ผ๋ฐ˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ด๋ฒคํŠธ ๋ชฉ๋ก๊ณผ ๋™์ผํ•˜์ง€๋งŒ ์ค‘๊ฐ„์„ ๋Œ€๋ฌธ์ž๋กœ ์“ฐ๋ฉด ๋œ๋‹ค.
  • onclick -> onClick
  • onsubmit -> onSubmit

SPA (Single Page Application)

์‚ฌ์šฉ์ž๊ฐ€ ํ•œ ํŽ˜์ด์ง€์˜ ๋จธ๋ฌด๋ฅด๋ฉด์„œ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋กœ ๋ฐ”๋€” ๋•Œ ๋งˆ๋‹ค ํ•„์š”ํ•œ ์ •๋ณด๋งŒ ์ถ”๊ฐ€์ ์œผ๋กœ ๋ฐ›์•„์™€ ๋ถ€๋ถ„์ ์œผ๋กœ ์—…๋ฐ์ดํŠธํ•œ๋‹ค.

  • ์ฒซ ํ™”๋ฉด ๋กœ๋”ฉ ์‹œ๊ฐ„์ด ๋‹ค์†Œ ๊ธธ๋‹ค๋Š” ์ ์ด ์žˆ๋‹ค.
  • ๋ผ์šฐํŒ…์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๋ทฐ๋ฅผ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“ ๊ฐ€์ƒ ๋”(Virtual DOM)

  • DOM์„ ์ถ”์ƒํ™”ํ•œ ๊ฐ€์ƒ์˜ ๊ฐ์ฒด์ด๋‹ค.

์ผ๋ฐ˜์ ์ธ ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ •์œผ๋กœ๋Š”
1. HTML ํŒŒ์‹ฑ -> DOM ๊ฐ์ฒด ์ƒ์„ฑ -> CSS ํŒŒ์‹ฑ -> ์Šคํƒ€์ผ ๊ทœ์น™ ์ƒ์„ฑ
2. ์œ„์˜ ๊ณผ์ •์„ ํ•ฉ์ณ ์‹ค์ œ๋กœ ์›น ๋ธŒ๋ผ์šฐ์ €์— ๋ณด์—ฌ์ค˜์•ผ ํ•  'render tree' ๋ฅผ ๋งŒ๋“ ๋‹ค.
3. ์ด ๋ Œ๋” ํŠธ๋ฆฌ ๊ธฐ์ค€์œผ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ๋ฐฐ์น˜ํ•˜๊ณ  Paint์˜ ์ž‘์—…์„ ํ•œ๋‹ค.

์ด ๊ณผ์ •์—์„œ ๋ณ€๊ฒฝ๋  ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋ฐ”๋€Œ๋ฉด ์ „์ฒด๊ฐ€ ๋ Œ๋”๋ง์ด ๋˜๋Š”๋ฐ ๋งค์šฐ ๋น„ํšจ์œจ์ ์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
๊ทธ๋ž˜์„œ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋ฐ”๋กœ Virtual DOM ์ด๋‹ค.
Virtual DOM์€ ๊ธฐ์กด DOM๊ณผ ๋ณ€๊ฒฝ๋  Virtual DOM์˜ ์ฐจ์ด๋ฅผ ํŒ๋‹จํ•˜๊ณ  ๋ณ€๊ฒฝ๋œ ๊ตฌ์„ฑ์š”์†Œ๋งŒ ์ฐพ์•„ ๊ทธ๋ถ€๋ถ„๋งŒ ๋ Œ๋”๋ง์ด ๋œ๋‹ค.

๐Ÿ“ diffing ์•Œ๊ณ ๋ฆฌ์ฆ˜

์œ„์— ์„ค๋ช…ํ•œ Virtual DOM๊ณผ ๊ด€๋ จ์ด ํฌ๋‹ค.
๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„๋งŒ ๊ฐ์ง€ํ•ด์„œ ๋ฐ”๋€ ๋ถ€๋ถ„๋งŒ ์—…๋ฐ์ดํŠธ ํ•˜๋Š” ๋ฐฉ์‹์„ ์ทจํ•˜๊ฒŒ ๋˜๋Š”๋ฐ ์ด ๋ณ€๊ฒฝ๋œ ๋ถ€๋ถ„์„ ๊ฐ์ง€ํ•˜๋Š” ๊ฒƒ์„ diffing Algorihm ์ด๋ผ๊ณ  ํ•œ๋‹ค.
์ผ๋ฐ˜์ ์ธ ํŠธ๋ฆฌ ๊ตฌ์กฐ์˜ ๋น„๊ต๋Š” O(n^3)์˜ ์‹œ๊ฐ„์ด ์†Œ์š”๋œ๋‹ค๊ณ  ํ•œ๋‹ค. ํ•˜์ง€๋งŒ ๋ฆฌ์•กํŠธ๋Š” ์ด๋Ÿฌํ•œ diffing ์•Œ๊ณ ๋ฆฌ์ฆ˜์œผ๋กœ ์ธํ•ด O(n)์˜ ์‹œ๊ฐ„์— ํ•ด๊ฒฐํ•˜๊ณ  ์žˆ๋‹ค.

๐Ÿ“ key๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

์ด๊ฒƒ ๋˜ํ•œ Virtual DOM๊ณผ diffing ์•Œ๊ณ ๋ฆฌ์ฆ˜๊ณผ ์—ฐ๊ด€์ด ์žˆ๋‹ค.
ํ•˜๋‚˜์˜ JSX ํƒœ๊ทธ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋กœ ๊ตฌ์„ฑ๋˜๋Š”๋ฐ ์ด ๊ฐ์ฒด์—๋Š” ํ•ด๋‹น ๊ฐ์ฒด๊ฐ€ Virtual DOM์˜ ์š”์†Œ์ž„์„ ํ™•์ธํ•ด์ฃผ๋Š” ์‹ฌ๋ณผ๊ฐ’๊ณผ ๊ฐ๊ฐ์˜ Virtual DOM๋ฅผ ๊ณ ์œ ํ•˜๊ฒŒ ๊ตฌ๋ถ„ํ•˜๋Š” key ๊ฐ’์ด ๋“ค์–ด๊ฐ€๊ฒŒ ๋œ๋‹ค.

๊ทธ๋ž˜์„œ map ์„ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ, ํ•ด๋‹น ๋ฆฌ์ŠคํŠธ์— ๊ณ ์œ ํ•œ key๊ฐ’์„ ๋„ฃ์–ด์ค˜์•ผํ•œ๋‹ค. ๋ฆฌ์•กํŠธ๋Š” ์ด key๋“ค์˜ ๋น„๊ต๋ฅผ ํ†ตํ•ด ๋ฆฌ์ŠคํŠธ์˜ ์š”์†Œ๊ฐ€ ์ถ”๊ฐ€๋˜๊ฑฐ๋‚˜ ์‚ญ์ œ๋˜์—ˆ์„ ๋•Œ ์ƒํƒœ๋ฅผ ๋น ๋ฅด๊ฒŒ ๊ฐ์ง€ํ•˜๊ณ  ๋ฐ˜์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

์‰ฝ๊ฒŒ ๋งํ•ด ์—˜๋ฆฌ๋จผํŠธ ํ˜น์€ ์ปดํฌ๋„ŒํŠธ์˜ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•˜๊ธฐ ์œ„ํ•จ์ด๊ณ  ์ด๋Š” ํšจ์œจ์ ์ธ DOM ์‚ฌ์šฉ์œผ๋กœ ๊ท€๊ฒฐ๋œ๋‹ค.


๐Ÿ“ Hooks

useState

  • ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.
    ์ƒํƒœ์— ๋”ฐ๋ผ ์ฆ‰๊ฐ์ ์œผ๋กœ ๋‹ค๋ฅธ ํ™”๋ฉด๋“ค์„ ์ถœ๋ ฅํ•ด์ค€๋‹ค. (= ๋ Œ๋”๋ง)

useEffect

  • ๋ Œ๋”๋ง ์ดํ›„์— ์‹คํ–‰ํ•  ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค์–ด์ค€๋‹ค.
  • ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๋ฅผ ๊ฐ์ง€ํ•˜๋Š” ํ•จ์ˆ˜, ๊ฐ์‹œ๋Œ€์ƒ์ด ๋ณ€ํ•˜๋ฉด ์ฝœ๋ฐฑ์„ ์‹คํ–‰ํ•œ๋‹ค.
useEffect(๊ฐ์‹œ ๋Œ€์ƒ์ด ๋ณ€ํ•˜๋ฉด ๋™์ž‘ ํ•  ์ฝœ๋ฐฑ, [๊ฐ์‹œ๋Œ€์ƒ])

ํด๋ž˜์Šค ์ปดํฌ๋„ŒํŠธ ์‹œ์ ˆ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ํ•จ์ˆ˜๋กœ useEffect ์—ญํ• ์„ ํ–ˆ๋Š”๋ฐ, ์ด๊ฒƒ๋„ ๊ธฐ์ˆ ๋ฉด์ ‘ ๋•Œ useEffect์™€ ์—ฐ๊ด€์‹œ์ผœ ์งˆ๋ฌธ์ด ๋นˆ๋ฒˆํ•˜๊ฒŒ ๋‚˜์˜ค๊ธฐ ๋•Œ๋ฌธ์— ์ •๋ฆฌํ•ด๋ดค๋‹ค.

componentDidMount: ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๊ณ , ์ฒซ ๋ Œ๋”๋ง์„ ๋‹ค ๋งˆ์นœ ํ›„ ์‹คํ–‰.
componentDidUpdate: ๋ฆฌ๋ Œ๋”๋ง์„ ์™„๋ฃŒํ•œ ํ›„ ์‹คํ–‰. ์ฆ‰ render()๊ฐ€ ์—…๋ฐ์ดํŠธ๋  ๋•Œ๋งˆ๋‹ค ์‹คํ–‰
compoenntWillUnMount: ์ปดํฌ๋„ŒํŠธ๋ฅผ DOM์—์„œ ์ œ๊ฑฐํ•  ๋•Œ ์‹คํ–‰.

์œ„ ๊ฐœ๋…๋“ค์ด useEffect๋กœ ์–ด๋–ป๊ฒŒ ์“ฐ์ด๋Š”์ง€ ?

  • Component๊ฐ€ Mount ๋˜์—ˆ์„ ๋•Œ(๋‚˜ํƒ€๋‚  ๋•Œ) = componentDidMount
  • deps๋ถ€๋ถ„์„ ์ƒ๋žตํ•œ๋‹ค๋ฉด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง ๋  ๋•Œ๋งˆ๋‹ค useEffect๊ฐ€ ์‹คํ–‰๋œ๋‹ค.
  useEffect(() => {
    console.log("๋ Œ๋”๋ง ๋ ๋•Œ๋งˆ๋‹ค ์‹คํ–‰");
  });
  • ๋งŒ์•ฝ ๋งจ ์ฒ˜์Œ ๋ Œ๋”๋ง ๋  ๋•Œ ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด deps์œ„์น˜์— ๋นˆ ๋ฐฐ์—ด์„ ๋„ฃ์ž
useEffect(() => {
    console.log("๋งจ ์ฒ˜์Œ ๋ Œ๋”๋ง๋  ๋•Œ ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰");
  },[]);
  • Component๊ฐ€ Update ๋˜์—ˆ์„ ๋•Œ(props, state ๋ณ€๊ฒฝ) = componentDidUpdate
  useEffect(() => {
    console.log("name์ด๋ผ๋Š” ๊ฐ’์ด ์—…๋ฐ์ดํŠธ ๋  ๋•Œ๋งŒ ์‹คํ–‰");
  },[name]);
  • Component๊ฐ€ ์‚ฌ๋ผ์งˆ ๋•Œ & Update ๋˜๊ธฐ ์ง์ „์— = compoenntWillUnMount
  • ์–ธ๋งˆ์šดํŠธ ๋  ๋•Œ๋งŒ cleanUp ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ค๊ณ  ์‹ถ๋‹ค๋ฉด deps์— ๋นˆ๋ฐฐ์—ด์„ ๋„ฃ์œผ๋ฉด ๋œ๋‹ค.
  • ํŠน์ • ๊ฐ’์ด ์—…๋ฐ์ดํŠธ ๋˜๊ธฐ ์ง์ „์— cleanup ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ค๊ณ  ์‹ถ๋‹ค๋ฉด deps์— ํ•ด๋‹น ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค.
  useEffect(() => {
    console.log("hello");
    return () => {
      console.log("cleanUp ํ•จ์ˆ˜");
    };
  });

๐Ÿ”ฅ ์œ ์˜์‚ฌํ•ญ

  • useEffect๋Š” ์ฒซ ๋ Œ๋”๋ง ํ›„ ์‹คํ–‰๋œ๋‹ค.
  • ์ตœ์ดˆ์— ํ•œ ๋ฒˆ์€ ๋ฌด์กฐ๊ฑด ์‹คํ–‰๋œ๋‹ค.

useRef

  • ์ปดํฌ๋„ŒํŠธ๋‚˜ HTML์˜ DOM์˜ ์š”์†Œ๋ฅผ ref๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

useMemo & useCallback

  • ์˜์กด์„ฑ ๋ฐฐ์—ด์— ์ ํžŒ ๊ฐ’์ด ๋ณ€ํ•  ๋•Œ๋งŒ ๊ฐ’, ํ•จ์ˆ˜๋ฅผ ๋‹ค์‹œ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ฃผ๋กœ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ•ด์•ผ ํ•˜๋Š” ์ƒํ™ฉ์— ์‚ฌ์šฉํ•œ๋‹ค.
  • ๋ Œ๋”๋ง๋งˆ๋‹ค ์ƒˆ๋กญ๊ฒŒ ํ•จ์ˆ˜๊ฐ€ ์ถ”๊ฐ€๋˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๊ณ  ๊ฐ์‹œ ๋Œ€์ƒ์ด ๋ณ€ํ•˜์ง€ ์•Š๋Š” ์ด์ƒ ํ•จ์ˆ˜๋ฅผ ์ƒˆ๋กญ๊ฒŒ ์ƒ์„ฑํ•˜์ง€ ์•Š๋Š”๋‹ค.
  useCallback(์ฝœ๋ฐฑ, [์˜์กด์„ฑ])

  // ๋ Œ๋”๋ง๋งˆ๋‹ค ๋งค๋ฒˆ ์ƒˆ๋กญ๊ฒŒ ์ƒ์„ฑ๋จ
  const foo = () => {} 
  
  // ๋งค๋ฒˆ ์ƒˆ๋กญ๊ฒŒ ์ƒ์„ฑ๋˜์ง€ ์•Š๋Š”๋‹ค.
  const foo2 = useCallback(() => {}, []) 
  
   // a ๊ฐ’์ด ๋ฐ”๋€Œ์ง€ ์•Š๋Š” ์ด์ƒ ๋งค๋ฒˆ ์ƒˆ๋กญ๊ฒŒ ์ƒ์„ฑ๋˜์ง€ ์•Š๋Š”๋‹ค.
  const foo3 = useCallback(() => {}, [a]) 
  

๐ŸŸก ์ƒํƒœ๊ด€๋ฆฌ

์ƒํƒœ๊ด€๋ฆฌ๋Š” ์ง์ ‘ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์•Œ๊ฒŒ๋œ ํŠน์ง•๋“ค๊ณผ ๋‚˜์˜ ์ƒ๊ฐ๋“ค์„ ๊ฐ™์ด ์ •๋ฆฌ ํ•ด๋ดค์Šต๋‹ˆ๋‹ค.

npm trends๋ผ๋Š” ์‚ฌ์ดํŠธ์—์„œ Redux์™€ Mobx, ๊ทธ๋ฆฌ๊ณ  Recoil์˜ ๋™ํ–ฅ์„ ํŒŒ์•…ํ•ด๋ดค๋Š”๋ฐ ์—ฌ์ „ํžˆ Redux๊ฐ€ ์••๋„์ ์ด๊ธดํ•˜๋‹ค. ์•„๋ฌด๋ž˜๋„ ๋ฆฌ๋•์Šค๊ฐ€ ๊ฐ€์žฅ ์˜ค๋ž˜์ „์— ๋‚˜์™”๊ธฐ ๋•Œ๋ฌธ์— ์˜›๋‚ ์— ๋งŒ๋“ค์–ด์ง„ ํ”„๋กœ์ ํŠธ๋“ค์„ ํ˜„์žฌ๊นŒ์ง€ ์šด์˜ํ•˜๊ณ  ๊ฐœ๋ฐœํ•˜๋ ค๋ฉด ๋ฆฌ๋•์Šค๋ฅผ ์•Œ์•„์•ผ๋˜๋‹ˆ ๊ทธ๋ ‡๋‹ค๊ณ  ๋ณธ๋‹ค. ๊ฐœ์ธ์ ์œผ๋กœ ๋‚˜๋Š” recoil ์ฐฌ์–‘

๐Ÿ“ Redux

action, dispatch, reducer, store๊ฐ€ ์žˆ๋‹ค.

  • action : action์€ ์ƒํƒœ(state)๋ฅผ ๋ฐ”๊พธ๋Š” ๋ฐฉ์‹์ด๋‹ค. ๋ฐ˜๋“œ์‹œ typeํ•„๋“œ๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค.
  • dispatch : action์„ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ๊ฒƒ์œผ๋กœ action ๊ฐ์ฒด๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋ฐ›๋Š”๋‹ค.
  • reducer : ๋ณ€ํ™”๋ฅผ ์ผ์œผํ‚ค๋Š” ํ•จ์ˆ˜๋กœ action์˜ ๊ฒฐ๊ณผ๋กœ ์ƒํƒœ๋ฅผ ์–ด๋–ค ์‹์œผ๋กœ ๋ฐ”๊ฟ€์ง€ ๊ตฌ์ฒด์ ์œผ๋กœ ์ •์˜ํ•˜๋Š” ๋ถ€๋ถ„
  • store : ๋ฆฌ๋•์Šค๋ฅผ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•œ ์ค‘์•™ ์ €์žฅ์†Œ ์ด๋ฉฐ, ๋‹จ ํ•œ ๊ฐœ๋งŒ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค.
    ์ƒํƒœ๋ฅผ ์ฝ์„ ๋•Œ๋Š” getState() ์ƒํƒœ๋ฅผ ๋ฐ”๊ฟ€ ๋•Œ๋Š” dispatch()๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค.
  • ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ๋‹จ๋ฐฉํ–ฅ์œผ๋กœ ํ๋ฅด๊ฒŒ ํ•œ๋‹ค.
  • ์ƒํƒœ๋ฅผ ์ „์—ญ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์–ด๋Š ์ปดํฌ๋„ŒํŠธ์— ์ƒํƒœ๋ฅผ ๋‘ฌ์•ผํ• ์ง€ ๊ณ ๋ฏผํ•  ํ•„์š”๊ฐ€ ์—†๊ฒŒ ํ•œ๋‹ค.
  • ์ƒํƒœ๊ด€๋ฆฌ์—์„œ ๋ถˆ๋ณ€์„ฑ ์œ ์ง€๊ฐ€ ๋งค์šฐ ์ค‘์š”ํ•˜๋‹ค.
    Spread ๋ฐฉ์‹(...) ๋ณด๋‹ค ์ข€๋” ๊น”๋”ํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” immer.js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ถˆ๋ณ€์„ฑ ์œ ์ง€๋ฅผ ํ•ด์ค„ ์ˆ˜ ์žˆ๋‹ค.
  • flux ์•„ํ‚คํ…์ฒ˜๋ฅผ ๋”ฐ๋ฅธ๋‹ค.
    ๐Ÿ”ฅ flux ๊ตฌ์กฐ๋ž€ ? ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ๊ฐ€์ง€๋Š” ๊ตฌ์กฐ.
    ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฅผ ๋„ฃ์œผ๋ฉด ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ์‹œ์ž‘๋˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์„ค๊ณ„๋˜์–ด์žˆ๋‹ค.
  • ๋ฐ์ดํ„ฐ ํ๋ฆ„์€ dispatch -> store -> view ์ˆœ์„œ์ด๋‹ค. view์—์„œ ์ž…๋ ฅ์ด ๋ฐœ์ƒํ•˜๋ฉด ์•ก์…˜์„ ํ†ตํ•ด ๋””์ŠคํŒจ์น˜๋กœ ํ–ฅํ•˜๊ฒŒ ๋œ๋‹ค.
  • ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ์‹œ redux-saga๋‚˜ redux-thunk๊ฐ™์€ ๋ฏธ๋“ค์›จ์–ด๊ฐ€ ํ•„์ˆ˜์ด๋‹ค.
  • ์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋‹ˆ ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ๋†’์€ ํŽธ
  • ์•ก์…˜ ํ•˜๋‚˜ ์ถ”๊ฐ€ํ•˜๋Š”๋ฐ ์ž‘์„ฑ์ด ํ•„์š”ํ•œ ๋ถ€๋ถ„์ด ๋งŽ๊ณ  ์ปดํฌ๋„ŒํŠธ์™€ ์Šคํ† ์–ด๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ํ•„์ˆ˜์ ์ธ ๋ถ€๋ถ„๋“ค์ด ์žˆ์–ด์„œ ์ฝ”๋“œ๋Ÿ‰์ด ์ƒ๋Œ€์ ์œผ๋กœ ๋งŽ์•„์ง„๋‹ค.

๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ์ด์œ  ?

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

๐Ÿ“ Mobx

  • ๋ฆฌ๋•์Šค์™€ ๋‹ค๋ฅด๊ฒŒ ์Šคํ† ์–ด์— ์ œํ•œ์ด ์—†๋‹ค. ์—ฌ๋Ÿฌ๊ฐœ์—ฌ๋„ ์ƒ๊ด€ ์—†์Œ.
    observable์„ ๊ธฐ๋ณธ์ ์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
  • ์ ˆ๋Œ€์ ์œผ๋กœ ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋งŒ state๋ฅผ ๋ณ€๊ฒฝํ•œ๋‹ค.
  • ๊ฐ์ฒด ์ง€ํ–ฅ์ ์ด๋‹ค. OOP ๋ฅผ ๋”ฐ๋ฆ„. ๊ทธ๋ž˜์„œ ์„œ๋ฒ„ ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ์นœ์ˆ™ํ•œ ์•„ํ‚คํ…์ณ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค. ํŠนํžˆ ์ž๋ฐ” ์Šคํ”„๋ง๊ณผ ์œ ์‚ฌํ•˜๋‹ค.
  • ๋ฆฌ๋•์Šค์˜ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ๊ฐ€ ์‚ฌ๋ผ์ง€๊ณ  ๋ฐ์ฝ”๋ ˆ์ดํ„ฐ๋ฅผํ†ตํ•ด ๊น”๋”ํ•œ ์ฝ”๋“œ ์ž‘์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ๋ณด์ผ๋Ÿฌ ํ”Œ๋ ˆ์ดํŠธ๋ž€ ? ๋ฐ˜๋ณต์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๋ถ€๋ถ„์„ ์žฌ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธ
  • State์˜ ๋ถˆ๋ณ€์„ฑ ์œ ์ง€๋ฅผ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค. ๋ฆฌ๋•์Šค์™€ ๋น„๊ตํ–ˆ์„ ๋•Œ ๋ฆฌ๋•์Šค์—์„œ๋Š” state์˜ ๋ถˆ๋ณ€์„ฑ ์œ ์ง€๋ฅผ ์œ„ํ•ด ์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(immer)๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•˜๋Š”๋ฐ, mobx์—์„œ๋Š” ๊ทธ๋Ÿฌ์ง€ ์•Š์•„๋„ ๋œ๋‹ค.

๐Ÿ“ Recoil

  • ํŽ˜์ด์Šค๋ถ์—์„œ ๋งŒ๋“  ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • ๊ฐ€์žฅ ๋ฆฌ์•กํŠธ์Šค๋Ÿฝ๋‹ค. ๋ฆฌ์•กํŠธ hooks์˜ ๋Š๋‚Œ์œผ๋กœ ์นœ์ˆ™ํ•˜๊ฒŒ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ์Œ
    ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ๊ต‰์žฅํžˆ ๋‚ฎ๋‹ค.
  • ์ดˆ๊ธฐ ์„ธํŒ…์ด ์ •๋ง ๊ฐ„ํŽธํ•˜๊ณ  recoil ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์™ธ์— ๋”ฐ๋กœ ์„ค์น˜ํ•ด์•ผ ๋  ๊ฒƒ๋“ค์ด ์—†์–ด์„œ ์ข‹๋‹ค.
  • atom, selector ๊ธฐ๋Šฅ๋งŒ ์•Œ๊ณ ์žˆ๋‹ค๋ฉด ๊ตฌํ˜„ ์Œ‰๊ฐ€๋Šฅ
  • ์ด๊ฒƒ๋„ mobx ์ฒ˜๋Ÿผ ์ž์œ ๋กœ์›Œ์„œ ํ˜‘์—…์ž๋“ค๊ณผ ๋ฃฐ ์ •ํ•ด์„œ ์ž‘์—…ํ•ด์•ผํ•œ๋‹ค.
  • ๋””๋ฒ„๊น… ๋„๊ตฌ ์ง€์›์ด ๋ฏธ๋ฏธํ•˜๋‹ค.
  • ์ง๊ด€์ ์ด๊ณ  ๋‹จ์ˆœํ•œ ํŽธ์ด๋‹ค.

๐Ÿ“ React-query

  • ๋ฐ์ดํ„ฐ ํŽ˜์นญ ํˆด
  • ๋กœ๋”ฉ ๋ฐ ์˜ค๋ฅ˜ ์ƒํƒœ ๊ด€๋ฆฌ (๋ฐ์ดํ„ฐ๊ฐ€ ๋กœ๋”ฉ๋˜์—ˆ์„ ๋•Œ์™€ ์˜ค๋ฅ˜ ๋ฐœ์ƒ์‹œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์•Œ๋ ค์ค€๋‹ค)
  • ๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ํ†ตํ•ด ์ฟผ๋ฆฌ์— ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚ฌ๋Š”์ง€ ์ถ”์ ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์— Pagination ๊ธฐ๋Šฅ์„ ์จ์„œ ๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ์—์„œ ์–ด๋–ป๊ฒŒ ์ž‘์—…ํ•˜๋Š” ์ง€ ์•Œ ์ˆ˜ ์žˆ๋‹ค
  • Pagination ์— ํ”„๋ฆฌํŒจ์นญ(Prefetching)์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค.
    ํ”„๋ฆฌํŒจ์นญ(Prefetching)์ด๋ž€ ? ๋‹ค์Œ ํŽ˜์ด์ง€๋ฅผ ๋ฏธ๋ฆฌ ๊ฐ€์ ธ์˜ค๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ค์Œ ํŽ˜์ด์ง€๋ฅผ ํด๋ฆญ ํ•  ๋•Œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฆ‰์‹œ ๊ฐ€์ ธ์˜ค๊ธฐ ๋•Œ๋ฌธ์— ๋งค๋„๋Ÿฝ๊ฒŒ ์ฒ˜๋ฆฌ๋˜๋„๋ก ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐ŸŸก ํ”„๋ ˆ์ž„์›Œํฌ Nextjs

๐Ÿ“Next์—์„œ ์ œ๊ณตํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ๋“ค

  • ์ฝ”๋“œ๋ฅผ ๊ณ ์น˜๋Š”๋Œ€๋กœ ๋ณ€๊ฒฝ๋˜๋Š” ํ•ซ ๋ฆฌ๋กœ๋”ฉ์ด ํƒ‘์žฌ๋˜์–ด์žˆ๋‹ค.
  • pages/product/[slug] ๋ผ๋Š” ํ‘œ๊ธฐ๋กœ ๋‹ค์ด๋‚˜๋ฏนํ•˜๊ฒŒ path๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.
  • ์†์‰ฌ์šด ๋ฐฐํฌ ์‹œ์Šคํ…œ Vercel ์ œ๊ณต
  • ํ”„๋ก ํŠธ์—”๋“œ์— ํ•„์š”ํ•œ ๊ฐ„๋‹จํ•œ API ๊ตฌ์„ฑ
  • SEO ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™” (์‚ฌ์šฉ์ž๋“ค์ด ํ›จ์”ฌ ๋” ์‰ฝ๊ฒŒ ์›น์„œ๋น„์Šค๋ฅผ ์ฐพ์•„๊ฐˆ ์ˆ˜ ์žˆ๋„๋ก)
  • ์ฝ”๋“œ ๋ถ„ํ•  (์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…) ์œผ๋กœ ํ•˜์—ฌ๊ธˆ ๋ Œ๋”๋ง ์†๋„๊ฐ€ ๋น ๋ฅด๋‹ค.
  • ํŒŒ์ผ ๊ธฐ๋ฐ˜ ๊ตฌ์กฐ /pages/main
  • pre-fetching

๐Ÿ“SEO(๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”)

๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ์ƒ์œ„์— ๋…ธ์ถœ๋  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ์ž‘์—…์„ ๋งํ•œ๋‹ค.


๐Ÿ“SSR (์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง)

  • ์„œ๋ฒ„๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ๊ทธ๋ฆฐ๋‹ค.

์žฅ์ 

  • ๊ตฌ๊ธ€, ๋„ค์ด๋ฒ„, ๋‹ค์Œ ๋“ฑ์˜ ๊ฒ€์ƒ‰ ์—”์ง„์ด ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“  ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํŽ˜์ด์ง€๋ฅผ ์›ํ™œํ•˜๊ฒŒ ์ˆ˜์ง‘ํ•ด์ค€๋‹ค.
    โœ” ๋”ฐ๋ผ์„œ ์›น ์„œ๋น„์Šค์˜ ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•ด์„œ๋ผ๋ฉด ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์„ ๊ตฌํ˜„ ํ•ด์ฃผ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
  • ์ดˆ๊ธฐ ๋ Œ๋”๋ง ์„ฑ๋Šฅ์„ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค.
    ์˜ˆ๋ฅผ๋“ค๋ฉด, SSR์ด ๊ตฌํ˜„๋˜์ง€ ์•Š์€ ์›น ํŽ˜์ด์ง€์— ์‚ฌ์šฉ์ž๊ฐ€ ๋ฐฉ๋ฌธํ•˜๋ฉด, JS๊ฐ€ ๋กœ๋”ฉ๋˜๊ณ  ์‹คํ–‰๋  ๋•Œ ๊นŒ์ง€ ์‚ฌ์šฉ์ž๋Š” ๋น„์–ด ์žˆ๋Š” ํŽ˜์ด์ง€๋ฅผ ๋ณด๋ฉฐ ๋Œ€๊ธฐํ•ด์•ผํ•œ๋‹ค.
    ์—ฌ๊ธฐ์— API๊นŒ์ง€ ํ˜ธ์ถœํ•ด์•ผ ํ•œ๋‹ค๋ฉด ์‚ฌ์šฉ์ž์˜ ๋Œ€๊ธฐ ์‹œ๊ฐ„์€ ๋”๋”์šฑ ๊ธธ์–ด์ง„๋‹ค.
    ๋ฐ˜๋ฉด ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์„ ๊ตฌํ˜„ํ•œ ์›น ํŽ˜์ด์ง€๋ผ๋ฉด JS ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ๊ฐ€ ์™„๋ฃŒ๋˜์ง€ ์•Š์€ ์‹œ์ ์—์„œ๋„ HTML์ƒ์— ์‚ฌ์šฉ์ž๊ฐ€ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์ฝ˜ํ…์ธ ๊ฐ€ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋Œ€๊ธฐ ์‹œ๊ฐ„์ด ์ตœ์†Œํ™”๋˜๊ณ , ์ด๋กœ ์ธํ•ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜๋„ ํ–ฅ์ƒ๋œ๋‹ค.

๋‹จ์ 

  • SSR์€ ๊ฒฐ๊ตญ ์›๋ž˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•ด์•ผ ํ•  ์ผ์„ ์„œ๋ฒ„๊ฐ€ ๋Œ€์‹  ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์ด๋ฏ€๋กœ ์„œ๋ฒ„ ๋ฆฌ์†Œ์Šค๊ฐ€ ์‚ฌ์šฉ๋œ๋‹ค.
  • ์ˆ˜๋งŽ์€ ์‚ฌ์šฉ์ž๊ฐ€ ๋™์‹œ์— ์›น ํŽ˜์ด์ง€์— ์ ‘์†ํ•˜๋ฉด ์„œ๋ฒ„์— ๊ณผ๋ถ€ํ•˜๊ฐ€ ์ƒ๊น€.
    โœ” ํ•ด๊ฒฐ๋ฐฉ์•ˆ : ์‚ฌ์šฉ์ž๊ฐ€ ๋งŽ์€ ์„œ๋น„์Šค๋ผ๋ฉด ์บ์‹ฑ๊ณผ ๋กœ๋“œ ๋ฐธ๋Ÿฐ์‹ฑ์„ ํ†ตํ•ด ์„ฑ๋Šฅ์„ ์ตœ์ ํ™” ํ•ด์ค˜์•ผํ•œ๋‹ค.
  • ๊ฐœ๋ฐœ์ด ์–ด๋ ค์›Œ ์งˆ ์ˆ˜ ์žˆ๋‹ค.
    SSR์„ ํ•˜๋ฉด ํ”„๋กœ์ ํŠธ์˜ ๊ตฌ์กฐ๊ฐ€ ์ข€ ๋” ๋ณต์žกํ•ด์งˆ ์ˆ˜ ์žˆ๊ณ , ๋ฐ์ดํ„ฐ ๋ฏธ๋ฆฌ ๋ถˆ๋Ÿฌ์˜ค๋Š” ํ”„๋ฆฌํŒจ์นญ๊ณผ ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ… ์˜ ํ˜ธํ™˜ ๋“ฑ ๊ณ ๋ คํ•ด์•ผ ํ•  ์‚ฌํ•ญ์ด ๋” ๋งŽ์•„์ง€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
  • SSR์„ ๋‹ด๋‹นํ•˜๋Š” ํ•จ์ˆ˜ : getServerSideProps
  • ์ฒซ ํŽ˜์ด์ง€์˜ ๋กœ๋”ฉ์‹œ๊ฐ„์ด CSR์— ๋น„ํ•ด ์งง๋‹ค.
    ์ด๋ฏธ ๋ Œ๋”๋ง๋œ ํŽ˜์ด์ง€๋ฅผ ์„œ๋ฒ„์—์„œ ๋ฐ›์•„์„œ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
  • SEO ์ธก๋ฉด์—์„œ๋„ ์œ ๋ฆฌํ•˜๋‹ค.
    ๊ฒ€์ƒ‰์—”์ง„์ด ํฌ๋กค๋ง์„ ํ•  ๋•Œ ์„œ๋ฒ„์— ์ด๋ฏธ ํ•˜๋“œ์ฝ”๋”ฉ๋œ html ํŒŒ์ผ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฒ€์ƒ‰์—”์ง„์ด ์ด ํŽ˜์ด์ง€๊ฐ€ ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€ ํŒŒ์•…ํ•˜๋Š”๋ฐ ์šฉ์ดํ•˜๋‹ค.
  • SSR์€ ์„œ๋ฒ„ ๋ถ€ํ•˜๊ฐ€ ์ผ์–ด๋‚˜๋‹ˆ ํ•„์š”์— ๋”ฐ๋ผ SSG์™€ ISR์„ ์ ์ ˆํ•˜๊ฒŒ ์“ฐ๋ฉด ์ข‹๋‹ค.

๐Ÿ“CSR (Client Side Render)

  • ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ๊ทธ๋ฆฐ๋‹ค.
  • ์ฒ˜์Œ ๋กœ๋”ฉ์‹œ jsํŒŒ์ผ์˜ ์šฉ๋Ÿ‰์ด ํด์ˆ˜๋ก ๋กœ๋”ฉ์‹œ๊ฐ„์ด ๊ธธ๋‹ค.
    ํ•˜์ง€๋งŒ ์ดˆ๊ธฐ์— ๋กœ๋”ฉ์ด ๋˜๊ณ ๋‚˜๋ฉด ํŽ˜์ด์ง€ ๊ฐ„ ์ด๋™ ์‹œ ๋งค์šฐ ๋น ๋ฅธ ์†๋„๋กœ ์ „ํ™˜๋˜๊ณ , ํŽ˜์ด์ง€ ์ด๋™ ์‹œ ์ƒˆ๋กœ๊ณ ์นจ๋˜๋Š” ํ˜„์ƒ๋„ ์‚ฌ๋ผ์ง„๋‹ค.

๐Ÿ“SSG (Statice-Site Generation)

  • ์ •์ ์ธ ์‚ฌ์ดํŠธ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค : ์ •์ ์ธ ์‚ฌ์ดํŠธ๋ฅผ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ๊ทธ๋ ค์ค€๋‹ค.
    SSG์„ ๋‹ด๋‹นํ•˜๋Š” ํ•จ์ˆ˜๋กœ๋Š” getStaticProps๋ผ๋Š” ํ•จ์ˆ˜๊ฐ€ ์žˆ๋‹ค.
    ์–ธ์ œ์“ฐ์ด๋‚˜ ? ๋ธ”๋กœ๊ทธ ๊ฐ™์ด ์ •์ ์ผ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค์„ ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•œ๋‹ค.

๐Ÿ“ISR (Incremental Static Regeneration)

  • ์ฆ๋ถ„ ์ •์  ์‚ฌ์ดํŠธ๋ฅผ ์žฌ์ƒ์„ฑ ํ•œ๋‹ค. (ํŠน์ • ์ฃผ๊ธฐ๋กœ) ์ •์ ์ธ ์‚ฌ์ดํŠธ์— ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™€์„œ ๋‹ค์‹œ ๊ทธ๋ ค์ค€๋‹ค.
    ์ด๊ฑธ ๋‹ด๋‹นํ•˜๋Š” ํ•จ์ˆ˜๋Š” getStaticProps ๋ผ๋Š” ํ•จ์ˆ˜๋‹ค.
    ๊ฐ’์„ ๋ฆฌํ„ดํ•˜๋ฉด์„œ ๋™์ž‘ํ•œ๋‹ค.

๐ŸŸก ํ™˜๊ฒฝ์„ธํŒ…

๐Ÿ“Webpack

  • ์›นํŒฉ์ด๋ž€ ์ตœ์‹  ํ”„๋ŸฐํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ(Module Bundler)์ž…๋‹ˆ๋‹ค. ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ๋ž€ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์„ฑํ•˜๋Š” ์ž์›(HTML, CSS, Javscript, Images ๋“ฑ)์„ ๋ชจ๋‘ ๊ฐ๊ฐ์˜ ๋ชจ๋“ˆ๋กœ ๋ณด๊ณ  ์ด๋ฅผ ์กฐํ•ฉํ•ด์„œ ๋ณ‘ํ•ฉ๋œ ํ•˜๋‚˜์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“œ๋Š” ๋„๊ตฌ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค

์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

  1. ํŒŒ์ผ ๋‹จ์œ„์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“ˆ ๊ด€๋ฆฌ์˜ ํ•„์š”์„ฑ
  2. ์›น ๊ฐœ๋ฐœ ์ž‘์—… ์ž๋™ํ™” ๋„๊ตฌ
  3. ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋น ๋ฅธ ๋กœ๋”ฉ ์†๋„์™€ ๋†’์€ ์„ฑ๋Šฅ

๐Ÿ“Pritter

ํ˜‘์—…์„ ํ•˜๊ฒŒ ๋  ๋•Œ, ์ผ๊ด€์„ฑ ์žˆ๋Š” ์ฝ”๋“œ ์Šคํƒ€์ผ์€ ์ •๋ง ์ค‘์š”ํ•˜๋‹ค.
๊ทธ๋ž˜์„œ ์ผ๊ด€์„ฑ ์žˆ๋Š” ์ฝ”๋“œ ์Šคํƒ€์ผ ๊ทœ์น™๋งŒ ์„ค์ •ํ•ด์ฃผ๋ฉด ์•Œ์•„์„œ ์ž๋™์œผ๋กœ ๊ทธ ๊ทœ์น™์— ๋งž๊ฒŒ ์ฝ”๋“œ๋“ค์„ ์ •๋ฆฌํ•ด์ค€๋‹ค.

๐Ÿ“Babel

  • ์ตœ์‹  ๋ฌธ๋ฒ•์„ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํ†ต์—ญ
  • ๋ธŒ๋ผ์šฐ์ €๋Š” JSX๋ฅผ ์ดํ•ดํ•˜์ง€ ๋ชปํ•œ๋‹ค.
    ๊ทธ๋Ÿฌ๋‹ˆ ๋ฐ”๋ฒจ์ด๋ผ๋Š” ํ†ต์—ญ์‚ฌ๋กœ JSX -> Javascript

๐Ÿ“Eslint

ESLint๊ฐ€ ์ฝ”๋“œ ํ€„๋ฆฌํ‹ฐ๋ฅผ ์ผ๊ด€์ ์œผ๋กœ ์œ ์ง€
๋ฌธ๋ฒ• ์—๋Ÿฌ๋ฅผ ์žก์•„์ฃผ๊ฑฐ๋‚˜ ๋” ์ข‹์€ ์ฝ”๋“œ ๊ตฌํ˜„ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋„๋ก ํ•ด์ค€๋‹ค.

์ฐธ๊ณ ์ž๋ฃŒ
https://velopert.com/3236
https://yeoulcoding.me/147
https://velog.io/@velopert/react-hooks
https://hsp0418.tistory.com/171

profile
์•„๋Š‘ํ•œ ๋‡Œ๊ณต๊ฐ„ ๐Ÿง 

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

comment-user-thumbnail
2023๋…„ 3์›” 17์ผ

This article is really amazing. Thanks for the sharing.

Dashboard Anywhere

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
์–ด์ œ

Welcome to Escorts in Bangalore, where youโ€™ll find the best escort services around. It doesnโ€™t matter if you're an Indian businessman or just visiting from abroad, our girls can cater to all your needs. http://www.modelbangaloreescorts.com/ We have a variety of types of escorts in Bangalore that can suit your every need, whether you want someone to show you around town or are looking for a more intimate encounter.

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ