[ React ] React Element 와 Component의 차이점

 

React Element

React 엘리먼트는 React 앱의 가장 작은 단위로, 브라우저 DOM 엘리먼트와 다르게 일반 객체(plain object)이며, 쉽게 생성이 가능하다.

React 엘리먼트는 화면에 표시할 내용을 기술하며, React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트해준다.

 

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

 

React 엘리먼트는 불변객체이며, 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다.

 

 

사용자 정의 컴포넌트로도 React 엘리먼트를 나타낼 수 있다. (Welcome 컴포넌트를 엘리먼트로 사용)

const element = <Welcome name="Sara" />;

 

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면, JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는데, 이 객체를 "props"라고 한다. 

 

 

 

 

 

 

 

 

React Component 

react 컴포넌트는 작고 고립된 코드의 파편으로, 이런 컴포넌트를 이용하여 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각들을 개별적으로 살펴볼 수 있다. 컴포넌트는 개념적으로는 JavaScript의 함수와 유사하다. "props"라는 임의의 입력을 받은 뒤, 화면에 어떻게 표시될지 기술하는 React 엘리먼트를 반환하여 UI를 구성하며, 함수형 컴포넌트와 클래스 컴포넌트가 존재한다.

 

const ShoppingList = () => {
	return(
    	<>
            <div className="shopping-list">
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                  <li>Instagram</li>
                  <li>WhatsApp</li>
                  <li>Oculus</li>
                </ul>
            </div>
       </>
    )
}

export default ShoppingList;

 

 

 

 

 

함수 컴포넌트

JavaScript 함수로 함수형 컴포넌트를 정의할 수 있다.

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

Welcome 함수는 props(속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하는 함수 컴포넌트이다.

 

 

 

 

 

 

클래스 컴포넌트

ES6의 class를 사용하여 컴포넌트를 정의할 수 있다. 

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

 

 

 

 

 

 

---

 

🌸 출처 🌸

 

Rendering Elements - React

Components and Props -React

React.Component - React