Skip to content

Files

Latest commit

Sep 6, 2024
ff76f5b ยท Sep 6, 2024

History

History
237 lines (151 loc) ยท 7.14 KB

Interview_practice_16.md

File metadata and controls

237 lines (151 loc) ยท 7.14 KB

action, store ๋“ฑ์— ๋Œ€ํ•œ ๊ฐœ๋…์„ ๋‹ค์–‘ํ•œ ๊ด€์ ์—์„œ ์ •๋ฆฌ

Flux ํŒจํ„ด

๋“ฑ์žฅ ๋ฐฐ๊ฒฝ

๋Œ€๊ทœ๋ชจ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ์ผ๊ด€์„ฑ์žˆ๊ฒŒ ๊ด€๋ฆฌํ•จ์œผ๋กœ์จ ์˜ˆ์ธก ๊ฐ€๋Šฅ์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•จ

๊ธฐ์กด์—” MVC ํŒจํ„ด ์‚ฌ์šฉ..

โ†’ ๋ฌธ์ œ์  ๋“ฑ์žฅ

  • Model์— ๋ฐ์ดํ„ฐ ์ €์žฅํ•˜๊ณ  Controller๋ฅผ ์ด์šฉํ•ด Model์˜ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ
  • ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๋ฉด ๋ณต์žกํ•œ ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ๊ฐ€์ง€๊ฒŒ ๋Œ

์š”๋žฌ๋Š”๋ฐ..

์š”๋žฌ๋Š”๋ฐ..

์š”๋ ‡๊ฒŒ ๋˜๋ฒ„๋ฆผ

์š”๋ ‡๊ฒŒ ๋˜๋ฒ„๋ฆผ

flux ํŒจํ„ด?

์‚ฌ์šฉ์ž ์ž…๋ ฅ์„ ๊ธฐ๋ฐ˜์œผ๋กœ action์„ ๋งŒ๋“ค๊ณ  action์„ dispatcher์— ์ „๋‹ฌํ•ด store์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€๊ฒฝํ•œ ํ›„ view์— ๋ฐ˜์˜ํ•˜๋Š” ๋‹จ๋ฐฉํ–ฅ ํ๋ฆ„์œผ๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“œ๋Š” ์•„ํ‚คํ…์ฒ˜

image.png

  • action: ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ํ–‰์œ„๋กœ์„œ dispatcher์—๊ฒŒ ์ „๋‹ฌ๋˜๋Š” ๊ฐ์ฒด

  • action creator: ์ƒˆ๋กœ ๋ฐœ์ƒํ•œ action์˜ ํƒ€์ž…๊ณผ ์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฌถ์–ด dispatcher์—๊ฒŒ ์ „๋‹ฌ

    {
    	type: 'SET_PROFILE'
    	data: {
    		'name': 'Harry',
    		'age': '11'
    	}
    }
  • dispatcher: ๋ชจ๋“  ๋ฐ์ดํ„ฐ์˜ ํ๋ฆ„์„ ๊ด€๋ฆฌํ•˜๋Š” ์ค‘์•™ ํ—ˆ๋ธŒ

  • store(model): ์ƒํƒœ ์ €์žฅ์†Œ๋กœ์„œ ์ƒํƒœ์™€ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์ง

  • view: ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ

  • action โ†’ dispatcher โ†’ model โ†’ view โ†’ action โ†’ dispatcher โ€ฆ (์ˆœํ™˜๊ตฌ์กฐ)

Redux

์ •์˜

๐Ÿ”จ

JavaScript ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

โ†’ Redux์˜ ๋ณธ์งˆ์€ Node.js

โ†’ ์ปดํฌ๋„ŒํŠธ์™€ ์ƒํƒœ๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ํŒจํ„ด์„ ์จ์„œ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ํŽธํ•˜๊ฒŒ ๋„์™€์ฃผ๋Š” ๋„๊ตฌ

โ†’ flux ํŒจํ„ด์—์„œ ์˜๊ฐ์„ ๋ฐ›์•„ ๋” ๋‹จ์ˆœํ™”ํ•˜๊ณ  ๊ตฌ์กฐํ™”๋œ ํ˜•ํƒœ๋กœ ๋ฐœ์ „

  • ๋ณต์žก์„ฑ ์ค„์ž„
  • ๋‹จ์ผ store๊ณผ reducer ๊ฐœ๋… ๋„์ž…
  • ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ๋” ๋‹จ์ˆœํ™”ํ•˜๊ณ  ๋””๋ฒ„๊น…๊ณผ ์œ ์ง€๋ณด์ˆ˜ ๋” ์‰ฝ๊ฒŒ ๋งŒ๋“ฆ

