WEB

[React] μ»΄ν¬λ„ŒνŠΈ(Component)

Meng's Computer 2021. 2. 6. 00:47

πŸ“ μ»΄ν¬λ„ŒνŠΈ

μ»΄ν¬λ„ŒνŠΈ(Component) : μ•±μ˜ κΈ°λŠ₯을 λ‹¨μœ„λ³„λ‘œ μΊ‘μŠν™”ν•˜λŠ” React의 κΈ°λ³Έ λ‹¨μœ„

HTML μš”μ†Œλ₯Ό λ°˜ν™˜ν•˜λŠ” ν•¨μˆ˜λ‚˜ ν΄λž˜μŠ€μ™€ κ°™λ‹€κ³  생각해도 λœλ‹€.
λ”°λΌμ„œ, μ»΄ν¬λ„ŒνŠΈλŠ” 독립적이고, μž¬μ‚¬μš© κ°€λŠ₯ν•œ μ½”λ“œμ˜ 쑰각이닀.

μ»΄ν¬λ„ŒνŠΈμ˜ μ’…λ₯˜λ‘œλŠ”, 1. ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈ, 2. ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈκ°€ μžˆλ‹€.

 

πŸ’‘ ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈ

κ°„λ‹¨ν•œ 예둜, ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈ ν˜•νƒœλ₯Ό 보자.

function Introduce() {
  return <h2>Hi, I am elice!</h2>;
}

ReactDOM.render(<Introduce />, document.getElementById('root'));

πŸ’‘ ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈ

ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈμ™€ λΉ„κ΅ν–ˆμ„ λ•Œ, μ•½κ°„ ꡬ쑰만 λ‹€λ₯Έ 정도닀.
λ‹€λ§Œ, class μ„ μ–Έ μ‹œ, React.Component의 λ©”μ†Œλ“œλ“€μ„ μ‚¬μš©ν•˜κΈ° μœ„ν•΄, extendsλ₯Ό μ΄μš©ν•΄, React.Componentλ₯Ό 상속
render( ) ν•¨μˆ˜μ•ˆμ—, λ°˜ν™˜ ν• , HTML μš”μ†Œλ₯Ό return 으둜 λ°˜ν™˜
κ°„λ‹¨ν•œ 예둜, ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈ ν˜•νƒœλ₯Ό 보자.

class Introduce extends React.Component {
  render() {
    return <h2>Hi, I am elice!</h2>;
  }
}

ReactDOM.render(<Introduce />, document.getElementById('root'));

 

πŸ’‘ 이 λ‘˜μ€ 각각, μ–Έμ œ μ‚¬μš©ν•˜λŠ”κ°€ ?

ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈ

  • λ‹¨μˆœνžˆ HTML UIλ₯Ό λ°˜ν™˜ν•˜λŠ” κ°„λ‹¨ν•œ μžλ°”μŠ€ν¬λ¦½νŠΈ ν•¨μˆ˜λ‘œ 자주 μ‚¬μš©ν•œλ‹€.
  • λ‹¨μˆœνžˆ, 데이터λ₯Ό λ°›κ³ , λ Œλ”λ§ ν•˜λ©΄ 끝이지 λ•Œλ¬Έμ—, λΉ„μƒνƒœν˜• μ»΄ν¬λ„ŒνŠΈλΌκ³ λ„ ν•œλ‹€.

클래슀 μ»΄ν¬λ„ŒνŠΈ

  • 클래슀 μ»΄ν¬λ„ŒνŠΈλŠ”, "μƒνƒœ(State)"λ₯Ό κ΅¬ν˜„ν•  λ•Œ μ‚¬μš©ν•œλ‹€.
  • μ—¬κΈ°μ„œ, "μƒνƒœ(State)"λž€, React의 Stateλ₯Ό μ˜λ―Έν•˜λ©°, μ‰½κ²Œ λ§ν•˜λ©΄, μ»΄ν¬λ„ŒνŠΈμ˜ ν˜„μž¬ μ €μž₯된 κ°’
  • 이런, "상타(State)"λ₯Ό κ°€μ§€λŠ”, 클래슀 μ»΄ν¬λ„ŒνŠΈλ₯Ό, λ‹€λ₯Έ 말둜, μƒνƒœν˜• μ»΄ν¬λ„ŒνŠΈλΌκ³ λ„ ν•œλ‹€.
  • HTML을 λ°˜ν™˜ν•˜λŠ” render( ) λ©”μ†Œλ“œκ°€ κ΅¬ν˜„λ˜μ–΄, λ³΅μž‘ν•œ UI λ‘œμ§μ„ κ΅¬ν˜„ν•  λ•Œ ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‚¬μš©ν•œλ‹€.
  • 특히, Stateλ₯Ό μ‚¬μš©ν•  λ•Œ, λ°˜λ“œμ‹œ(?) ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈλ‘œ κ΅¬ν˜„μ΄ λ˜μ–΄μ•Ό ν•œλ‹€.

 

κ·ΈλŸ¬λ‚˜, 기술이 λ°œλ‹¬ λ˜λ©΄μ„œ, μ΄μ œλŠ”, 사싀, 클래슀 μ»΄ν¬λ„ŒνŠΈμ—μ„œλ§Œ, λ‹€λ£° 수 있던, μ»΄ν¬λ„ŒνŠΈμ˜ μƒνƒœ(State)λ₯Ό, ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈμ—μ„œλ„ λ‹€λ£° 수 있게 λ˜μ—ˆκ³ , κ·ΈλŸ¬ν•œ κΈ°μˆ μ„ μš°λ¦¬λŠ”, "ν›…(hook)" μ΄λΌκ³ ν•œλ‹€.

이것은, λ’€μ—μ„œ μ„€λͺ…ν•˜λ €κ³  ν•œλ‹€. ( μ•„μ£Ό μ€‘μš”ν•˜κΈ° λ•Œλ¬Έ ! )

그리고, μš”μ¦˜μ€ 사싀, ν΄λž˜μŠ€ν˜• μ»΄ν¬λ„ŒνŠΈλ³΄λ‹¨, hook을 μ΄μš©ν•œ, ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈλ‘œ Reactλ₯Ό κ΅¬ν˜„ν•˜λŠ” 것이 좔세라고 ν•œλ‹€.

728x90
λ°˜μ‘ν˜•