React.js - 리액트, 클래스형 컴포넌트(Class Component)란?

---

클래스형 컴포넌트 사용하기

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. 이번 시간은 클래스형 컴포넌트에 대해 알아보겠습니다. 기본적으로 클래스형 함수는 state, lifeCycle 관련 기능 사용을 사용 가능하다는 점이 있습니다. 그리고 함수형 컴포넌트보다 조금 더 메모리 자원을 많이 사용하는 큰 특징이 있습니다. 

 

 

● 2. 클래스형 컴포넌트를 만드는 방법은 맨 앞에 class 사용하면서 시작합니다. 그리고 "render()" 메서드를 사용합니다. 이 메서드를 통해서 JSX을 렌더링 할 수 있습니다.  props를 조회할 때 this를 사용하는 특징이 있습니다.

 

1번 라인 : class로 시작합니다.

2번 라인 : render() 메서드를 사용합니다.

class ClassComponent extends React.Component { 
  render() {
    return (
      <div>
        <h1>{this.props.name} </h1>
        <h1>{this.props.children} </h1>
      </div>
    );
  }
}

 

 

 

● 3.  클래스형으로 개발한 소스를 확인해보세요. 사용 빈도는 낮아졌지만 과거에 만들어진 리액트 프로젝트에서는 클래스형 컴포넌트를 볼 수 있습니다. 그렇기 때문에 어떤 형식인지 간단하게 학습을 한번 해보시기 바랍니다. 

See the Pen 클래스형 컴포넌트 예제 by GoCoder (@gocoder-net) on CodePen.

 

 

 

---

마무리

---

 

최대한 쉽고 알아 볼 수 있게 작성하였습니다.