프레임 없는 프론트엔드 북 스터디를 하다가 "프래그먼트"라는 단어를 보고 꽂혀서 평소에 자주 사용하는 React.Fragment가 다른 div랑 무슨 차이인지가 너무 궁금해졌다. 그래서 찾아보니 개발 초기에 자주 보이는 에러인
Failed to compile. ./src/App.js Line 6: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>..</>?
이 놈 때문이였는데.
return(
<div>hi</div>
<div>bye</div>
)이렇게 코드를 치면 위와 같은 에러가 발생하게 된다.(진짜 생판 몰랐을때 이거몇번 발생 했던 에러..)
이처럼 최상위 태그가 있어야만 동작하는 이유는 리액트엔진이 해석하고 랜더링 하는 형태를 보면 더 쉽게 이해된다. 자바스크립트는 두 개 이상 리턴하지 못하기 때문.
//이러면 안됨!
return (
React.createElement('div', {}, 'hi')
React.createElement('div', {}, 'bye')
);그렇기 때문에 최상위 태그가 반드시 필요한거시다! 근데 저 태그를 감싸기 위해서
return (
<div>
<div>hi</div>
<div>bye</div>
</div>
);
//리액트 엔진이 해석
return (
React.createElement('div', null,
React.createElement('div', null, 'hi'),
React.createElement('div', null, 'bye')
)
);근데 노드를 만들고 싶지 않으면? 그 때 사용하는것이 바로 Fragment 태그다. Fragment 태그는 최상위 태그로서 작동하고 key 값 또한 추가 할 수 있지만 노드를 생성하진 않는다. 너무 신기해...🥹
return (
<Fragment>
<div>hi</div>
<div>bye</div>
</Fragment>
);
//리액트 엔진이 해석
return (
React.createElement(React.Fragment, null,
React.createElement('div', {}, 'hi'),
React.createElement('div', {}, 'bye')
)
);이 내용이 더욱 와 닿고 신기했던 이유는 실제로 실무에서 개발을 하면서도 불필요하게 컴포넌트를 감싸기 위한 div 가 들어가야 하는 경우를 인지 하고 있었기 때문이다! 뭔가 굳이 없어도 되는 노드인데 추가되네 라고 생각을 가끔 했었기 때문에 이런 내용을 보고 좀 신기했다 ㅎㅎ 앞으로도 개발 할 때 잘 사용해야 할 것 같다.
참고 :
<></>와<Fragment></Fragment>는 똑같은 역할을 한다. 다만 Fragment 태그만 key값을 사용 할 수 있다.
