리액트 Fragment

리액트를 렌더할 때 주의사항

리액트의 경우엔 컴포넌트들을 만들어서 그것들을 재사용합니다. 이러한 방식때문에 여러 컴포넌트들이 같이 렌더링됩니다. 이때 주의해야할 사항은 전체가 하나로 감싸져야 한다는 것입니다.

해당 코드를 실행하면 두개의 div를 하나로 감싸지 않았기 때문에 에러가 납니다.

Adjacent JSX elements must be wrapped in an enclosing tag

이런 상황에서 저 두개의 div를 하나의 div나 span으로 감싸는 것이 최선의 방법이었습니다. 하지만 그럴 경우 불필요한 태그가 생기게 되는 한계점이 있었습니다. 이제는 이런 상황에서 Fragment를 이용하면 됩니다.

리액트16의 Fragment

위의 코드처럼 Fragment로 감싸면 에러가 나지 않고 렌더링 되는것을 확인할 수 있습니다. 

태그를 확인해보세요.

Fragment를 감싸서 내보내면 div 태그나 span태그로 불필요하게 감쌀 필요없이 나타나는 것을 볼 수 있습니다. 리액트를 하시다보면 자주 사용하게 될 것이니 꼭 알아두시기 바랍니다.

<></>와 같은 빈 태그는 주의해주세요.

Fragment의 단축 문법으로 저러한 빈 태그같이 보이는 형태로 사용할 수도 있습니다. Fragment자리에 저 빈 태그들이 들어가는 것이죠. 하지만 아직 지원하지 않는 곳이 많으니 오히려 에러가 날 수도 있습니다. 그러니 되도록이면 Fragment를 불러와서 사용해주세요.

Fragment는 key 속성만을 가집니다.

Fragment는 오직 이터레이터할 때 필요한 key 속성만 통과시킬 수 있습니다.

map을 사용할 때에도 JSX을 하나로 묶어서 내보내야 합니다. 그래서 Fragment를 사용했고, 여기에 키 속성을 전달하지 않으면 에러가 나니 키 속성을 전달했습니다. Fragment에 전달할 수 있는 속성에 key가 있다는 것을 잊지마세요.