27. Fragments(프래그먼트) 사용법

• 프로젝트 링크

• Fragments(프래그먼트) 사용법

  • JSX 표현식은 하나의 상위 혹은 부모 요소를 가지고 있어야 한다.
  • 하지만 불필요한 div 요소를 추가하고 싶지 않을 수 있다.
  • 프래그먼트는 리액트에 내장되어있는 컴포넌트다.
  • 이 fragment 컴포넌트를 사용하면 div를 대체할 수 있다.

  function App() {
    // 아래처럼 루트 요소가 있어야 된다.
    // 그 이유는 함수가 하나의 값을 반환하기 때문이다.
    return (
      <div>
        <h1>Hello World!</h1>
        <p>React is awesome!</p>
      </div>
    );
  }
  
  export default App;
  

  function App() {
    // 아래처럼 루트 요소가 없으면 에러가 발생한다.
    // 그 이유는 함수가 하나의 값을 반환하기 때문이다.
    // 아래는 2개의 값을 반환하는 꼴이다.
    return (
      <h1>Hello World!</h1>
      <p>React is awesome!</p>
    );
  }
  

  function App() {
    return (
      <Fragment>
        <h1>Hello World!</h1>
        <p>React is awesome!</p>
      </Fragment>
    );
  }
  

  function App() {
    return (
      <>
        <h1>Hello World!</h1>
        <p>React is awesome!</p>
      </>
    );
  }