JSX 엘리먼트

[주인장]

1. 하나의 루트 엘리먼트

- 최상위(루트) 엘리먼트는 하나로, 자식 엘리먼트를 감싸야한다.

- 작성된 코드가 가상 DOM 으로 생성되어야하는데, 가상 DOM 은 트리구조이다. 트리구조는 최상위 노드인 루트가 1개로 이루어져 있다. 따라서, 가상 DOM 트리구조에 맞게 최상위 엘리먼트가 1개로 제공되어야한다.

- JSX 로 엘리먼트를 작성한 코드는 React 가 엘리먼트를 생성하는 코드(React.createElement)로 변환합니다. 그 후 렌더링 함수를 호출하면, 컴포넌트를 기본 구조로 렌더링 합니다. 이때 React 는 컴포넌트를 기본 구조로 Virtual DOM 을 생성합니다.

- React 의 Virtual DOM 은 각 컴포넌트 하나를 하나의 노드로 하여 트리 구조로 관리합니다. 이 때문에, 가상 DOM 에 생성하기 위해서 트리 구조 형태로 최상위의 하나의 노드를 가진 형태로 제공되어야하기 때문에 엘리먼트 들을 하나의 루트 엘리먼트로 감싸서 작성해야합니다.

- 트리 구조에서 루트는 트리의 시작 지점이며, 각 노드는 하위 노드를 가질 수 있습니다. React가 컴포넌트 트리를 효과적으로 관리하고 업데이트하기 위해서는 트리의 시작점이 되는 루트 엘리먼트가 필요합니다.

- React에서는 컴포넌트의 반환값으로 여러 개의 루트 엘리먼트를 직접 반환하는 것이 허용되지 않습니다. 반환되는 JSX는 하나의 루트 엘리먼트로 감싸져 있어야 합니다.

- 위의 잘못된 예시에서처럼 여러 루트 엘리먼트를 직접 반환하면 React가 컴포넌트 트리를 올바르게 처리할 수 없어 오류가 발생합니다. 이를 해결하기 위해서는 하나의 부모 엘리먼트로 감싸야 합니다.

2. 프래그먼트(Fragment)

- 여러 요소를 그룹화하는 데 사용되는 특수한 형태의 컴포넌트

- React 16.2.0 버전부터 도입

- Fragment를 사용하면 부모 엘리먼트를 추가로 생성하지 않고도 여러 개의 자식 엘리먼트를 그룹화할 수 있습니다. 이는 특히 불필요한 DOM 요소를 생성하지 않고 가독성을 높이고자 할 때 유용합니다.

- 명시적으로 React.Fragment를 사용하여 표현할 수도 있습니다

function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph content</p>
    </>
  );
}

3. 엘리먼트 (Element)
- 브라우저에 컨텐츠를 표현하는 하나의 단위
- 엘리먼트는 React에서 컴포넌트가 실제로 브라우저에 나타내는 내용을 표현하는 단위입니다. React에서 엘리먼트는 사용자 인터페이스를 나타내기 위해 사용되며, 각 엘리먼트는 가상 DOM (Virtual DOM)에서 컴포넌트의 인스턴스에 대응합니다.
 - JSX에서는 모든 엘리먼트에 대해 종료 태그를 명시적으로 작성해야 합니다.(HTML에서는 몇몇 태그에서 닫는 태그가 생략되어도 유효합니다.)

<input type="text" name="test" />

엘리먼트의 생성

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

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

엘리먼트의 특징

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

엘리먼트의 렌더링

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

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

엘리먼트의 구성요소

• 컨텐츠

    ◦텍스트

    ◦자식 엘리먼트

•속성

엘리먼트 속성

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

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

1.class 속성

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

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

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

2. style 속성

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

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

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