Skip to content

Latest commit

Β 

History

History
56 lines (35 loc) Β· 3.66 KB

File metadata and controls

56 lines (35 loc) Β· 3.66 KB
title React μ°Έκ³ μ„œ κ°œμš”

이 μ„Ήμ…˜μ€ React와 κ΄€λ ¨λœ μž‘μ—…μ— λŒ€ν•œ μƒμ„Έν•œ μ°Έκ³ μ„œλ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€. React에 λŒ€ν•œ μ†Œκ°œλŠ” ν•™μŠ΅ν•˜κΈ° μ„Ήμ…˜μ„ μ°Έκ³ ν•˜μ„Έμš”.

React μ°Έκ³ μ„œλŠ” λ‹€μŒκ³Ό 같은 κΈ°λŠ₯적인 ν•˜μœ„ μ„Ήμ…˜μœΌλ‘œ κ΅¬μ„±λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

React {/react/}

React의 ν”„λ‘œκ·Έλž˜λ° κΈ°λŠ₯.

  • Hook - μ»΄ν¬λ„ŒνŠΈμ—μ„œ λ‹€μ–‘ν•œ React κΈ°λŠ₯을 μ‚¬μš©ν•˜μ„Έμš”.
  • μ»΄ν¬λ„ŒνŠΈ - JSXμ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” λ‚΄μž₯ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€.
  • API - μ»΄ν¬λ„ŒνŠΈ μ •μ˜μ— μœ μš©ν•œ API듀을 λ‹€λ£Ήλ‹ˆλ‹€.
  • μ§€μ‹œμ–΄ - React μ„œλ²„ μ»΄ν¬λ„ŒνŠΈμ™€ ν˜Έν™˜λ˜λŠ” λ²ˆλ“€λŸ¬μ—κ²Œ μ§€μ‹œμ‚¬ν•­μ„ μ œκ³΅ν•©λ‹ˆλ‹€.

React DOM {/react-dom/}

React DOM은 λΈŒλΌμš°μ € DOM ν™˜κ²½μ—μ„œ μ‹€ν–‰λ˜λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œλ§Œ μ§€μ›λ˜λŠ” κΈ°λŠ₯을 ν¬ν•¨ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. 이 μ„Ήμ…˜μ€ λ‹€μŒκ³Ό 같이 λ‚˜λ‰©λ‹ˆλ‹€.

  • Hook - λΈŒλΌμš°μ € DOM ν™˜κ²½μ—μ„œ μ‹€ν–‰λ˜λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μœ„ν•œ Hookμž…λ‹ˆλ‹€.
  • μ»΄ν¬λ„ŒνŠΈ - ReactλŠ” λΈŒλΌμš°μ € λ‚΄μž₯ HTML 및 SVG μ»΄ν¬λ„ŒνŠΈλ₯Ό λͺ¨λ‘ μ§€μ›ν•©λ‹ˆλ‹€.
  • API - react-dom νŒ¨ν‚€μ§€μ—λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œλ§Œ μ§€μ›λ˜λŠ” λ©”μ„œλ“œκ°€ ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.
  • ν΄λΌμ΄μ–ΈνŠΈ API - react-dom/client APIλ₯Ό μ‚¬μš©ν•˜λ©΄ λΈŒλΌμš°μ €μ—μ„œ React μ»΄ν¬λ„ŒνŠΈλ₯Ό λ Œλ”λ§ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • μ„œλ²„ API - react-dom/server APIλ₯Ό μ‚¬μš©ν•˜λ©΄ μ„œλ²„μ—μ„œ React μ»΄ν¬λ„ŒνŠΈλ₯Ό HTML둜 λ Œλ”λ§ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

React Compiler {/react-compiler/}

