[React Exam 26] <React.Fragment> vs <Fragment> vs <>

모든 함수의 리턴은 1개 만을 넘겨줄수 있기 때문입니다. 여러개를 리턴해야 하는 경우에는 묶어서 전달해줘야 한다는 것입니다.

 

마찬가지로 react에서도 컴포넌트가 여러 요소를 리턴할 때는 반드시 하나의 루트 태그로 감싸서 리턴해야 합니다. 보통의 경우 우리들은 여러개를 묶어서 리턴할 때는 div 태그를 주로 사용합니다. 그런데 이럴 경우 다른 요소의 내부로 들어가야 하는 경우에는 문제가 발생하게 됩니다.

아래가 문제가 생기는 경우 입니다. 

<tr>         <div>             <td>한사람</td>             <td>18세</td>             <td>남자</td>         </div>     </tr>     또는     <ul>         <div>             <li>아이템 1</li>             <li>아이템 2</li>             <li>아이템 3</li>             <li>아이템 4</li>         </div>     </ul>

 

이럴때 Fragment를 사용하면 됩니다. 

 

Fragment는 컴포넌트를 렌더링할 때 사용하는 컴포넌트입니다. 그리고 컴포넌트를 렌더링할 때 불필요한 DOM 요소를 생성하지 않습니다. Fragment 조각은 HTML에서 어떠한 출력도 생성하지 않으며 DOM 구조에 영향을 주지 않고 요소를 함께 그룹화하는 데 사용할 수 있습니다.

 

<Fragment>와 <React.Fragment> 그리고 <>는 동일한 기능을 수행하는 React의 기능입니다.

<Fragment>는 JSX에서 단축 구문으로 사용됩니다.

<>는 JSX에서 단축 구문으로 사용  사용됩니다.

 

대부분 동일하다고 생각하지만 주요 차이점은 다음과 같습니다.

<></>는 다른 요소와 같은 방식으로 사용할 수 있지만, 키나 속성을 지원하지 않습니다.

 

아래 3가지 예는 모두 동일한 기능을 수행 합니다.

// <React.Fragment> 사용 예시 import React from 'react'; function MyComponent() {     return (     <React.Fragment>         <h1>Title</h1>         <p>Paragraph 1</p>         <p>Paragraph 2</p>     </React.Fragment>     ); } // <Fragment> 사용 예시 import React, {Fragment} from 'react'; function MyComponent() {     return (     <Fragment>         <h1>Title</h1>         <p>Paragraph 1</p>         <p>Paragraph 2</p>     </Fragment>     ); } // <> 사용 예시 function MyComponent() {     return (     <>         <h1>Title</h1>         <p>Paragraph 1</p>         <p>Paragraph 2</p>     </>     ); }

 

 

FragmentExam.js 파일을 만듭니다. 

import React from "react";
 
export const FragmentExam1 = ({user})=>{
    let {username, age, gender} = user;
    return (
        <React.Fragment>
            <td>{username}</td>
            <td>{`${age}세`}</td>
            <td>{gender ? "남자" : "여자"}</td>
        </React.Fragment>
    );
}
 
export const FragmentExam2 = ({user})=>{
    let {username, age, gender} = user;
    return (
        <>
            <td>{username}</td>
            <td>{`${age}세`}</td>
            <td>{gender ? "남자" : "여자"}</td>
        </>
    );
}
 
export const DivExam = ({user})=>{
    let {username, age, gender} = user;
    return (
        <div>
            <td>{username}</td>
            <td>{`${age}세`}</td>
            <td>{gender ? "남자" : "여자"}</td>
        </div>
    );
}
// 이름 바꿔서 한번에 여러개 export
export {FragmentExam1 as Ex01, FragmentExam2 as Ex02, DivExam as Ex03}

App.css 파일을 만듭니다. 

1 2 3 4 5 6 7 8 9

table {   margin: 10px;   border: 1px solid black;   border-collapse: collapse; } th, td {   border: 1px solid black; }

 

App.js  파일을 만듭니다. 

import { FragmentExam1, FragmentExam2, DivExam, Ex01, Ex02, Ex03 } from "./FragmentExam";
import './App.css'
const App = ()=>{
    let user = {"username":"한사람","age":18,"gender" : true};
    return (
      <table>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>성별</th>
        </tr>
        <tr>
          <FragmentExam1 user={user}/>
        </tr>
        <tr>
          <FragmentExam2  user={user}/>
        </tr>
        <tr>
          <DivExam  user={user}/> {/* 이 부분 주의 */}
        </tr>
        <tr>
          <Ex01  user={user}/>
        </tr>
        <tr>
          <Ex02  user={user}/>
        </tr>
        <tr>
          <Ex03  user={user}/> {/* 이 부분 주의 */}
        </tr>
      </table>
    );
}
export default App;

 

index.js  파일을 만듭니다. 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
 
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
);    

 

결과 화면입니다.