Class형 컴포넌트

이제는 잘 사용하지 않지만, 함수형 컴포넌트+Hooks로 못하는 작업이 있다.

옛날에 만들어진 리액트 관련 라이브러리의 경우에는 Hooks 지원이 아직 안되는 경우도 있고 React-native 관련 라우터 라이브러리인 react-native-navigation 의 경우에도 클래스형 컴포넌트를 써야하는 일이 종종 있다.

 

클래스형 컴포넌트 생성

• 클래스형 컴포넌트에서는 render( ) 메서드가 꼭 있어야 한다.
• 이 메서드에서 렌더링 하고 싶은 JSX 를 반환하면 된다.
• props 를 조회해야할 때에는 this.props 를 조회하면 된다.
• defaultProps 를 설정하는 것은 이전 함수형 컴포넌트에서 했을 때와 똑같이 해도 되고, 클래스 내부에 static 키워드와 함께 선언할 수도 있다.

import React, { Component } from 'react';

class Hello extends Component {
  render() {
    const { color, name, isSpecial } = this.props;
    return (
      <div style={{ color }}>
        {isSpecial && <b>*</b>}
        안녕하세요 {name}
      </div>
    );
  }
}

Hello.defaultProps = {
  name: '이름없음'
};

export default Hello;

 

defaultProps static 키워드로 선언

class Hello extends Component {
  static defaultProps = {
    name: '이름없음'
  };