[React] 엘리먼트, 컴포넌트, 인스턴스 개념

1. 엘리먼트 (Element)

• 실제로 화면에 렌더링 할 DOM 노드들의 정보를 React에게 알려주기 위한 수단이다.
• DOM 노드 혹은 컴포넌트를 표현하는 JavaScript의 일반 불변 객체(Plain Immutable Object)에 해당한다.
• type(문자열 혹은 컴포넌트 함수/클래스) 필드와 props(객체) 필드로 표현된다.
• 일반적으로 하나 이상의 자식 엘리먼트는 props의 children 필드로 표현하며, 이를 통해 엘리먼트들이 중첩될 수 있다. (이 필드에는 텍스트에 해당하는 문자열, 엘리먼트, 혹은 엘리먼트들의 배열 등이 저장될 수 있다.)
• 일반적으로 JavaScript의 React.createElement() 함수 또는 JSX의 태그 문법(ex. <Button />)으로 작성한다.
• 엘리먼트들로 이뤄진 트리를 엘리먼트 트리라 부르며, 이는 메모리 상에만 존재하는 가상 DOM(Virtual DOM)이다.

 

 

2. DOM 엘리먼트 (DOM Element)

• 엘리먼트의 type이 태그 이름에 해당하는 문자열인 경우(소문자로 시작)를 말한다.
• 해당 태그를 가진 DOM 노드를 표현하며, props 정보를 통해 해당 노드의 어트리뷰트들을 표현한다.
• React가 실제로 화면에 렌더링 하는 대상에 해당한다.

 

3. 컴포넌트 엘리먼트 (Component Element)

• 엘리먼트의 type이 컴포넌트 클래스/함수인 경우(대문자로 시작)를 말한다.
• 사용자가 직접 정의한 컴포넌트를 표현하며, 입력으로 props를 받으면 렌더링 할 엘리먼트 트리를 반환한다. 이 엘리먼트 트리는 다시 DOM 엘리먼트나 컴포넌트 엘리먼트들로 이뤄진다. React는 렌더링을 위해서 모든 컴포넌트 엘리먼트에게 어떠한 엘리먼트 트리를 반환하는지 묻는 것을 반복한다. 물론 클래스형 컴포넌트의 경우 당연히 컴포넌트 인스턴스의 생성이 선행될 것이다.
• 클래스형 컴포넌트 : 지역 상태를 가질 수 있고, 해당 컴포넌트 인스턴스에 대응하는 DOM 노드가 생성, 수정, 삭제될 때의 동작을 제어할 수 있다(생명 주기).
• 함수형 컴포넌트 : render() 함수만 가지는 클래스형 컴포넌트와 동일하며, 지역 상태를 가질 수 없지만 구현이 단순하다.

 

4. 엘리먼트 관련 핵심 아이디어 ***

• 컴포넌트 엘리먼트도 DOM 엘리먼트와 똑같은 엘리먼트이므로, 서로 중첩되거나 섞이는 것이 가능하다.
• 따라서 한 컴포넌트를 정의하는 데 있어 또 다른 컴포넌트를 사용하는 것이 가능하다.
• 이때, 가져다 쓰는 컴포넌트의 내부 구조를 자세히 모르더라도 전혀 문제 되지 않는다.
• 이는 컴포넌트들의 완전한 분리를 가능하게 하며, 복잡한 UI를 더욱 쉽게 구성할 수 있도록 돕는다.

 

5. 컴포넌트 인스턴스 (Component Instance)

• 클래스로 선언된 컴포넌트들만 인스턴스를 가지며, 이를 컴포넌트 인스턴스(Component Instance)라고 부른다.
• 컴포넌트 클래스 내부에서 this 키워드를 통해 참조하는 대상에 해당한다.
• 개발자가 직접 생성, 수정, 삭제하며 다룰 일은 거의 없다. React가 알아서 해주기 때문이다.
• 지역 상태를 저장하고 생명 주기 이벤트들에 대한 반응을 제어할 때 매우 유용하다.
• 이와 달리, 함수형 컴포넌트는 인스턴스를 갖지 않는다.