[React] 컴포넌트(Component)

📝 컴포넌트

컴포넌트(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를 구현하는 것이 추세라고 한다.