개발/β›΅ ν•­ν•΄99

[ν•­ν•΄99] Week05. WIL – λ¦¬μ•‘νŠΈ μ „μ—­μƒνƒœκ΄€λ¦¬

밍(Ming) 🐈‍⬛ 2022. 2. 19. 02:07
728x90
λ°˜μ‘ν˜•

πŸ‘©πŸ»‍πŸ’» Weekly I Learned πŸ“š

 

 

⭐ React μ „μ—­μƒνƒœκ΄€λ¦¬

μ „μ—­ μƒνƒœ κ΄€λ¦¬λž€, 말 κ·ΈλŒ€λ‘œ μ „μ—­μ—μ„œ μƒνƒœλ₯Ό κ΄€λ¦¬ν•œλ‹€λŠ” λ§μž…λ‹ˆλ‹€. λ¦¬μ•‘νŠΈμ—μ„œλŠ” μƒμœ„μ—μ„œ ν•˜μœ„λ‘œ μƒνƒœ 값을 μ „λ‹¬ν•˜λ©° 관리λ₯Ό ν•˜κ²Œ λ˜λŠ” μ‹œμŠ€ν…œμž…λ‹ˆλ‹€. μ•„λž˜μ˜ μ‚¬μ§„μ²˜λŸΌ λ¦¬μ•‘νŠΈ ν”„λ‘œμ νŠΈλ₯Ό λ§Œλ“€λ‹€λ³΄λ©΄ μˆ˜λ§Žμ€ μ»΄ν¬λ„ŒνŠΈλ“€μ΄ λ°œμƒν•©λ‹ˆλ‹€. 이 λ•Œ μƒνƒœκ°’μ„ 전달 μ „λ‹¬ν•˜κ²Œ 되면 λ‹Ήμ—°νžˆ ν—·κ°ˆλ¦¬κ³ , ν•„μš”μ—†λŠ” 값도 μ „λ‹¬ν•˜κ²Œ λ˜λŠ” 상황이 λ°œμƒν•˜κ²Œ λ©λ‹ˆλ‹€.
 

이 λ•Œ λΆˆν•„μš”ν•œ propsλ₯Ό μ „λ‹¬λ°›μ•„μ•Όν•˜λŠ” μƒν™©μ—μ„œ props drilling μ΄λΌλŠ” λ¬Έμ œκ°€ λ°œμƒν•˜κΈ°λ„ ν•©λ‹ˆλ‹€.

  • props drilling

    λ¦¬μ•‘νŠΈ μ»΄ν¬λ„ŒνŠΈμ—μ„œ λ‹€λ₯Έ λΆ€λΆ„μœΌλ‘œ 데이터(props)λ₯Ό μ „λ‹¬ν•˜λŠ” κ³Όμ •μ—μ„œ μ˜€λ‘œμ§€ μ „λ‹¬λ§Œμ„ μœ„ν•΄μ„œ μ—¬λŸ¬ μ»΄ν¬λ„ŒνŠΈλ₯Ό κ±°μΉ˜λŠ” 상황을 λ§ν•©λ‹ˆλ‹€.

이런 λΆˆν•„μš”ν•œ props drilling 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄μ„œ μ „μ—­ μƒνƒœ 관리가 ν•„μš”ν•©λ‹ˆλ‹€.

μƒνƒœλ₯Ό κ΄€λ¦¬ν•˜κΈ° μœ„ν•΄μ„œ 크게 두 κ°€μ§€ λ°©λ²•μœΌλ‘œ λ‚˜λ‰˜λŠ”λ°, ν•˜λ‚˜λŠ” λ¦¬μ•‘νŠΈ hook 쀑 ν•˜λ‚˜μΈ Context APIλ₯Ό μ“°λŠ” 것이고 λ‹€λ₯Έ ν•˜λ‚˜λŠ” Reduxλ₯Ό μ‚¬μš©ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.



⭐ Context API

React hook으둜 μžˆλŠ” κ±°λΌμ„œ λ”°λ‘œ 라이브러리λ₯Ό μ„€μΉ˜ν•˜μ§€ μ•Šμ•„λ„ μ“Έ 수 μžˆλ‹€.

