Fragment

1. Fragment란?

-> 컴포넌트를 감싸는 녀석(?) 이라고 보면 됩니다. ㅎㅎ

 

이렇게 말하면 너무 불친절 하니까 아래 부가적으로 Fragment를 설명해보겠습니다.

 

2. Fragment를 사용하는 이유?

-> 기본적으로 한 컴포넌트에서 jsx 템플릿을 반환한다고 이전 게시물들에서 설명했습니다.

이 때, 여러 html 태그를 return 하고 싶으면 어떻게 해야 할까요? 이럴 때 사용하는 것이 Fragment 입니다.

 

Fragment를 사용하는 방법은 3가지가 있지만 가장 간단한 방식을 아래 예제 코드로 보여드리겠습니다.

 

/src/App.js 파일 코드를 한 번 보시죠!

function App() {
  const number = 1;

  const double = (number) => {
    return number * 2;
  };

  double();

  return (
    <>
      <div>{double(number)}</div>
      <button>Submit</button>
    </>
  )
}

export default App;

 

뭐가 달라졌을까요??

 

눈썰미가 좋으신 분들은 금방 맞추셨겠지만, 아니신 분들을 위해 설명드립니다. ㅎㅎ

 

return() 부분을 보시면 빈 태그가 있습니다. ( <> </> )

 

이 녀석을 Fragment라고 해줍니다. ㅎㅎ

 

위와 같은 방식으로 Fragment를 사용하면 됩니다. ㅎㅎ