리액트 엘리먼트(Element) & 컴포넌트(Component)

리액트의 엘리먼트(Element)와 컴포넌트(Component)의 차이점이 무엇인지 알아보았다.

 

 

리액트 엘리먼트(React Element)

• 자바스크립트 객체
  (JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 됨)
• 리액트로 화면을 그려내는 데에 가장 기본적인 요소
• 우리가 실제로 보게되는 화면을 구성하고 있는 블럭
• 바로 사용되지는 않고 컴포넌트에서 리턴을 받아서 사용함
• 한 번 생성되면 다시는 변형되지 않음

 

import ReactDOM from 'react-dom';

const element = <h1>Hello, World!</h1>;
console.log(element);
ReactDOM.render(element, document.getElementById('root'));

 

리액트 컴포넌트(React Component)

• 엘리먼트를 반환하는 함수 혹은 클래스를 의미
  (함수형 컴포넌트는 function 으로 정의하고, 클래스형 컴포넌트는 class로 정의)
• 엘리먼트를 좀 더 자유롭게 다루기 위한 하나의 문법
• 개별적인 컴포넌트를 제작해두면 UI 재사용이 가능하기 때문에 편리함
• 컴포넌트 함수 이름을 통해 하나의 태그처럼 활용할 수도 있음

cf. ★리액트 컴포넌트의 이름은 반드시 첫글자를 대문자로 작성★해야 오류가 발생하지 않는다.

 

function Intro() {
  return <h1>Hello, World!</h1>;
}

const element = (
  <>
    <Intro />
    <Intro />
    <Intro />
  </>
);

ReactDOM.render(element, document.getElementById('root'));