Component

ν•™μŠ΅ ν‚€μ›Œλ“œ

  • Component

    • 클래슀 μ»΄ν¬λ„ŒνŠΈμ™€ ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈ

    • μ»΄ν¬λ„ŒνŠΈ 생성 κ·œμΉ™

    • JSX

    • Props의 ν™œμš©λ²•

Component

λ¦¬μ•‘νŠΈλŠ” μ›Ήμ˜ κ΅¬μ„±μš”μ†Œλ₯Ό κ°€μž₯ μž‘μ€ λ‹¨μœ„λ‘œ 인 μ»΄ν¬λ„ŒνŠΈλ‘œ κ΅¬μ„±ν•œλ‹€. μ΄λŸ¬ν•œ μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‘°ν•©ν•΄μ„œ ν•˜λ‚˜μ˜ νŽ˜μ΄μ§€λ‘œ μƒμ„±ν•˜κ³ , 반볡적인 μ›Ήμ˜ κ΅¬μ„±μš”μ†Œλ₯Ό μž¬μ‚¬μš© ν•  수 μžˆλ‹€λŠ” νŠΉμ§•μ„ κ°€μ§€κ³  μžˆλ‹€.

클래슀 μ»΄ν¬λ„ŒνŠΈ 와 ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈ

λ¦¬μ•‘νŠΈλŠ” ν΄λž˜ν˜•κ³Ό ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈ 두가지 λ°©μ‹μœΌλ‘œ μž‘μ„±ν•  수 μžˆλ‹€. 두가지 방식 λͺ¨λ‘ μ§€μ›ν•˜κ³  μžˆμ§€λ§Œ, κ³΅μ‹μ μœΌλ‘œλŠ” 클래슀 μ»΄ν¬λ„ŒνŠΈ 방식은 μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”κ±Έ ꢌμž₯ν•œλ‹€. λ¦¬μ•‘νŠΈ 16.8버전에 μΆ”κ°€λœ λ¦¬μ•‘νŠΈ ν›…μœΌλ‘œ 인해 ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈμ˜ μ‚¬μš©μ„±μ΄ κ°œμ„ λ˜μ–΄ 더이상 클래슀 μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‚¬μš©ν•˜λŠ” 건 λΉ„νš¨μœ¨μ μ΄λ‹€.

μ»΄ν¬λ„ŒνŠΈ 생성 κ·œμΉ™

  • μ»΄ν¬λ„ŒνŠΈ μƒμ„±μ‹œ 이름은 항상 λŒ€λ¬Έμžλ‘œ μ‹œμž‘ν•œλ‹€.

  • ν™”μ‚΄ν‘œν˜„μ‹, ν•¨μˆ˜μ„ μ–Έμ‹ λ‘˜λ‹€ μ‚¬μš© κ°€λŠ₯ν•˜λ‹€.

JSX

  • Javascript + XML

λ°˜λ“œμ‹œ μ΅œμƒμœ„ 루트 νƒœκ·Έκ°€ μ‘΄μž¬ν•΄μ•Ό ν•œλ‹€

<></> === <React.Fragment></React.Fragment> λ¦¬μ•‘νŠΈμ—μ„œ μ œκ³΅ν•˜λŠ” Fragment

μ—¬λŸ¬μ€„μ˜ μ½”λ“œλ₯Ό return ν•  경우 () μ†Œκ΄„ν˜Έ μ‚¬μš©

λ°›λ“œμ‹œ νƒœκ·ΈλŠ” λ‹«μ•„μ€€λ‹€

ν‘œν˜„μ‹μ€ {} μ‚¬μš©ν•œλ‹€

  • 객체,λ°°μ—΄,Boolean μ€‘κ΄„ν˜Έλ₯Ό μ‚¬μš©ν•˜λŠ” 방식 λΆˆκ°€λŠ₯

Props의 ν™œμš©λ²•

1. λ§€κ°œλ³€μˆ˜ ꡬ쑰뢄해할당

  • ⭐️ κ°€μž₯ 많이 μ‚¬μš©ν•˜λŠ” 방식

2. μ»΄ν¬λ„ŒνŠΈ λ‚΄μ—μ„œ props의 ꡬ쑰뢄해할당

3.λ‚˜λ¨Έμ§€ λ§€κ°œλ³€μˆ˜λ₯Ό ν™œμš©ν•œ ꡬ쑰뢄해할당

Last updated