[React] Fragment [<> </>] 사용 이유와 사용법

아무지식 없이 react를 마주하였을 때 매번 함수 컴포넌트 내에서 `<> ...</>` 을 써주었다.

그 이유는 쓰지않으면 오류가나기에,,  제대로 된 이유를 알지 못했다. 그저 사용해야 오류가 나지 않는구나 생각하였는데, 이러한 이유들이 존재했다.

이번에 기초부터 공부를 하며 이유를 알게 되었다. 전체적인 JSX 문법 형식을 몰라서 이러한 일이 발생하지 않았을까 싶다. 

Fragment란?

`<Fragment>`단일 요소가 필요한 상황에서는 요소를 래핑하여 함께 그룹화하는 문법이다.

React의 JSX문법을 이용할 때에는 HTML을 반환할 때 반드시 하나로 감싸진 태그를 반환하여야 한다.

function App() {
  return (
    <p>안녕!</p>
    <p>리액트!<p/>
  );
}

위와같이 두 개의 태그를 연달아서 작성하게 되면 오류가 발생한다!

 

function App() {
  return (
    <div>
    	<p>안녕!</p>
    	<p>리액트!<p/>
    </div>
  );
}

`<div>`태그로 감싸게 된다면 가능하지만, 이렇게 반환을 하게되면 불필요한 `<div>`사용이 계속 일어날 수 있다.

이를 해결하기위해 `<Fragment>`를 사용하여 요소를 그룹화 시키는 것이다.

 

단축문법

function App() {
  return (
    <Fragment>
    	<p>안녕!</p>
    	<p>리액트!<p/>
    </Fragment>
  );
}

와 같이 사용할 수 있지만, 단축문법 `<>` `</>` 을 사용하여 간편하게 나타낼 수 있다.

function App() {
  return (
    <> //단축문법
    	<p>안녕!</p> 
    	<p>리액트!<p/>
    </>
  );
}

 

 

선택사항

• 선택 사항 `key` : 명시 `<Fragment>`적 구문으로 선언된 조각에는 키가 있을 수 있다.

 

주의사항

• `key`조각으로 전달하려면 `<>...</>`구문을 사용할 수 없다. `<Fragment key={yourKey}>...</Fragment>` 와같이 랜더링 하여야 한다.