함수 컴포넌트와 클래스 컴포넌트

컴포넌트 (Component)?

→ "독립된 모듈"로 소프트웨서 시스템을 교체가 가능하다.

→ 하나의 기능을 구현하기 위해 여러 종류의 기능을 한꺼번에 묶어놓은 기능이다. (code set)

→ 재사용이 가능하다.

→ 기능 자체에 집중할 수 있다.

→ 에러를 찾을 수 있어 유지보수가 용이하다. 

 

React 사용 시, 컴포넌트를 2가지로 정의할 수 있다. React 입장에서 바라보면 2가지 컴포넌트를 동일하다.

 

➀ 함수 컴포넌트 (가장 간단)

function Introduce(props) {
  return <h1>Welcome, {props.name}</h1>;
}

데이터를 가진 하나의 "props" 객체 인자를 받은 후 React 엘리먼트 반환한다.

JavaScript 함수이기 때문에 말 그대로 이름을 붙여주었다.

 

* props:속성을 나타내는 데이터

 

➁ 클래스 컴포넌트

class Introduce extends React.Component {
  render() {
    return <h1>Welcome, {this.props.name}</h1>;
  }
}

※ 클래스 컴포넌트 필수 사항

☑︎ class 정의를 받으려면 React.Component를 상속받아야 한다.

☑︎ render()는 React.Component  하위 class에 반드시 정의해야 하는 메서드이다.

 

하지만 컴포넌트 클래스를 직접 만들어서 사용하는 것은 지양된다. 상속보다 합성을 주로 사용하기 때문이다.

v16.8부터 Hook이 추가되어 class를 사용하지 않고 상태 값과 여러 React 기능을 사용할 수 있다.

---

Ref.

◾️  리액트 공식문서 ( https://ko.reactjs.org/docs/components-and-props.html )