์„ธ ๊ฐ€์ง€ ์›์น™

Single source of truth

  • ๋™์ผํ•œ ๋ฐ์ดํ„ฐ๋Š” ํ•ญ์ƒ ๊ฐ™์€ ๊ณณ์—์„œ ๊ฐ€์ง€๊ณ  ์˜ด
  • ์Šคํ† ์–ด๋ผ๋Š” ํ•˜๋‚˜๋ฟ์ธ ๋ฐ์ดํ„ฐ ๊ณต๊ฐ„์ด ์žˆ๋‹ค๋Š” ์˜๋ฏธ

*์Šคํ† ์–ด: ์ƒํƒœ๊ฐ€ ๊ด€๋ฆฌ๋˜๋Š” ์˜ค์ง ํ•˜๋‚˜์˜ ๊ณต๊ฐ„

State is read-only

  • ๋ฆฌ์•กํŠธ์—์„  setState ๋ฉ”์†Œ๋“œ๋ฅผ ํ™œ์šฉํ•ด์•ผ๋งŒ ์ƒํƒœ ๋ณ€๊ฒฝ์ด ๊ฐ€๋Šฅ
  • ๋ฆฌ๋•์Šค์—๋„ ์•ก์…˜์ด๋ผ๋Š” ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด์„œ๋งŒ ์ƒํƒœ ๋ณ€๊ฒฝ์ด ๊ฐ€๋Šฅ

*์•ก์…˜: ์•ฑ์—์„œ ์Šคํ† ์–ด์— ์šด๋ฐ˜ํ•  ๋ฐ์ดํ„ฐ

Changes are made with pure functions

  • ๋ณ€๊ฒฝ์€ ์ˆœ์ˆ˜ ํ•จ์ˆ˜๋กœ๋งŒ ๊ฐ€๋Šฅ
  • ๋ฆฌ๋“€์„œ์™€ ์—ฐ๊ด€๋˜๋Š” ๊ฐœ๋…
  • store - action - reducer

*๋ฆฌ๋“€์„œ: ์•ก์…˜์„ ์Šคํ† ์–ด์— ๋ฐ”๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ์•ก์…˜์„ ๋ฆฌ๋“€์„œ์— ์ „๋‹ฌํ•ด์•ผํ•จ

*๋ฆฌ๋“€์„œ๊ฐ€ ์ฃผ๋ฌธ์„ ๋ณด๊ณ  ์Šคํ† ์–ด์˜ ์ƒํƒœ ์—…๋ฐ์ดํŠธ

ํ๋ฆ„

image.png

โžก๏ธ

Action โ†’ Dispatch โ†’ Reducer โ†’ Store

Action

  • state๋ฅผ ๋ฐ”๊พธ๋Š” ๋ฐฉ์‹
  • ์•ก์…˜ ๊ฐ์ฒด๋ฅผ ๊ฐ€์ง
  • ๋ฐ˜๋“œ์‹œ type ํ•„๋“œ ํ•„์š”

Dispatch

  • action์„ ๋ฐœ์ƒ์‹œํ‚ค๋Š” ๊ฒƒ
  • action ๊ฐ์ฒด๋ฅผ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ๋ฐ›์Œ

Reducer

  • ๋ณ€ํ™”๋ฅผ ์ผ์œผํ‚ค๋Š” ํ•จ์ˆ˜
  • action์˜ ๊ฒฐ๊ณผ๋กœ state๋ฅผ ์–ด๋–ค์‹์œผ๋กœ ๋ฐ”๊ฟ€์ง€ ๊ตฌ์ฒด์ ์œผ๋กœ ์ •์˜

Store

  • ํ”„๋กœ์ ํŠธ์— ๋ฆฌ๋•์Šค๋ฅผ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๊ฒƒ
  • ํ”„๋กœ์ ํŠธ์—” ๋‹จ ํ•œ๊ฐœ์˜ stroe๋งŒ ๊ฐ€์ง
  • ์ƒํƒœ์˜ ์ค‘์•™์ €์žฅ์†Œ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Œ
  • reducer, dispatch ๋“ฑ์ด ์Šคํ† ์–ด์˜ ๋‚ด์žฅํ•จ์ˆ˜๋กœ ํฌํ•จ๋˜์–ด์žˆ์Œ
