πŸ“Œ μ˜€λŠ˜λ„ μ–΄μ œμ™€ 같이 λ„ˆλ¬΄ λ„ˆλ¬΄ λ”μš΄λ‚ μ΄λ‹€!! ν•˜μ§€λ§Œ 에어컨과 ν•¨κ»˜λΌλ©΄ κ³΅λΆ€ν•˜λŠ”λ° μ „ν˜€ 지μž₯이 μ—†λ‹€ πŸ˜€ πŸ˜€
     μ˜€λŠ˜μ€ Reduxλ₯Ό λ°°μš°κΈ°μ „μ— μƒνƒœκ΄€λ¦¬λ₯Ό μ™œ ν•˜λŠ”μ§€ ν•™μŠ΅ν•˜κ³  Reduxλ₯Ό 미리 ν•™μŠ΅ν•΄λ³Ό μ˜ˆμ •μ΄λ‹€.(이미 ν•™μŠ΅ 해본건 μ•ˆλΉ„λ°€)

 

πŸ“— 였늘 ν•™μŠ΅ν•œ λ‚΄μš©

ν”„λ‘ νŠΈμ—”λ“œ 개발 μƒνƒœκ΄€λ¦¬

  • μƒνƒœ: UI에 λ™μ μœΌλ‘œ ν‘œν˜„λ  데이터(λ³€ν•˜λŠ” 데이터)
  • Side Effect: ν•¨μˆ˜(μ»΄ν¬λ„ŒνŠΈ)의 μž…λ ₯ 외에도 ν•¨μˆ˜μ˜ 결과에 영ν–₯을 λ―ΈμΉ˜λŠ” μš”μΈ
    • λŒ€ν‘œμ μΈ 예: λ„€νŠΈμ›Œν¬ μš”μ²­ (λ°±μ—”λ“œ API μš”μ²­)
  • 둜컬: νŠΉμ • μ»΄ν¬λ„ŒνŠΈ μ•ˆμ—μ„œλ§Œ κ΄€λ¦¬λ˜λŠ” μƒνƒœ
    • λ‹€λ₯Έ μ»΄ν¬λ„ŒνŠΈμ™€ 데이터λ₯Ό κ³΅μœ ν•˜μ§€ μ•ŠλŠ” 폼 데이터 (input box, select box λ“±)
  • μ „μ—­: ν”„λ‘œλ•νŠΈ 전체 ν˜Ήμ€ μ—¬λŸ¬ μ»΄ν¬λ„ŒνŠΈμ—μ„œ κ΄€λ¦¬λ˜λŠ” μƒνƒœ
    • λ‹€λ₯Έ μ»΄ν¬λ„ŒνŠΈμ™€ μƒνƒœλ₯Ό κ³΅μœ ν•˜κ³  영ν–₯을 λΌμΉ˜λŠ” μƒνƒœ
    • μ „μ—­ λ³€μˆ˜λ₯Ό λ‚¨μš©ν•˜λŠ” 것은 쒋지 μ•Šμ§€λ§Œ μ„œλ‘œ λ‹€λ₯Έ μ»΄ν¬λ„ŒνŠΈκ°€ λ™μΌν•œ μƒνƒœλ₯Ό λ‹€λ£° λ•ŒλŠ” μΆœμ²˜λŠ” 였직 ν•œ κ³³μ—μ„œ μƒνƒœλ₯Ό 관리해야 ν•œλ‹€. (ν•˜λ‚˜μ˜ 좜처 = μ „μ—­ 곡간)
    • 데이터 무결성을 μœ„ν•΄ λ™μΌν•œ λ°μ΄ν„°λŠ” 항상 같은 κ³³μ—μ„œ 데이터λ₯Ό 가지고 μ˜€λ„λ‘ ν•œλ‹€. (Single source of truth)
      • 데이터 무결성: λ°μ΄ν„°μ˜ 정확성을 보μž₯ν•˜κΈ° μœ„ν•΄ λ°μ΄ν„°μ˜ λ³€κ²½μ΄λ‚˜ μˆ˜μ • μ‹œ μ œν•œμ„ 두어 μ•ˆμ •μ„±μ„ μ €ν•΄ν•˜λŠ” μš”μ†Œλ₯Ό 막고 μƒνƒœλ“€μ„ 항상 옳게 μœ μ§€ν•˜λŠ” 것.
    • μ „μ—­μœΌλ‘œ μƒνƒœ κ΄€λ¦¬ν•˜λŠ” 경우
      • ν…Œλ§ˆ μ„€μ •
      • κ΅­μ œν™” μ„€μ •
  • μƒνƒœ 관리λ₯Ό μœ„ν•œ 툴
    • React Context
    • Redux
    • MobX
  • μƒνƒœ 관리 툴의 κΈ°λŠ₯
    • μ „μ—­ μƒνƒœ μ €μž₯μ†Œ 제곡
    • Props drilling 이슈 ν•΄κ²°

 

πŸ“˜ μΆ”κ°€λ‘œ 곡뢀할 λ‚΄μš©

[udemy] React μ™„λ²½ κ°€μ΄λ“œ κ°•μ˜ 보기 (맀일 μ‘°κΈˆμ”© 이라도 κΎΈμ€€νžˆ λ“£κΈ°)

Redux 곡뢀해보기

 

πŸ“ μ€‘μš”ν•œ λ‚΄μš©

  • μƒνƒœκ΄€λ¦¬λ₯Ό ν•  λ•Œ, 둜컬과 전역을 잘 ν™œμš©ν•΄μ•Ό ν•œλ‹€.
  • Redux: μƒνƒœκ΄€λ¦¬λ„κ΅¬

'Daily > Today I Learned' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

22.07.07_TIL  (0) 2022.07.07
22.07.06_TIL  (0) 2022.07.06
22.07.04_TIL  (0) 2022.07.04
22.07.01_TIL  (0) 2022.07.01
22.06.30_TIL  (0) 2022.06.30

+ Recent posts