React- 클래스형 컴포넌트 선언

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

 

클래스형 컴포넌트 선언

이제는 잘 클래스형 컴포넌트를 잘 사용하지는 않지만 나중에 클래스형 컴포넌트를 사용한 프로젝트를 유지보수하게 되는 일이 있을 수도 있고 react-native 관련 라우터 라이브러리인 react-native-navigation의 경우에도 클래스형 컴포넌트를 어쩔 수 없이 써야 하는 일이 종종있기때문이다.

ClassType.js

import React, { Component } from 'react'; // Component를 불러와줘야한다.

class ClassType extends Component { // Component를 상속 받아야 하고
    static defaultProps = {
        name: '이름없음',
    };

    render() { // render 메서드를 작성해줘야 하고
        const { color, isSpecial, name } = this.props;
        return ( // jsx를 반환 시켜주면 된다.
            <div style={{ color }}>
                {isSpecial && <b>*</b>}
                안녕하세요 {name}
            </div>
        );
    }
}

export default ClassType;

위와 같이 Component를 상속 받는 클래스를 만든 뒤 안에 render 메서드를 꼭 써준뒤 JSX를 반환해줘야한다. 그리고 default props는 위와 같이 static이라는 키워드를 써준 뒤 클래스 안에 설정 해줘도 되고

함수형 클래스를 선언할 때와 같이 설정해줘도 된다.

 

App.js

import React, {Component} from 'react';
import ClassType from './components/ClassType';

class App extends Component {
  render() {
    return (
      <div>
        <ClassType color="blue" name="반갑습니다!" isSpecial="true"/>
      </div>
    )
  }
}

export default App;

만든 클래스형 컴포넌트를 App.js 파일에 불러와 준다.

 

실행 결과