React - 리액트 클래스 (상태가 있는 컴포넌트)

이전글:  2019/02/23 - [IT/React] - React - 리액트 요소란?

실제로 동작하는 기능을 개발하려면 리액트 요소 이상의 것, 즉 컴포넌트가 필요하다. 

리액트 컴포넌트는 요소를 그룹화하는 방법이다. 

컴포넌트는 기능, 마크업, 스타일 그리고 기타 UI에 필요한 다른 요소들을 하나로 묶어 그룹화한다. 

컴포넌트는 독립적이면서도 재사용이 가능하기 때문에 필요한 기능을 독자적으로 구성할 수 있다. 

컴포넌트는 함수기반의 컴포넌트(상태가 없는)와 자바스크립트 클래스 기반의 컴포넌트로 나눌 수 있다. 

클래스 기반의 컴포넌트에 대해서 알아보자.

class MyReactClassComponent extend Component {
  render() {}
}

render 메서드

 - 화면에 무언가를 출력하는 컴포넌트라면 반드시 render 메서드를 정의한다.

 - render 메서드는 반드시 리액트 요소를 리턴한다. 

 - 리액트 요소와 달리 컴포넌트는 컴포넌트 내부에 저장된 상태뿐만 아니라 

   React.Component 추상클래스로부터 상속된 추가 메서드에 대해서도 접근이 가능하다. 

 - 리액트는 클래스 기반 컴포넌트에 대한 보조 인스턴스를 생성하여 내부에 저장된 상태에 대해서 컴포넌트 전체가 활용할 수 있다. 

 - 리액트는 클래스의 인스턴스에 대한 특별한 데이터 객체를 생성하고 변경사항을 계속 추적한다 

 - 바로 이런 특징때문에 클래스 기반 컴포넌트를 '상태가 있는 컴포넌트' 라고 부른다.