react 프로젝트를 시작하기에 앞서 환경설정을 해놓을때 폴더 분류를 하는데 element와 component의 차이를 정확히 알지 못 하고 분류하려니 분류하는 기준이 애매해져서 폴더 분류가 마구잡이로 된 느낌이 들어서 이번 기회에 차이점에 대해서 정확히 알아 폴더분류를 깔끔하고 명확하게 하고자 한다.
Element
const element = (
<h1>
Hello, world!
</h1>
);- element는 component를 이루는 작은 단위
- 엘리먼트는 인스턴스가 아니다. 엘리먼트는 immutable한 plain object이다.(엘리먼트가 생성되면, 절대로 변화되지 않는다.)
- 엘리먼트는 컴포넌트 인스턴스나 DOM 노드에 관한 정보를 묘사하고 있다.
- Element는 바로 사용되지는 않으며, Component에서 리턴받아서 사용되곤 합니다.
- 엘리먼트는 타입(type)과 속성(props) 2가지 필드로 구성된다.
PlainObject : 오래된 방식의 단순 자바 객체입니다. 조금 더 디테일한 의미는 특별한 환경(클래스나 인터페이스 등)에 종속되지 않는 일반적인 Java 객체를 의미합니다.
이 단순 자바 객체는 다른 클래스나 인터페이스를 extends 및 implements 받아 메서드를 구현해야 하는 클래스가 아닌, getter/setter 와 같이 기본적인 기능만 가진 자바 객체를 뜻한다.
// An Element describing DOM element
{
type: 'button',
props: {
className: 'button button-blue',
children: {
type: 'b',
props: {
children: 'OK!'
}
}
}
}- type으로 이것이 DOM 노드인지, 아니면 컴포넌트 인스턴스인지 알려준다.
- 그리고 props로 해당 객체가 갖고 있는 속성들, 클래스네임이나 자식 엘리먼트 등을 나타낸다.
- 위 엘리먼트는 아래처럼 단순한 HTML을 나타낸다.👇
<button class="button button-blue">
<b>OK!</b>
</button>- 컴포넌트를 묘사하는 엘리먼트도, DOM 노드를 묘사하는 엘리먼트도 모두 같은 엘리먼트이다. 그들은 중첩될 수 있고 섞일 수 있다.
- type에 지금처럼 string으로 적으면 DOM node를 나타내는 것이고 ex) Button 이런식으로 적으면 component instance를 나타내는 것이다.
Component
- 함수 컴포넌트는 데이터를 가진 props 객체인자를 받아 element를 반환한다.
- UI를 재사용 가능한 개별적인 여러 조각으로 나눈 것이다.
- 컴포넌트는 엘리먼트 트리를 캡슐화한다.
const DeleteAccount = () => (
<div>
<p>Are you sure?</p>
<DangerButton>Yep</DangerButton>
<Button color="blue">Cancel</Button>
</div>
)- react는 component들의 조합으로 이루어지기 때문에 어떤 element 트리를 리턴할지는 보이지 않는다. 그래서 React는 이것을 구현할 때 가장 밑에 깔려있는 DOM 태그 엘리먼트가 나올 때까지 계속적으로 해당 컴포넌트가 무엇을 리턴할 것인지 묻는다.
- 리액트 컴포넌트에서는 props가 input이고 엘리먼트 트리가 output이 된다.
- 이렇게 리턴된 엘리먼트 트리는 여러 엘리먼트들이 중첩, 섞여있는 구조이다. 이런 특성들로 인해 내부적인 DOM 구조에 의존하지 않고 UI를 독립적으로 조합할 수 있도록 한다.
- 우리는 일일이 인스턴스를 만들고, 업데이트하고, 삭제할 필요가 없다. 그냥 무엇을 화면에 나타내고 싶은지 컴포넌트들로 나타내면(=엘리먼트로 설명해주면) 리액트는 인스턴스를 알아서 관리한다.