React μ»΄νŒŒμΌλŸ¬λŠ” React μ»΄ν¬λ„ŒνŠΈμ™€ 값을 μžλ™μœΌλ‘œ λ©”λͺ¨μ΄μ œμ΄μ…˜ν•˜λŠ” λΉŒλ“œ νƒ€μž„ μ΅œμ ν™” λ„κ΅¬μž…λ‹ˆλ‹€.

  • μ„€μ • - React 컴파일러의 μ„€μ • μ˜΅μ…˜μž…λ‹ˆλ‹€.
  • μ§€μ‹œμ–΄ - μ»΄νŒŒμΌμ„ μ œμ–΄ν•˜λŠ” ν•¨μˆ˜ μˆ˜μ€€ μ§€μ‹œμ–΄μž…λ‹ˆλ‹€.
  • 라이브러리 컴파일 - 사전 컴파일된 라이브러리 μ½”λ“œλ₯Ό λ°°ν¬ν•˜λŠ” 방법을 μ•ˆλ‚΄ν•©λ‹ˆλ‹€.

ESLint Plugin React Hooks {/eslint-plugin-react-hooks/}

React Hooks용 ESLint ν”ŒλŸ¬κ·ΈμΈμ€ React의 κ·œμΉ™μ„ μ μš©ν•˜λŠ” 데 도움을 μ€λ‹ˆλ‹€.

  • 린트 - 각 λ¦°νŠΈμ— λŒ€ν•œ μžμ„Έν•œ λ¬Έμ„œμ™€ μ˜ˆμ‹œλ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.

Rules of React {/rules-of-react/}

Reactμ—λŠ” νŒ¨ν„΄ 이해λ₯Ό μ‰½κ²Œ ν•˜λ©° κ³ ν’ˆμ§ˆμ˜ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ§Œλ“€ 수 있게 ν•˜λŠ” μΌμ’…μ˜ κ·œμΉ™ ν˜Ήμ€ λͺ¨λ²”적인 방식이 μžˆμŠ΅λ‹ˆλ‹€.

  • μ»΄ν¬λ„ŒνŠΈμ™€ Hook은 μˆœμˆ˜ν•΄μ•Ό ν•©λ‹ˆλ‹€ – μˆœμˆ˜μ„±μ€ μ½”λ“œλ₯Ό 더 μ‰½κ²Œ μ΄ν•΄ν•˜κ³  디버그할 수 μžˆλ„λ‘ ν•˜λ©°, Reactκ°€ μ˜¬λ°”λ₯΄κ²Œ μ»΄ν¬λ„ŒνŠΈμ™€ Hook을 μžλ™μœΌλ‘œ μ΅œμ ν™”ν•  수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€.
  • Reactκ°€ μ»΄ν¬λ„ŒνŠΈμ™€ Hook을 ν˜ΈμΆœν•˜λŠ” 방식 – ReactλŠ” μ‚¬μš©μž κ²½ν—˜μ„ μ΅œμ ν™”ν•˜κΈ° μœ„ν•΄ ν•„μš”ν•  λ•Œλ§ˆλ‹€ μ»΄ν¬λ„ŒνŠΈμ™€ Hook을 λ Œλ”λ§ν•©λ‹ˆλ‹€.
  • Hook의 κ·œμΉ™ – Hook은 μžλ°”μŠ€ν¬λ¦½νŠΈ ν•¨μˆ˜λ‘œ μ •μ˜λ˜μ§€λ§Œ 호좜 μœ„μΉ˜μ— μ œμ•½μ΄ μžˆλŠ” νŠΉλ³„ν•œ μœ ν˜•μ˜ μž¬μ‚¬μš© κ°€λŠ₯ν•œ UI λ‘œμ§μž…λ‹ˆλ‹€.

λ ˆκ±°μ‹œ API {/legacy-apis/}

  • λ ˆκ±°μ‹œ API - react νŒ¨ν‚€μ§€μ—μ„œ λ‚΄λ³΄λƒˆμ§€λ§ŒExported μƒˆλ‘œ μž‘μ„±ν•  μ½”λ“œμ—μ„œλŠ” ꢌμž₯ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.