• JSX란 무엇인가?
• Fragments란?
• Fragments 사용법
• 장점
• 요약

JSX란 무엇인가?

JSX(JavaScript XML)는 리액트 애플리케이션에서 UI를 작성하기 위한 문법 확장입니다. JSX는 JavaScript의 확장으로, HTML처럼 보이지만 JavaScript로 컴파일됩니다.

아래는 JSX의 간단한 예제입니다.

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

JSX를 사용하면 UI 컴포넌트를 쉽게 작성하고 읽을 수 있으며, 리액트 엘리먼트를 생성할 때 더 직관적이고 간편한 코드를 작성할 수 있습니다.

Fragments란?

Fragments는 리액트 컴포넌트에서 여러 자식 엘리먼트를 그룹화할 때 사용됩니다. 이전에는 부모 엘리먼트로의 래핑 없이 여러 엘리먼트를 반환하는 것이 불가능했으나, Fragments를 사용함으로써 이러한 문제를 해결할 수 있게 되었습니다.

Fragments 사용법

Fragments는 다음과 같이 사용됩니다.

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <>
        <ChildComponent1 />
        <ChildComponent2 />
        <ChildComponent3 />
      </>
    );
  }
}

<>와 </> 태그 사이에 자식 엘리먼트를 넣어주면 됩니다. 아무런 추가적인 DOM 노드로 둘러싸지 않고도 여러 엘리먼트를 반환할 수 있게 해줍니다.

장점

Fragments를 사용하면 불필요한 DOM 요소를 추가하지 않고도 여러 엘리먼트를 반환할 수 있습니다. 이로써 불필요한 중첩을 피하고 가독성을 높일 수 있습니다.

요약

JSX Fragments를 사용하면 리액트 애플리케이션을 작성할 때 불필요한 부모 요소를 추가하지 않고도 여러 엘리먼트를 반환할 수 있습니다. 이를 통해 불필요한 중첩을 피하고 코드를 좀 더 간결하게 유지할 수 있습니다.