[React] Flex Component 만들기 (feat, MUI-Stack)

Material UI로 작업을 진행하면서 Box 컴포넌트에 아이템들을 넣고 flex container로 만들어 아이템들을 정렬했다.

그런데 Material UI를 뜯어보다 보니 flex가 적용되어 아이템들을 예쁘게 정렬해주는 Stack 컴포넌트가 이미 있지 뭐람?!

stack 컴포넌트로 바꿔주니 지저분하게 길었던 sx={{ display: flex, justify-content: ~~~ }}와 같은 아이들이 샥 사라지고 깔끔하게 정리되었다. 

 

정확히 MUI의 Stack 컴포넌트가 어떻게 작동하는지 이해하고, flex 개념을 리마인드하기 위해 직접 어디서든 재사용 가능한 Flex Container 컴포넌트를 만들어봤다. 

 

import styled from 'styled-components';

const FlexContainer = styled.div`
  display: flex;
  border: 1px solid blue;
`;

const align_items = align => {
  switch (align) {
    case 'start':
      return 'flex-start';
    case 'end':
      return 'flex-end';
    case 'center':
      return 'center';
    case 'baseline':
      return 'baseline';
    default:
      return 'stretch';
  }
};

const flex_direction = direction => {
  switch (direction) {
    case 'vertical':
      return 'column';
    case 'horisontal':
      return 'row';
    default:
      return 'row';
  }
};

const Flex = ({ align, direction, split, children, style }) => {
  return (
    <FlexContainer
      style={{ alignItems: align_items(align), flexDirection: flex_direction(direction), ...style }}
    >
      {split
        ? children.map((node, i) => {
            // return i !== children.length - 1 ? (
            //   <>
            //     <node.type>{node.props.children}</node.type>
            //     <split.type>{split.props.children}</split.type>
            //   </>
            // ) : (
            //   node
            // );
            return i !== children.length - 1 ? (
              <>
                {node}
                {split}
              </>
            ) : (
              node
            );
          })
        : children}
    </FlexContainer>
  );
};

export default Flex;

기본 개념 정리도 해서 글 올려봐야지!