Fragment란?

Javascript에서는 하나 이상의 값을 반환할 수 없기 때문에 React에서 하나 이상의 Element를 반환할 때 <></>를 사용하거나, React에서 제공하는 <Fragmentg></Fragment>를 사용한다. 정확히 React.Fragment와 <></>의 차이가 무엇인지, 어떤것을 사용하는것이 더 나은지 정리해본다.

React Fragment

---

<></>란?

단축 문법(short syntax)으로, React 16부터 도입되었다. div나 다른 HTML 요소를 생성하지 않고도 여러 요소를 그룹화할 수 있는 간단한 방법을 제공해준다.

React.Fragment란?

표준 문법(Stantard syntax)으로, React 16 이전에 사용되었던 표준 문법으로, 명시적으로 React.Fragment라는 컴포넌트를 사용한다. React 16부터는 단축 문법이 도입되면서 덜 사용되게 되었다.

Fragment와 <></>의 차이점

1. 단축문법(<></>)은 더 간결하고 깔끔하게 보일 수 있지만, 몇몇 도구나 브라우저 확장 프로그램에서 지원되지 않을 수 있다.
2. Fragment는 key 속성을 받을 수 있다. 여러 데이터들을 map을 통해 렌더링 할때 <></>는 key값을 받을 수 없어 해당 데이터의 효율적인 update 감지가 어려 수 있다.

---

 

생각외로 Fragment가 더 예전에 사용하던 문법이라는 것에 놀랐고,

나는 왠만하면 명시적으로 Fragment를 사용함으로써 하위 Element를 묶고있다는 것을 알려주는 것이 더 직관적이라고 생각한다.