[React] Component의 종류와 렌더링

리액트 컴포넌트의 종류

리액트에서 컴포넌트는 크게 2가지로 나뉜다.

리액트 초기버전에서는 '클래스 컴포넌트'를 주로 사용했다. 이후에 사용하기 편한 '함수 컴포넌트'가 새로 나와 주를 이루게 됐다. 함수 컴포넌트를 개선하는 과정에서 개발된 것 중에 Hook이라는 개념이 있다. 이 부분은 추후에 학습 예정이다.

현재 리액트 개발에서는 거의 Hook을 사용한다.

1) Function Component(함수 컴포넌트)

모든 리액트 컴포넌트는 퓨어함수같은 역할을 해야한다. 리액트의 컴포넌트를 일종의 함수처럼 생각해도 된다.

function Welcome(props) {
	return <h1>안녕, {props.name}</h1>;
}

함수 컴포넌트는 이처럼 간단한 코드가 장점이다.

2) Class Component(클래스 컴포넌트)

클래스 컴포넌트의 class는 ES6의 그 class이다. 함수 컴포넌트보다 몇 가지 더 추가 기능을 가지고 있다.

class Welcome extends React.Component {
	return <h1>안녕, {this.props.name}</h1>;
}

위 코드는 함수형 컴포넌트의 클래스 컴포넌트 버전이다. 리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다. '상속'이라는 개념은 객체지향 프로그래밍에서 나오는 개념인데, 한 클래스의 변수들과 함수들을 상속받아 새로운 자식 클래스를 만드는 방법이다.

컴포넌트 이름을 소문자로 하면 돔 태그로 인식(내장 컴포넌트)하기 때문에 대문자로 시작해서 리액트 컴포넌트로 인식하도록 해야한다.

컴포넌트 렌더링

컴포넌트는 <붕어빵 틀> 역할을 한다. 실제로 화면이 보이는 것은 element(붕어빵)이다.
그렇다면 렌더링을 위해선 컴포넌트로부터 element를 만들어야 할 것이다.

// DOM 태그를 사용한 element
const element = <div />;

// 사용자가 정의한 Component를 사용한 element
const element = <Welcome name="희" />;

위 element를 렌더링하기 위해서는 아래처럼 해주면 된다.

function Welcme(props) {
  	return <h1>안녕, {props.name}</h1>;
}

const element = <Welcome name="희" />;
ReactDOM.render(
	element,
  	document.getElementById('root')
);

이렇게 렌더링된 element는 실제 DOM을 통해 화면에 보여지게 된다.