[리액트(React)] Fragments

// Fragments

- 불필요한 노드를 추가하지 않고 여러 요소들을 묶을 때 사용한다.

- 리액트는 단일 루트 컴포넌트를 반환해야 하는데, 이럴 때 <div>를 사용하면 불필요한 DOM 노드가 추가된다.

div 태그 사용

- Fragment를 사용하면 불필요한 DOM 노드 없이 묶을 수 있다.

<Fragment> </Fragment>

fragment 사용

- 최근에는 fragment 대신 빈 태그(<>)를 사용하기도 한다.

<> </>

---

function App() {
  return (
    <>
      <Header />
      <main>
        <section id="core-concepts">
          <h2>Core Concepts</h2>
          <ul>
            {CORE_CONCEPTS.map((conceptItem) => (
              <CoreConcept key={conceptItem.title} {...conceptItem} />
            ))}
          </ul>
        </section>
        <section id="examples">
          <h2>Examples</h2>
          <menu>
            <TabButton
              isSelected={selectedTopic === 'components'}
              onSelect={() => handleSelect('components')}
            >
              Components
            </TabButton>
            <TabButton
              isSelected={selectedTopic === 'jsx'}
              onSelect={() => handleSelect('jsx')}
            >
              JSX
            </TabButton>
            <TabButton
              isSelected={selectedTopic === 'props'}
              onSelect={() => handleSelect('props')}
            >
              Props
            </TabButton>
            <TabButton
              isSelected={selectedTopic === 'state'}
              onSelect={() => handleSelect('state')}
            >
              State
            </TabButton>
          </menu>
          {tabContent}
        </section>
      </main>
    </>
  );
}