Component의 종류와 만드는 방법

1. 개요 

이제 컴포넌트, React Elements, DOM Elements에 대한 개념적 이해는 저번 포스팅들을 통해 잡혔을 것이다. 이제는 컴포넌트를 진짜 사용하기 위해 컴포넌트의 종류와 그것을 만드는 방법에 대해 알아보겠다. 

2. 컴포넌트의 종류 

컴포넌트의 종류에는 크게 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 클래스형 컴포넌트는 쓰는 방법이 복잡하고 어렵다는 의견이 많아서 요즘 자주 사용되는 것은 함수형 컴포넌트이다. 

함수형 컴포넌트는 말 그대로 함수 형태로 되어있다. 다음 예시를 보자. 

이거 말고 익명 함수 형태로 써도 된다. 

const Welcome = (props) => {
	//...
}

클래스형 컴포넌트는 우리가 자바 같은 객체지향 언어를 쓸 때 확인할 수 있는 형태 그대로 이다. 다른 여타 객체 지향 언어 속 클래스 처럼 생성자 또한 가지고 있다. 

컴포넌트에 대한 기초를 탄탄하게 하기 위해서는 클래스형 컴포넌트를 먼저 공부하는 것을 추천드린다. 우리는 요새 자주 사용하는 함수형 컴포넌트를 기준으로 앞으로 살펴볼 것이다. 

2. 컴포넌트를 만드는 방법

ⓐ 컴포넌트의 이름은 무조건 첫 글자가 대문자여야 한다!

Q. 왜? A. 그것은 React.createElements() 함수가 단순 DOM 태그와 사용자 정의 컴포넌트를 구분하는 방식 때문이다. 

 

우리는 컴포넌트가 DOM Elements까지 되는 과정에 대해서 저번 포스팅들에서 자세히 배웠다. 컴포넌트는 붕어빵 틀이고, 그것을 토대로 React Elements를 만든다. JSX에서는 해당 과정을 JSX 파일이 대신해주지만, 일반적인 JS 파일이면 React.createElements()를 이용해서 컴포넌트의 구현체인 React Elements를 만들어야 했다. 그리고 이 React Elements가 DOMReact.render 함수를 만나서 진짜 DOM elements가 된다. 
  이 과정 중 컴포넌트에서 React Elements를 뽑아내는 과정을 보자. 컴포넌트 중에는 단순 DOM 태그를 이용한 컴포넌트가 있을 수 있고, 우리가 직접 정의한 함수형 컴포넌트도 있을 수 있다. 

Welcome 컴포넌트는 우리가 만들었기에 그 내부를 들여다보면 다음과 같다. 

React.createElements 함수가 단순 DOM 태그로 이루어진 컴포넌트와 사용자 정의 컴포넌트를 어떻게 구분하는지 아는가? 바로 컴포넌트의 앞 글자가 대문자인지 소문자인지 확인해서 구분한다. DOM 태그들은 모두 앞 글자가 소문자로 이루어져 있기에 그것을 통해서 사용자 정의 컴포넌트와 구분한다. 따라서 우리가 사용자 정의 컴포넌트를 만들 경우, 무조건 앞 글자를 대문자로 해야한다.  

ⓑ 컴포넌트가 랜더링 되는 과정 

계속 반복이지만 중요한 내용임으로 또 반복하겠다. 컴포넌트에서 React Elements란 구현체를 뽑아내는 것은 JSX 파일일 경우 JSX 파일이 대신 해줬다. (안 보이는 곳에서 React.createElements()를 돌림.) 그 후 해당 Elements가 랜더링 되어 진짜 DOM Elements가 되기 위해서는 ReactDOM.render라는 함수를 사용해야 한다. 다음은 예시이다.