๐Ÿ’ก
  1. ์ƒํƒœ ๋ณ€๊ฒฝ๋˜์–ด์•ผ ํ•˜๋Š” ์ด๋ฒคํŠธ ๋ฐœ์ƒ์‹œ ๋ณ€๊ฒฝ๋  ์ƒํƒœ์— ๋Œ€ํ•œ ์ •๋ณด๊ฐ€ ๋‹ด๊ธด action ๊ฐ์ฒด ์ƒ์„ฑ
  2. ์ด action ๊ฐ์ฒด๋Š” dispatch ํ•จ์ˆ˜์˜ ์ธ์ž๋กœ ์ „๋‹ฌ
  3. dispatch ํ•จ์ˆ˜๋Š” action ๊ฐ์ฒด๋ฅผ reducer ํ•จ์ˆ˜๋กœ ์ „๋‹ฌ
  4. reducer ํ•จ์ˆ˜๋Š” action ๊ฐ์ฒด์˜ ๊ฐ’ ํ™•์ธ ํ›„ ๊ทธ ๊ฐ’์— ๋”ฐ๋ผ ์ „์—ญ ์ƒํƒœ ์ €์žฅ์†Œ store ์ƒํƒœ ๋ณ€๊ฒฝ
  5. ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด react๋Š” ํ™”๋ฉด ์žฌ๋ Œ๋”๋ง

์žฅ์ 

  • ์ˆœ์ˆ˜ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด ์ƒํƒœ๋ฅผ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ฆ
  • ์œ ์ง€๋ณด์ˆ˜์— ์šฉ์ด
  • redux dev tool์ด ์žˆ์–ด ๋””๋ฒ„๊น…์— ์œ ๋ฆฌ
  • ๋น„๋™๊ธฐ๋ฅผ ์ง€์›ํ•˜๋Š” Redux Saga, Redux Thunk ๋“ฑ ๋‹ค์–‘ํ•œ ๋ฏธ๋“ค์›จ์–ด๊ฐ€ ์กด์žฌ
  • ์•ก์…˜์— ๋”ฐ๋ฅธ ๋ชจ๋“  ๋ณ€๊ฒฝ ์ถ”์  ๊ฐ€๋Šฅ

๋‹จ์ 

  • ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฐ€์žฅ ์งง๊ฑฐ๋‚˜ ๋น ๋ฅธ ๋ฐฉ๋ฒ•์€ ์•„๋‹˜
  • ๋ฐฐ์›Œ์•ผ ํ•  ๊ฐœ๋…๊ณผ ์ž‘์„ฑํ•ด์•ผ ํ•  ์ฝ”๋“œ๊ฐ€ ๋งŽ์Œ
  • ๋ฆฌ๋•์Šค๋ฅผ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ๋งŽ์€ ํŒจํ‚ค์ง€ ์ถ”๊ฐ€ํ•ด์•ผํ•จ

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

  • ๋ฏธ๋“ค์›จ์–ด
    • ๋ฏธ๋“ค์›จ์–ด๋ฅผ ํ†ตํ•ด ๋น„๋™๊ธฐ ์ž‘์—…์— ๋Œ€ํ•œ ์ข€ ๋” ๋””ํ…Œ์ผํ•˜๊ณ  ํŽธํ•œ ์ปจํŠธ๋กค ๊ฐ€๋Šฅ
    • ex: Redux-saga
      • ์š”์ฒญ์„ ์—ฐ๋‹ฌ์•„ ์—ฌ๋Ÿฌ๋ฒˆ ํ•˜๊ฒŒ ๋  ๋•Œ ์ด์ „ ์š”์ฒญ์€ ๋ฌด์‹œํ•˜๊ณ  ๋งˆ์ง€๋ง‰ ์š”์ฒญ๋งŒ ์ฒ˜๋ฆฌํ•˜๊ณ  ์‹ถ์„ ๋•Œ
      • ํŠน์ • ์กฐ๊ฑด์ด ๋งŒ์กฑ๋์„ ๋•Œ ์ด์ „์— ์‹œ์ž‘ํ•œ ์š”์ฒญ์„ ์ทจ์†Œํ•˜๋Š” ์ƒํ™ฉ
      • ์ปดํฌ๋„ŒํŠธ ๋ฐ–์—์„œ ์–ด๋–ค ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ๋•Œ
  • ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง
    • api ์š”์ฒญ ๊ฒฐ๊ณผ๋ฅผ ์‚ฌ์šฉํ•ด ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์„ ํ•  ๋•Œ ์œ ์šฉ (๋ฏธ๋“ค์›จ์–ด๊ฐ€ ์œ ์šฉ)
  • ํ…Œ์ŠคํŒ…์ด ์šฉ์ด
    • ๋ฆฌ๋•์Šค๋ฅผ ์‚ฌ์šฉํ•œ ์•ฑ์€ ํ…Œ์ŠคํŠธ ํ•˜๊ธฐ๊ฐ€ ๋น„๊ต์  ์‰ฌ์›€

