[컴포넌트 소개] rx.box vs rx.fragment #layout

rx.box는 가장 기본적인 <div> 태그와 같습니다.
특정 컴포넌트를 <div> 태그로 한 겹 감싸주는 기능 외에
아무 스타일도 적용되지 않습니다.

rx.box와 거의 동일한 컴포넌트로 rx.fragment가 있습니다.
rx.box와 rx.fragment의 차이는 딱 한 가지입니다.
rx.box는 <div>로 변환되어 그 안의 컴포넌트들을 한 겹 감싸주는 데 반해,
rx.fragment는 (렌더링 후를 보면) 어떤 태그로도 감싸져 있지 않다는 점입니다.

그래서 rx.fragment에는 (당연히) 어떤 prop이나 이벤트 트리거도 적용되지 않습니다.

 

rx.box의 렌더링 결과

rx.fragment의 렌더링 결과

 

그밖에 rx.box와 유사한 컴포넌트들

rx.box에 아주 조금씩 스타일이 추가적용된 컴포넌트들로

rx.center, rx.stack, rx.vstack, rx.hstack 등이 있습니다.

이들 컴포넌트는 이어지는 포스팅에서 조금씩 다뤄보겠습니다.