Center 컴포넌트 추가 제안

[sungik-choi]

현재 상황

const Foo = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`

가로/세로 가운데 정렬이 필요한 경우 위 3가지 스타일 속성의 조합을 굉장히 자주 사용하는데,
styled-components를 사용하게 되면서, scss에서 사용하던 별도의 mixin또한 사용하지 않아 사용처마다 직접 스타일을 구현해주고 있습니다.

문제점

중복 스타일 구현을 여러 곳에서 해주어야 합니다.

어떻게 개선할 수 있는지

위 3가지 스타일 속성을 가지는 HTMLDivElement 를 추상화하는, Center 컴포넌트 추가를 제안합니다.

/* Usage */
<Center>
  <Icon name="foo" />
</Center>

• 자세한 스펙은 생각해보지 않았고, 만약 Box 컴포넌트 같은 HTMLDivElement + 여러 스타일 prop을 받는 컴포넌트가 생긴다면 이를 extend 하는 형태가 될 거 같습니다.
• 리서치해보니 Chakra UI 에선 Center 와 이를 extends하는 Square 컴포넌트와 Circle 컴포넌트를 추가로 구현하고 있습니다.
• MUI에선 별도의 Center 컴포넌트가 있진 않고, FlexBox 컴포넌트와 추가 속성으로 구현하고 있습니다.

Reference

• Chakra UI - Center
• MUI - FlexBox

[inhibitor1217]

See also: https://api.flutter.dev/flutter/widgets/Center-class.html