27. 클래스형 컴포넌트 소개 - 리액트 입문 | 벨로퍼트

 

이제는 잘 사용하지 않지만, 그래도 클래스형 컴포넌트에 대해서 알아봅시다! 앞으로 이 강의에서 클래스형 컴포넌트를 사용하는 일은 거의 없겠지만 그래도 알아둘 필요는 있습니다. 여러분이 나중에 클래스형 컴포넌트를 사용하는 프로젝트를 유지보수하게 되는 일이 있을 수도 있고, 함수형 컴포넌트 + Hooks 로 못하는 작업이 2개정도 있긴 합니다. 추가적으로, 옛날에 만들어진 리액트 관련 라이브러리의 경우에는 Hooks 지원이 아직 안되는 경우도 있고, react-native 관련 라우터 라이브러리인 react-native-navigation 의 경우에도 클래스형 컴포넌트를 어쩔 수 없이 써야 하는 일이 종종 있습니다.

 

앞으로 강의에서 사용하는 일은 거의 없을거고, 여러분도 새로운 컴포넌트를 작성 할 땐 주로 함수형 컴포넌트를 사용하겠지만 그래도 만약을 위하여 조금만 공부해봅시다.

클래스형 컴포넌트를 만드는 방법

우리가 기존에 작성했던 Hello.js 를 열어보세요.

/src/Hello.js : 

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

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

export default Hello;

이 컴포넌트를 클래스형 컴포넌트로 작성해봅시다. 코드를 다 지우고 다음과 같이 입력해보세요.

/src/Hello.js :

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;

클래스형 컴포넌트에서는 render() 메서드가 꼭 있어야 합니다. 이 메서드에서 렌더링하고 싶은 JSX 를 반환하시면 됩니다. 그리고, props 를 조회 해야 할 때에는 this.props 를 조회하시면 됩니다.

 

defaultProps 를 설정하는 것은 이전 함수형 컴포넌트에서 했을 때와 똑같이 해주셔도 되고, 다음과 같이 클래스 내부에 static 키워드와 함께 선언 할 수도 있습니다.

/src/Hello.js :

import React, { Component } from 'react';

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

export default Hello;

지금은 Hooks를 사용해서 함수형 컴포넌트에서 상태 관리를 할 수 있지만,

옛날엔 함수형 컴포넌트에서 상태 관리가 안됐고 useEffect 같은 Hook 도 없었기 때문에 컴포넌트 렌더링 전후로 어떤 작업을 할 수 없었다. 그렇기 때문에 그때는 클래스형 컴포넌트를 사용해야 했다.