빈 태그 fragment 활용하기

fragment

• React에서는 return 안에 코드를 작성할 때 바깥쪽을 하나의 큰 묶음으로 묶어야 함

• 할 거 없으면 <> ... </>으로 묶어도 됨
  <> ... </> 이것이 바로 fragment🌟

• React에서 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있는 태그

• 사용 시 key가 없다면 <></> 처럼 빈 태그로 사용할 수 있지만, 만약 key가 있다면 문법으로 명시적으로 선언해주어야 한다.

• <div>로 감싸는 것보다 렌더링 될 때 더 빠르다. (아주 조금, docs 피셜!)

💡 Why?

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다.
리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.