Recoil๊ณผ ์ฐจ์ด

์žฅ๋‹จ์ 

Recoil

์žฅ์ 

  • ์ง๊ด€์ ์ด๋ฉด์„œ ๊ฐ„๋‹จํ•œ ๊ตฌ์กฐ
  • ์ฝ”๋“œ์˜ ์–‘์ด ๋งค์šฐ ์ค„์–ด๋“ค๊ฒŒ ๋Œ

๋‹จ์ 

  • redux๋Š” ์•ˆ์ •์ ์ธ devtool์ž„

๊ฒฐ๋ก 

  • ๋””๋ฒ„๊น…์˜ ์ธก๋ฉด์—์„œ ๋ณด๋ฉด ๋ฆฌ๋•์Šค๊ฐ€ ์œ ๋ฆฌ

Redux

์žฅ์ 

  • ๊ฒ€์ฆ๋œ ์‹ ๋ขฐ์„ฑ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
  • redux devtools๋กœ ์ง๊ด€์ ์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ• ์ œ๊ณต
  • ์ƒํƒœ๊ฐ’์ด ๋งŽ์•„์งˆ ๊ฒฝ์šฐ ๋””๋ฒ„๊น…์ด ์ƒ๋Œ€์ ์œผ๋กœ recoil์— ๋น„ํ•ด ํŽธํ•ด์งˆ ๊ฒƒ

๋‹จ์ 

  • ์ž‘์€ ์ƒํƒœ ํ•˜๋‚˜๋ฅผ ๋ณ€๊ฒฝํ•˜๋ ค๊ณ  ํ•ด๋„ ๋ณด์ผ๋Ÿฌ ํ”Œ๋ ˆ์ดํŠธ ์ฝ”๋“œ๋ฅผ ๋งŽ์ด ์ž‘์„ฑํ•ด์•ผํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์žˆ์Œ

๊ฒฐ๋ก 

  • Recoil์— ๋น„ํ•ด ์ƒ๋Œ€์ ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ์–‘ ๋งŽ์•„์ง

๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ

Recoil

  • Selector๋ฅผ ์‚ฌ์šฉ
  • Selector๋Š” recoil์—์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋ฉฐ ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ’ ์บ์‹ฑ
  • ๊ฐ™์€ ์‘๋‹ต์„ ๋ณด๋‚ด๋Š” api call์—” ์ถ”๊ฐ€์ ์œผ๋กœ ์š”์ฒญํ•˜์ง€ ์•Š์•„ ์„ฑ๋Šฅ์ ์œผ๋กœ ์œ ๋ฆฌ
  • redux์ฒ˜๋Ÿผ ๋”ฐ๋กœ ๋ฏธ๋“ค์›จ์–ด ์„ค์น˜ํ•  ํ•„์š” x

Redux

  • redux-thunk, redux-saga, redux-toolkit ๊ฐ™์€ ๋ฏธ๋“ค์›จ์–ด๋Š” ๊ฒ€์ฆ๋œ ๋ฏธ๋“ค์›จ์–ด๋ผ ์‹ ๋ขฐ์„ฑ์ด ๋†’์Œ
  • redux-saga๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ œ๋„ˆ๋ ˆ์ดํ„ฐ์™€ ์ดํŽ™ํŠธ ๋“ฑ์˜ ์ดํ•ด ํ•„์š”
  • ๋‘ ์ƒํƒœ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ชจ๋‘ ๋Ÿฌ๋‹์ปค๋ธŒ๊ฐ€ ์ƒ๊น€

Context api์™€ ์ฐจ์ด

Redux๋„ Context API๋ฅผ ๊ฐ€์ง€๊ณ  ๋งŒ๋“  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

โ†’ ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ ์ธก๋ฉด์—์„  ์ฐจ์ด์ ์ด ๊ฑฐ์˜ ์—†์Œ

โ†’ Redux๋Š” Context API์™€ ๋‹ค๋ฅด๊ฒŒ ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ ์™ธ์˜ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ ์ œ๊ณต

๐Ÿ’ก

์˜ค์ง ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์›ํ•œ๋‹ค๋ฉด Context Api

์ƒํƒœ ๊ด€๋ฆฌ ์™ธ์— ์—ฌ๋Ÿฌ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•˜๋‹ค๋ฉด Redux