[React] 04. Element

dmn_nmd·2023년 10월 11일

FE: React

목록 보기
4/10
post-thumbnail

엘리먼트 Element

  • Dom Element
    • HTML 태그를 기반으로 생성된다.
    • 웹 페이지의 구조를 나타내는 객체
  • React Element
    • DOM Element의 가상 표현
    • create element 함수를 통해 element로 변환된다.
    • 리액트 앱을 구성하는 가장 작은 빌딩 블록
    • Javascript object 형태
    • 불변성 : Elements 생성후에는 children, attributes를 바꿀 수 없다.
      • 기존 Elements 변경 불가능, 새로운 Element를 만들어 바꾸어야 함
  • 아래의 단계를 거쳐 html에 적용된다.

1. JSX

const MyComponent = () => {
 return (
   <div className="container">
     <h1>Hello, world!</h1>
   </div>
 );
};

2. CreatElement 변환

const MyComponent = () => {
  return React.createElement(
    'div',
    { className: 'container' },
    React.createElement('h1', null, 'Hello, world!')
  );
};

3. React Element

const element = {
  type: 'h1',
  props: {
    className: 'container',
    children: 'Hello, world!'
  }
};

4. 실제 DOM에 업데이트 되는 HTML

<div class="container">
  <h1>Hello, world!</h1>
</div>
profile
일잘러가 되어야지

0개의 댓글