[React] Element와 Component의 차이

김채운·2022년 8월 16일
0

React

목록 보기
3/26

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를 독립적으로 조합할 수 있도록 한다.
  • 우리는 일일이 인스턴스를 만들고, 업데이트하고, 삭제할 필요가 없다. 그냥 무엇을 화면에 나타내고 싶은지 컴포넌트들로 나타내면(=엘리먼트로 설명해주면) 리액트는 인스턴스를 알아서 관리한다.

0개의 댓글