[React.js] <React.Fragment>에 대해서 알아보자

❗ 서론

서론이랄게 딱히 없긴하지만, 내가 왜 지금에서야 이 포스팅을 쓰냐면 내가 여태 당연시 써오던게 

React.Fragment인지 몰랐고 다른 개발자분들이 쓰신 이런 저런 포스팅을 보다보니 내가 써오던게 React.Fragment라는걸

알게되었다. 아무래도 그냥 쓰는거보단 뭐 조금이라도 더 알고쓰면 뭘 하든 어떻게든 득이 있지 않을까 ? 파이팅.

 

❓ React.Fragment

• Fragment는 React v16에 추가된 기능이다.
• 컴포넌트가 여러 Element를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 하는데, 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있다.

---

✔ 예제

return (
    <h1>Hello!</h1>
    <h2>My nams is Kim Ji Woo</h2>
);

해당 예제처럼 컴포넌트를 생성한다면

You can't return more than one "root" JSX element.

두 개 이상은 return 할 수 없다는 에러가 출력될 것이다.

 

그런데 React.Fragment가 없을 당시에는 

  return (
      <div> // add
        <h1>Hello!</h1>
        <h2>My nams is Kim Ji Woo</h2>
      </div> // add 
  );

이렇게 쓸데없는 <div> 태그로 감싸게 되어

이렇게 코드의 가독성을 망치곤 하였다.

 

하지만 React.Fragment를 사용한다면

이렇게 깔끔하게 보여질 수 있다 ! 

---

✔ React.Fragment 사용 방법

React.Fragment를 사용하는 방법에는 3가지가 있다.

 

1. <React.Fragment> </React.Fragment>

  return (
      <React.Fragment> // add 
        <h1>Hello!</h1>
        <h2>My nams is Kim Ji Woo</h2>
      </React.Fragment> // add 
  );

보통은 이렇게 React.Fragment를 사용하거나 Fragment로 태그들을 묶는다.

 

하지만 조금 더 간결하게 사용할 수 있는 방법이 있다.

 

 

2. <> </>

  return (
      <> // add
        <h1>Hello!</h1>
        <h2>My nams is Kim Ji Woo</h2>
      </> // add 
  );

이렇게 <> </>을 사용하면 React.Fragment를 아주 간단하게 사용할 수 있고 가독성 면에서도 우위를 점할 수 있다.

 

결론적으로, React.Fragment 를 사용하는 이유는 불필요한 HTML 요소를 줄여 가독성을 좋게하기 위함이라고 볼 수 있다.