Search
moon
sun

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 를 통해서도 생성할 수 있습니다.
1.
React JavaScript 코드
2.
JSX 코드

1️⃣ React JavaScript 코드

문법

React.createElement( type, props, chlidren);
JavaScript
복사
1.
type (타입)
•
엘리먼트의 타입을 나타냅니다. 이는 생성하려는 엘리먼트의 종류를 지정합니다.
•
예를 들어, HTML 태그를 나타내려면 문자열로 태그 이름을 사용합니다. 예: 'div', 'span', 'h1' 등.
•
사용자 정의 컴포넌트를 나타내려면 해당 컴포넌트의 함수나 클래스를 사용합니다.
2.
props (속성)
•
엘리먼트에 부여할 속성(properties 또는 props)을 나타냅니다.
•
객체 형태로 전달되며, 속성은 해당 엘리먼트가 어떻게 동작하고 어떻게 표시될지에 영향을 미칩니다.
3.
children (자식)
•
엘리먼트의 자식 엘리먼트를 나타냅니다.
•
텍스트, 다른 React 엘리먼트, 또는 배열로 여러 자식을 가질 수 있습니다.

예시코드1

const element = React.createElement('h1', null, 'Hello, World!');
JavaScript
복사
React.createElement 함수는 React 엘리먼트를 생성하는 역할을 합니다.
1.
첫 번째 매개변수는 엘리먼트의 타입이며, 문자열 'h1'은 <h1> HTML 엘리먼트를 나타냅니다.
2.
두 번째 매개변수는 엘리먼트의 속성(properties 또는 props)이며, null은 속성이 없음을 나타냅니다.
3.
세 번째 매개변수는 엘리먼트의 자식(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
복사

2️⃣ JSX 코드

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

문법

const element = <type prop="">childeren</h1>;
JavaScript
복사
1.
type (타입)
•
엘리먼트의 타입을 나타냅니다. 이는 생성하려는 엘리먼트의 종류를 지정합니다.
•
예를 들어, HTML 태그를 나타내려면 문자열로 태그 이름을 사용합니다. 예: 'div', 'span', 'h1' 등.
•
사용자 정의 컴포넌트를 나타내려면 해당 컴포넌트의 함수나 클래스를 사용합니다.
2.
props (속성)
•
엘리먼트에 부여할 속성(properties 또는 props)을 나타냅니다.
•
객체 형태로 전달되며, 속성은 해당 엘리먼트가 어떻게 동작하고 어떻게 표시될지에 영향을 미칩니다.
3.
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 18 이상
const root = ReactDOM.createRoot(document.getElementById('root')); root.render( element )
JavaScript
복사
⚡ React 17 이하
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 엘리먼트 속성

1.
class 속성
2.
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
복사