Class Components에 대해 알아보자.

예전의 리액트에서는 Class Components가 중요한 역할을 맡았었습니다. 주로 컴포넌트에서 나중에 배울 LifeCycle API와 state를 위해서는 꼭 class 문법을 활용한 컴포넌트를 정의해야 했습니다.

import React, { Component } from 'react';

class Component1 extends Component {
  render() {
    return (<div>Hello World!</div>);
  }
}

export default Component1;

위의 코드를 맨 위의 줄부터 하나하나 해석을 해보며 React 개발을 위해 필수적으로 알아야 할 문법이나 해당 문장이 어떤 기능을 하는지 알아봅시다.

코드 해석

• 1번줄 - import React, { Component } from 'react';
• 3번줄 - class Component1 extends Component
• 4번줄 - render()
• 5번줄 - return (<div>Hello World!</div>);
• 9번줄 - export default Component1;

<aside> ⁉️ 최근 업데이트 이후 거의 사용되지 않는 형태의 컴포넌트입니다. 잘 사용되지 않는 이유는 뒷장에서 다룰 부분인 Functional Components에서 알아봅시다.

</aside>