Element

엘리먼트 (Element)

브라우저에 컨텐츠를 표현하는 하나의 단위

엘리먼트는 React에서 컴포넌트가 실제로 브라우저에 나타내는 내용을 표현하는 단위입니다. React에서 엘리먼트는 사용자 인터페이스를 나타내기 위해 사용되며, 각 엘리먼트는 가상 DOM (Virtual DOM)에서 컴포넌트의 인스턴스에 대응합니다.

JSX에서는 모든 엘리먼트에 대해 종료 태그를 명시적으로 작성해야 합니다.

(HTML에서는 몇몇 태그에서 닫는 태그가 생략되어도 유효합니다.)

HTML 인 경우 OK

<input type="text" name="test">
HTML
복사

React 인 경우 ERROR

<input type="text" name="test">
HTML
복사

React 인 경우

<input type="text" name="test" />
HTML
복사

종료 의미를 가지는 / 를 받드시 명시해야한다.

엘리먼트의 생성

엘리먼트는 React 함수를 이용해서 생성할 수도 있으며, React 확장 문법인 JSX 를 통해서도 생성할 수 있습니다.

React JavaScript 코드

JSX 코드

React JavaScript 코드

문법

React.createElement( type, props, chlidren);
JavaScript
복사

type (타입)

•

엘리먼트의 타입을 나타냅니다. 이는 생성하려는 엘리먼트의 종류를 지정합니다.

•

예를 들어, HTML 태그를 나타내려면 문자열로 태그 이름을 사용합니다. 예: 'div', 'span', 'h1' 등.

•

사용자 정의 컴포넌트를 나타내려면 해당 컴포넌트의 함수나 클래스를 사용합니다.

props (속성)

•

엘리먼트에 부여할 속성(properties 또는 props)을 나타냅니다.

•

객체 형태로 전달되며, 속성은 해당 엘리먼트가 어떻게 동작하고 어떻게 표시될지에 영향을 미칩니다.

children (자식)

•

엘리먼트의 자식 엘리먼트를 나타냅니다.

•

텍스트, 다른 React 엘리먼트, 또는 배열로 여러 자식을 가질 수 있습니다.

예시코드1

const element = React.createElement('h1', null, 'Hello, World!');
JavaScript
복사

React.createElement 함수는 React 엘리먼트를 생성하는 역할을 합니다.

첫 번째 매개변수는 엘리먼트의 타입이며, 문자열 'h1'은 <h1> HTML 엘리먼트를 나타냅니다.

두 번째 매개변수는 엘리먼트의 속성(properties 또는 props)이며, null은 속성이 없음을 나타냅니다.

세 번째 매개변수는 엘리먼트의 자식(children)이며, 'Hello, World!'는 <h1> 엘리먼트 안에 텍스트로 표시될 내용입니다.

예시코드2

const element = React.createElement(
  'a', // type: 태그 이름 또는 컴포넌트
  { 
    href: 'https://www.example.com', // props: 엘리먼트에 부여할 속성
    target: '_blank',
    style: { color: 'blue' } 
  }, 
  'https://wwwaloha.oopy.io/' // children: 엘리먼트의 자식
);
JavaScript
복사

JSX 코드

React 엘리먼트는 JavaScript 표현식을 사용하여 생성됩니다. JSX 문법을 사용하면 HTML과 유사한 문법으로 React 엘리먼트를 작성할 수 있습니다.

문법

const element = <type prop="">childeren</h1>;
JavaScript
복사

type (타입)

•

엘리먼트의 타입을 나타냅니다. 이는 생성하려는 엘리먼트의 종류를 지정합니다.

•

예를 들어, HTML 태그를 나타내려면 문자열로 태그 이름을 사용합니다. 예: 'div', 'span', 'h1' 등.

•

사용자 정의 컴포넌트를 나타내려면 해당 컴포넌트의 함수나 클래스를 사용합니다.

props (속성)

•

엘리먼트에 부여할 속성(properties 또는 props)을 나타냅니다.

•

객체 형태로 전달되며, 속성은 해당 엘리먼트가 어떻게 동작하고 어떻게 표시될지에 영향을 미칩니다.

children (자식)

•

엘리먼트의 자식 엘리먼트를 나타냅니다.

•

텍스트, 다른 React 엘리먼트, 또는 배열로 여러 자식을 가질 수 있습니다.

예시코드1

const element = <h1>Hello, World!</h1>;
JavaScript
복사

예시코드2

const element = (
  <a href="https://www.example.com" target="_blank" style={{ color: 'blue' }}>
    https://www.aloha.oopy.io/
  </a>
);
JavaScript
복사

엘리먼트의 특징

React 엘리먼트는 가상 DOM에서 컴포넌트의 상태 변화에 따라 업데이트되고, React가 이를 효율적으로 처리하여 실제 DOM에 변경 사항을 최소화합니다.

const element = <p>{new Date().toLocaleTimeString()}</p>;
JavaScript
복사

엘리먼트의 렌더링

React 엘리먼트는 ReactDOM.render()나 컴포넌트의 렌더 메소드 등을 통해 실제 DOM에 렌더링됩니다.

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

엘리먼트의 구성요소

•

컨텐츠

◦

텍스트

◦

자식 엘리먼트

•

속성

엘리먼트에 텍스트 컨텐츠만 구성

const element = <h1>Hello, World!</h1>;
JavaScript
복사

엘리먼트에 자식 엘리먼트 구성

const element = (
  <div>
    <h1>Title</h1>
    <p>Paragraph content</p>
  </div>
);
JavaScript
복사

엘리먼트 속성

JSX에서는 HTML과 유사한 속성을 사용할 수 있지만 몇 가지 차이가 있습니다.

html 과 차이가 있는 React 엘리먼트 속성

class 속성

style 속성

class 속성

JSX에서는 HTML의 class 속성을 className으로 사용합니다. 이는 JavaScript에서 class는 예약어이기 때문입니다.

// HTML
<div class="my-class">Hello</div>

// JSX
<div className="my-class">Hello</div>
HTML
복사

style 속성

HTML에서는 style 속성에 문자열로 CSS를 지정했지만, JSX에서는 객체 형태로 스타일을 지정합니다.

// HTML
<div style="color: red; font-size: 16px;">Hello</div>

// JSX
<div style={{ color: 'red', fontSize: '16px' }}>Hello</div>
HTML
복사