React

[React] 2. Element vs Component (feat. Vue)

개발자 뭄뭄 2022. 12. 13. 16:35
반응형

1. Element

리액트 공식문서에는 Element의 정의에 대해서 이렇게 서술한다.

엘리먼트는 React 앱의 가장 작은 단위입니다.

const element = <h1>Hello, world</h1>;

React 엘리먼트는 일반 객체이며 불변(immutable) 하다. 즉, 한 번 생성된 이후에는 자식이나 속성을 변경 할 수 없다.

만약 내용을 변경하고 싶다면, 새로운 객체를 만들어서 rendering 하는 방식으로 사용한다.

 

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

2. Component

그렇다면 컴포넌트는 무엇일까? Vue에서 사용한 것 처럼 작은 컴포넌트들이 모여서 - 큰 컴포넌트를 만드는

하나의 재사용 하기 위한 '단위' 이다.

  • props라는 객체 인자를 받고,  '엘리먼트'를 리턴한다.
    • Props는 Property(속성)을 의미하며 READ ONLY data 이다. 즉 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없다.
  • 항상 컴포넌트의 이름은 대문자로 시작해야 한다.

컴포넌트에는 크게 '함수 컴포넌트' 와 '클래스 컴포넌트' 로 구분할 수 있다.

  1. 함수 컴포넌트
  2. 클래스 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

출처 : Your Dictionary

Element와 Component에 대해서 공부하다보니, 찰떡같은 예시는 아니지만 분자와 원자의 관계가 생각났다.

분자는 어떠한 성질을 가지는 최소 단위를 의미하는데,

어떤 의미에서 보면 Component는 내가 원하는 성질을 갖는 최소 단위가 된다는 점에서 분자랑 닮은 것 같다.

 

분자는 원자..로 이루어져있는데,

Component는 Element로 이루어졌다기 보다는 반환하는 객체에 속하지만!

어쨌든 포함관계를 굳이 따져보자면 component보다는 Element가 더 작은 단위니까.

그냥 이런 비유가 생각났다. 

반응형