본문 바로가기
IT_Developers/React

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

by 고코더 2021. 2. 13.

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


 

안녕하세요.

고코더 입니다.

 

 

 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.

 

 

 


마무리


 

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

 

 

 

댓글