누구나 사용할 수 있는 레이아웃 컴포넌트
우아한테크코스 5기 프론트엔드 쿠마
layout-component ·
@yogjin/layout-component
는 Grid
, FlexBox
와 같이 간단한 레이아웃 컴포넌트들을 모은 라이브러리입니다.
이 라이브러리는 내부적으로 styled-components를 이용하기 때문에, styled-components를 이용하고 있는 프로젝트에 적합합니다.
설치
@yogjin/layout-component
는 npm에 배포되어 있습니다.
다음 명령어를 통해 최신 버전을 설치할 수 있습니다.
npm i @yogjin/layout-component
yarn을 사용하신다면:
yarn add @yogjin/layout-component
사용법
@yogjin/layout-component
은 다음 컴포넌트들을 제공합니다.
Container
Grid
Flex
컴포넌트의 Props은 csstype(styled-components
의 CSSProperties
타입)을 이용합니다.
즉 기본적으로 타입을 따로 선언하지 않은 컴포넌트의 Props
은 mdn에 각 속성별로 정의된 모든 값을 넣을 수 있습니다.
하지만 Grid
의 rows
와 columns
같이 특정 타입(number
)이 선언된 경우 해당 타입만 넣을 수 있습니다.
Container
화면의 폭에 따라 내용의 최대 폭을 제한하고 중앙에 배치하는 레이아웃
화면은 수평 중앙정렬(margin: auto
)입니다.
Props
속성 | 타입 | 기본값 |
---|---|---|
minWidth? | https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#values | - |
maxWidth? | https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#values | 100% |
import { Container } from '@yogjin/layout-component';
function App() {
return (
<Container minWidth="100px" maxWidth="1000px">내용</Container>
);
}
export default App;
Grid
CSS Grid를 사용하여 자식 컴포넌트들을 격자 형태로 배열하는 컴포넌트
rows
와 columns
에 숫자를 넣어서 각 행과 열의 개수를 정할 수 있습니다.
Props
속성 | 타입 | 기본값 |
---|---|---|
rows | number | - |
columns | number | - |
gap? | https://developer.mozilla.org/en-US/docs/Web/CSS/gap#values | - |
import { Container } from '@yogjin/layout-component';
function App() {
return (
// 3 x 3 격자로 배열
<Grid rows={3} columns={3} gap="10px">
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
</Grid>
);
}
export default App;
Flex
CSS Flexbox를 사용하여 자식 컴포넌트들을 유연하게 배열하는 컴포넌트
Props
import { Container } from '@yogjin/layout-component';
function App() {
return (
<Flex direction="column">
<div>그리드</div>
<div>그리드</div>
</Flex>
);
}
export default App;
Drawer
사이트 내 목적지 또는 계정 전환과 같은 앱 기능에 접근하는 통로를 담는 컴포넌트
Props
속성 | 타입 | 기본값 |
---|---|---|
anchor | 'left', 'right', 'top', 'bottom' |
'left' |
open | boolean | false |
onClose | Function | undefined |
import { Container } from '@yogjin/layout-component';
...
const [state, setState] = React.useState({
top: false,
left: false,
bottom: false,
right: false,
});
const toggleDrawer = (anchor: Anchor, open: boolean) => {
setState({ ...state, [anchor]: open });
};
const list = (anchor: Anchor) => (
<Flex direction="column">
<button onClick={() => toggleDrawer(anchor, false)}>Woowacourse</button>
<button onClick={() => toggleDrawer(anchor, false)}>Missions</button>
<button onClick={() => toggleDrawer(anchor, false)}>Settings</button>
</Flex>
);
return (
<>
{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
<React.Fragment key={anchor}>
<button onClick={() => toggleDrawer(anchor, true)}>{anchor}</button>
<Drawer anchor={anchor} open={state[anchor]} onClose={() => toggleDrawer(anchor, false)}>
{list(anchor)}
</Drawer>
</React.Fragment>
))}
</>
);
...
License
react-global-state
is MIT licensed