contextλ₯Ό μ΄μš©ν•˜λ©΄ λ‹¨κ³„λ§ˆλ‹€ 일일이 propsλ₯Ό λ„˜κ²¨μ£Όμ§€ μ•Šκ³ λ„ μ»΄ν¬λ„ŒνŠΈ 트리 전체에 데이터λ₯Ό μ œκ³΅ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
React μ»΄ν¬λ„ŒνŠΈ 트리 μ•ˆμ—μ„œ 전역적(global)이라고 λ³Ό 수 μžˆλŠ” 데이터λ₯Ό κ³΅μœ ν•  수 μžˆλ„λ‘ κ³ μ•ˆλœ λ°©λ²•μž…λ‹ˆλ‹€. κ·ΈλŸ¬ν•œ λ°μ΄ν„°λ‘œλŠ” ν˜„μž¬ λ‘œκ·ΈμΈν•œ μœ μ €, ν…Œλ§ˆ, μ„ ν˜Έν•˜λŠ” μ–Έμ–΄ 등이 μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, μ•„λž˜μ˜ μ½”λ“œλŠ” λ²„νŠΌ μ»΄ν¬λ„ŒνŠΈλ₯Ό κΎΈλ―ΈκΈ° μœ„ν•΄ ν…Œλ§ˆ(theme) propsλ₯Ό λͺ…μ‹œμ μœΌλ‘œ λ„˜κ²¨μ£Όκ³  μžˆμŠ΅λ‹ˆλ‹€.



⭐ Redux

μΌκ΄€μ μœΌλ‘œ λ™μž‘ν•˜κ³ , μ„œλ‘œ λ‹€λ₯Έ ν™˜κ²½(μ„œλ²„, ν΄λΌμ΄μ–ΈνŠΈ, λ„€μ΄ν‹°λΈŒ)μ—μ„œ μž‘λ™ν•˜κ³ , ν…ŒμŠ€νŠΈν•˜κΈ° μ‰¬μš΄ 앱을 μž‘μ„±ν•˜λ„λ‘ λ„μ™€μ€λ‹ˆλ‹€. 여기에 λ”ν•΄μ„œ μ‹œκ°„μ—¬ν–‰ν˜• 디버거와 κ²°ν•©λœ μ‹€μ‹œκ°„ μ½”λ“œ μˆ˜μ •κ³Ό 같은 ν›Œλ₯­ν•œ 개발자 κ²½ν—˜μ„ μ œκ³΅ν•©λ‹ˆλ‹€.


Context API vs Redux μ‚¬μš©μ˜ 차이점

 

[ν•­ν•΄99] Day22. TIL – Reduxλ₯Ό μ‚¬μš©ν•˜λŠ” 것과 Context API μ‚¬μš©μ˜ 차이점

πŸ‘©πŸ»‍πŸ’» Today I Learned πŸ“š ✨ Redux – Middleware vs Context API 미듀웨어 Redux μ—λŠ” 미듀웨어(Middleware)λΌλŠ” κ°œλ…μ΄ μ‘΄μž¬ν•©λ‹ˆλ‹€. λ¦¬λ•μŠ€λ‘œ μƒνƒœ 관리λ₯Ό ν•  λ•Œμ—λŠ” μš°λ¦¬κ°€ [userReducer] λ₯Ό μ‚¬μš©ν•΄λ³Ό..

mindevlog.tistory.com

 

 

πŸ’œ Week

λ¦¬μ•‘νŠΈλ₯Ό μ‚¬μš©ν•˜λŠ” 법을 λ°°μ› λ‹€κ³  λ³Ό 수 μžˆμ—ˆλ˜ μ§€λ‚œ 3μ£Ό. μ§€λ‚œ 3μ£Όκ°€ μˆœμ‚­λ˜μ—ˆλ‹€.
λ‹€μŒμ£ΌλΆ€ν„° λ°±μ—”λ“œλž‘ ν•¨κ»˜ μž‘μ€ ν”„λ‘œμ νŠΈλ₯Ό λ§Œλ“€μ–΄ λ³Ό μ˜ˆμ •μ΄λ‹€. 제일 κ±±μ •λ˜λŠ” 뢀뢄은 λ‚΄ μ‹€λ ₯도 μ‹€λ ₯μ΄κ±°λ‹ˆμ™€ λ°±μ—”λ“œμ™€ ν•¨κ»˜ λ§žμΆ°λ‚˜κ°€μ•Ό ν•© 뢀뢄이 제일 κ±±μ •λœλ‹€. 아직 μ„œλ‘œκ°€ μ“°λŠ” 언어에 μ œλŒ€λ‘œ μ΅μˆ™ν•΄μ§„ 것도 아닐텐데 무언가λ₯Ό ν•¨κ»˜ λ§žμΆ°μ„œ λ§Œλ“€μ–΄μ•Όν•œλ‹€λ‹ˆ κ±±μ •λΆ€ν„° μ•žμ„ λ‹€. κ·Έμ € μ„œλ‘œλ₯Ό λ°°λ €ν•˜κ³  이해해쀄 νŒ€μ›Œλ“€μ„ λ§Œλ‚˜κΈ°λ₯Ό!





728x90