[컴포넌트 소개] flex VS grid VS hstack #layout

지난 포스팅에서 가장 기본적인 wrapping component인 rx.box와 rx.fragment를 소개했습니다.
하지만, 기본적인 스타일(예를 들면 가운데정렬이나 컴포넌트 간격 조절 등?)만 적용하려고 해도
코드라인이 길어집니다.
reflex에서는 이런 작업의 편의를 위해
rx.flex, rx.container, rx.center, rx.stack, rx.vstack, rx.hstack, rx.grid 등
다양한 컴포넌트를 다양하게 제공하고 있습니다.

 

rx.center

rx.center는 rx.box의 자식컴포넌트를 중앙으로 정렬해주고 flex-box가 적용되며, 
아래의 CSS가 기본적으로 적용되어 있습니다.

{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

display: flex 속성 등 위 코드의 맨 위 네 줄(display) 덕분에
기본적으로 컴포넌트들이 (플렉스박스가 적용되어) 플렉스아이템이 되고,
결과적으로 우선 한 줄 안에 표시됩니다.
예를 들어 rx.text는 <p> 태그로 변환되지만
아래처럼 같은 라인에 표시됩니다.

 

rx.container

rx.center와 가장 유사하게 구현되는 컴포넌트로 rx.container가 있습니다.
rx.container는 자식컴포넌트를 감싼다는 개념보다는,
박스의 영역을 제한하는 용도로 주로 사용되는 flex-wrapper입니다.

container 또한 flex-box로, 자식 컴포넌트가 플렉스아이템으로 작동하는데
flex_direction의 기본값이 "column"이라서 줄바꿈이 적용됩니다.
하지만 flex_direction="row" 파라미터를 추가하면
rx.center와 마찬가지로 자식컴포넌트가 열방향으로 먼저 쌓이게 됩니다.

rx.container 기본 동작(flex_direction="column")

 

rx.container에 flex_direction="row"를 적용한 경우

rx.center와 rx.container를 먼저 보여드렸지만,
실제로는 rx.flex가 이들의 부모라고 할 수 있습니다.

rx.flex

rx.flex는 flex-box 속성이 추가된 rx.box와 같습니다.
이후에 소개드릴 rx.grid와 rx.stack와 뚜렷한 차이가 있으므로
경우에 맞게 레이아웃 컴포넌트를 고르는 것이 중요합니다.

(1) rx.flex는 컨테이너 공간을 가득 채웁니다. 일반적으로 rx.spacer()와 함께 사용되며,
    컴포넌트 사이에 spacer가 삽입된 경우 스페이싱의 간격이 동일합니다.

(2) rx.grid는 컨테이너 공간을 가득 채우는 점은 동일하지만
    컴포넌트 사이의 공간이 동일하지 않습니다.
    예를 들어 3개의 컴포넌트가 한 줄의 grid 안에 들어있는 경우
    각 컴포넌트의 시작점이 기준이라서, 정확히 0, 1/3, 2/3 지점부터 시작하는데, 
    스페이싱의 크기가 다릅니다.

(3) rx.stack은 rx.grid와 달리 컴포넌트 사이의 간격이 동일합니다.
    또한 rx.flex와 달리 컴포넌트 사이의 간격이 임의 값으로 고정되어 있습니다.
    결과적으로 한 줄을 자동으로 가득 채우지 않으며, 위 그림과 같이 우측이 비게 됩니다.

세 가지 레이아웃 컴포넌트의 차이에 대해 명확히 이해해 둘 필요가 있습니다.
모든 레이아웃 컴포넌트에 대한 설명은 공식문서를 참고해 주시기 바랍니다.

https://reflex.dev/docs/library/layout/

Reflex App