[React.js] 엘리먼트(Element)와 컴포넌트(Component)

엘리먼트(Element)

전 React 엘리먼트를 영화의 프레임으로 생각합니다. React 엘리먼트는 매 순간 어떻게 보여야 되는지 파악하고 변하지 않습니다. - overreacted

• React 앱의 화면을 표시하는 가장 작은 구성 요소로써 일반 객체(plain object)이다.
• 영속성을 가지지 않는다. 즉 매번 새로 만들어지고 버려진다.
• 불변함을 가지기 때문에 생성한 이후 해당 엘리먼트의 자식이나 props을 변경할 수 없다.
  • 따라서 다른 렌더링을 보여주고 싶다면 새로운 엘리먼트 트리를 생성해야 한다.

React 엘리먼트는 화면에 무엇을 그리고 싶은지에 대한 정보가 들어있는 객체와 같다.

React.createElement(
  type,
  [props],
  [...children]
)

• type 인자로는 태그 이름 문자열('div' 또는 'button' 등), React 컴포넌트 타입, React Fragment 타입 중 하나가 올 수 있다.
  • JSX 태그의 첫 부분은 엘리먼트의 타입을 결정한다. 따라서 컴포넌트 타입일 경우 대문자로 시작해야한다. 
• JSX를 사용할 경우 React.createElement()를 직접 호출하는 일은 거의 없다.
• 엘리먼트들이 모여서 트리로 구성 된다.
  • 엘리먼트 트리는 메모리 상에만 존재하는 가상 DOM(Virtual DOM)이다.

// JSX는 아래 오브젝트를 만들기 위한 편의구문이다.
// <div>
//   <button className='blue'> 
// </div>

// 단순화한 구조(크게 중요하지 않은 몇 가지 속성들은 생략 됨)
{
  type: 'div',
  props: {
    children: {
      type: 'button',
      props: { className: 'blue' }
    }
  }
}

컴포넌트(Component)

const Button = ({ name, onClick }) => (
  <button className={styles.button} onClick={onClick}>
    {name}
  </button>
);

• React 앱의 버튼, 아바타, 댓글 등을 관리하는 조각들을 컴포넌트라고 부른다.
• 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누어, 각 조각을 개별적으로 살펴볼 수 있다.
  • 엘리먼트 트리를 캡슐화 한다.
  • 즉, 모듈화한 것을 뜻하며 복잡한 UI를 개별적으로 쉽게 관리 할 수 있게 한다.
• 엘리먼트가 모여 컴포넌트라는 구조를 갖는다.
• 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다.

---

화면에 무엇을 그리고 싶은지에 대한 정보가 들어있는 객체인 React 엘리먼트. 그런 엘리먼트를 쉽게 생성하게 만들어 주는 JSX 문법, 엘리먼트가 모여 컴포넌트라는 UI 조각으로 모듈화 된다. 각각의 조각들을 개별적으로 관리하기에 유지보수가 쉽고 UI 상호작용이 많은 경우에 더 좋다.