React - 클래스형 컴포넌트, 함수형 컴포넌트 차이점

서론

 

React 컴포넌트를 선언하는 방식은 두 가지가 있다.

 

하나는 클래스형 컴포넌트, 다른 하나는 함수형 컴포넌트이다.

 

두 가지 방식의 차이를 알아보자

 

---

목차

 

1. 선언 방식 차이
2. state 선언, 사용 차이
3. Props 호출 차이

 

---

1. 선언 방식 차이

 

클래스 컴포넌트

• 컴포넌트 시작에 class 키워드 필요

• React.Component 상속 

• render() 메소드 필요

 

함수형 컴포넌트

• return문 내부에서 JSX 작성

 

 

비교

 

 

 

2. state 선언, 사용 방식

 

클래스형 - 선언 방식

 

• constructor 내부에서 this.state를 통해

 

class Sample extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      sample: true,
      data: []
    };
 
  }
}

 

 

클래스형 컴포넌트의 생성자(constructor)는 반드시 super(props)를 호출해야함

 

 

• constructor 없이

class Sample extends Component {
  state = {
    sample: true,
    data: [],
  }
}

 

 

 

클래스형 - 사용 방식

• this.setState 메소드로 state의 값을 변경할 수 있다.

 

 

 

함수형 - 선언 방식

 

함수형 컴포넌트에서 state 사용은 불가했지만 React 16.8.0부터 React Hook을 통해 사용 가능해졌습니다

• useState hook을 사용한다.

 

 

함수형 - 사용 방식

 

React Hook인 useState를 호출하면 배열이 반환되는데,

 

첫 번째 원소는 현재 state, 두 번째 원소는 현재 state를 변경할 수 있는 메소드

 

위 예시에서는 sample이 state 변수, setSample이 sample값을 변경하는 메소드 

 

 

 

3. Props 

 

클래스형 

• this.props를 통해 값을 불러온다

 

 

함수형

• props없이 매개변수로 불러올 수 있다