NEXT.JS๋ฅผ ์ฐ๋ฉด์ chakra ๋ฅผ ํจ๊ป ์ฌ์ฉํ๊ณ ์๋๋ฐ,
chakra ui ๋ ์ง์ง ๋๋ฌด ํธ๋ฆฌํ๋ค... ๊ทธ๋ฐ ๊น์ ๋ ์ฝ๊ฒ ์ ๊ทผํด๋ณด์ ์ ๋ฆฌํด๋ณด๋ คํ๋ค.
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a
Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System
chakra-ui.com
๊ณต์ ์ฌ์ดํธ๋ ์ด๊ณณ. ๋ค์ด๊ฐ๋ณด๋ฉด ์ ์ ์๋ฏ์ด ๋ค์ํ ์ปดํฌ๋ํธ๋ฅผ ์ง์ํ๊ณ ์์.
๊ฒ๋ค๊ฐ ์ปค์คํ ํ ๋ค์ ์ง์ํด์ ๋ฆฌ์กํธ ํ ํผ๊ณผ ์ฐ๊ฒฐํด์ ๊ฐ์ด ์ฌ์ฉํ๋ฉด ๋ ์ฝ๊ฒ ๊ตฌํ์ด ๊ฐ๋ฅ
Components & Props
๊ณต์ ์ฌ์ดํธ์ ์ด๋ฏธ ์คํ์ผ๋ง๋ Components๋ค(Text, Heading ๋ฑ)์ ์คํ์ผ์ด ์กด์ฌํ๊ณ , ๋ฐ๊พธ๋ ค๋ฉด Props๋ง ๋ฐ๊ฟ์ฃผ๋ฉด ๋๋ค.
์ผ๋จ ๋๋ฌด ๋น์ฐํ๊ฒ ๊ธฐ๋ณธ ์ฌ์ฉ๋ฐฉ๋ฒ์ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด๋ ๋น์ทํ๋ค.
๊ณต์๋ฌธ์์ ์ ๋์์์ผ๋ ์ค์น๋ ๊ฑฐ๊ธฐ์ ํ๋๋ก ํ๊ตฌ!
์ฌ์ฉํ ๋ ์๋จ์ ์ฐ๋ ์ปดํฌ๋ํธ, ์คํ์ผ์ import ํด์ค๊ณ ์์ํ๋ฉด ๋๋ค.
<Box w={500} p={4} m="20px auto">
<Heading as="h1" size="xl" textAlign="center">
Chakra Example
</Heading>
<Heading as="h2" size="l" textAlign="center" m={5}>
good!
</Heading>
....
</Box>box๋ div๋ผ๊ณ ์๊ฐํ๋ฉด ๋๊ณ , ์์ ๋ธ๋ฆฐ ์คํ์ผ๋ก w ๋ width, p๋ padding, m์ margin.. ๋ฑ๋ฑ ์์ฃผ ๊ฐํธํ๊ฒ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค
Heading ๋ํ chakra์ ๋ด์ฅ๋์ด์๋ ํ ์คํธ ์คํ์ผ์ด๋ค.
<Flex> </Flex>
๋ฅผ ์ด์ฉํด display:flex๊ฐ ๋ฐ์๋ div๋ฅผ ํ๋ฒ์ ๋ง๋ค ์๋ ์๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ์ฐ๋๊ฑด ์ด์ ๋๊ณ ..
<Flex>
<Box p='4' bg='red.400'>
Box 1
</Box>
<Spacer />
<Box p='4' bg='green.400'>
Box 2
</Box>
</Flex>์ด๋ฌ๋ฉด ๊ฐ์ด๋ฐ <Spacer /> ๊ฐ ๋ค์ด๊ฐ, ์ฆ justify-contents:space-between ํจ๊ณผ๋ฅผ ์ค ์๊ฐ ์๊ณ ,
๋ ์ฌ์ด์ฌ์ด์ flex='1' ๊ฐ์ ํ๋กญ์ค๋ฅผ ์ค์ ํด์ฃผ์ด flex ๋น์จ ์กฐ์ ์ด ์ฉ์ดํ๋ค!
const TextareaControl = ({ name, label }) => (
<Control name={name} my={4}>
<FormLabel htmlFor={name}>{label}</FormLabel>
<Field
name={name}
component={AdaptedTextarea}
placeholder={label}
id={name}
/>
<Error name={name} />
</Control>
)
....
<TextareaControl name="notes" label="Notes" />์์ ์์์ฒ๋ผ ์ฌ์ฉํด์ฃผ๋ฉด, ์ํ๋ ๋ถ๋ถ๋ง ์์ ๊ณจ๋ผ์ ํ์ํ ๋๋ง๋ค ๋ค๋ฅด๊ฒ ์ฌ์ฉํ๊ธฐ๋ ์ฉ์ดํ๋ค.
| (์ฐธ๊ณ ) my, marginY | margin-top + margin-bottom |
๋ผ๋์ค, ์ฒดํฌ๋ฐ์ค, ๋ฒํผ, ๋ฑ๋ฑ์ ์ฌ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋น์ทํ๊ฒ ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ๋ฉด์ ์ฝ๊ฒ ์ธ ์ ์์!
useColorMode()
chakra ui๋ ์ปฌ๋ฌ ๋ชจ๋๋ฅผ ๋ณ๊ฒฝํ๋ useColorMode๋ผ๋ ์ปค์คํ ํ ์ ์ ๊ณตํ๋ค. localStorage์ color mode๋ฅผ ์ ์ฅํ์ฌ ๊ตฌํ๋จ
extendTheme
// theme.ts
import { extendTheme, type ThemeConfig } from '@chakra-ui/react'
// color mode config ์ถ๊ฐํ๊ธฐ
const config: ThemeConfig = {
initialColorMode: 'light',
useSystemColorMode: false,
}
const theme = extendTheme({ config })
export default theme
<body>
<ColorModeScriptinitialColorMode={theme.config.initialColorMode} />
</body>function Example() {
const { colorMode, toggleColorMode } = useColorMode()
return (
<header>
<Button onClick={toggleColorMode}>
Toggle {colorMode === "light" ? "Dark" : "Light"}
</Button>
</header>
)
}
Hooks
useToast()
import { useToast } from "@chakra-ui/react";
export default function useGetData({
queryKey,
fetchFn,
onSuccessFn,
onSuccessReturnOriginDataFn,
isNotice,
}: {
queryKey: [string, string];
fetchFn: FetchFn;
onSuccessFn?: (data: any) => void;
onSuccessReturnOriginDataFn?: (data: any) => void;
isNotice?: boolean;
}): any {
const toast = useToast();
const handleSuccess = (data: any) => {
if (!data) return;
onSuccessFn && onSuccessFn(data.resultData?.list);
// ๋ฆฌ์คํธ ๋ฐ์ดํฐ ๋ฐํ (์ด๋ ๊ฒ ๋ฐํํด์ ์ฌ์ฉํ์ง ์์ผ๋ฉด TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method. ์๋ฌ๊ฐ ๋ฐ์ํจ)ใด
onSuccessReturnOriginDataFn && onSuccessReturnOriginDataFn(data);
// ์๋ณธ ๋ฐ์ดํฐ ๋ฐํ
// ๋ฐํ๋๋ ๋ฐ์ดํฐ๊ฐ ์์์์์์ ์คํ์ค์ง.
if (data.resultCode === "100000") {
if (!isNotice) return;
toast({
title: "Success",
description: data?.resultMsg,
status: "success",
duration: 2000,
});
} else {
toast({
title: "Error",
description: data?.resultMsg,
status: "error",
duration: 2000,
});
}
};
useDisclosure()
import { useDisclosure } from '@chakra-ui/react'
const {
isOpen: detailModalOpen,
onOpen: onDetailModalOpen,
onClose: onDetailModalClose,
} = useDisclosure();
// ์์
{detailModalOpen && (
<DetailDrawer
isOpen={detailModalOpen}
onClose={onDetailModalClose}
...
/>useDisclosure ๋ ์์ฃผ์ฐ๋ ํ ์ค ํ๋์ธ๋ฐ, ํ ๊ธ์ด๋ drawer, ๋ชจ๋ฌ ๋ฑ ์ด๊ณ ๋ซ๋ ๊ธฐ๋ฅ์ด ํ์ํ ๋ ์ ์ฉํ๊ฒ ๋๊ฒจ์ ์ฝ๊ฒ ์ฌ์ฉ๊ฐ๋ฅํ๊ฒ ํด์ค๋ค.
๊ณต์๋ฌธ์๊ฐ ๋๋ฌด ์์ธํ๊ฒ ์ ๋์์์ด, ๋ฐ๋ก ์ค๋ช ํ ํ์๊ฐ ์์ ์ ๋๊ธด ํ์ง๋ง
๊ทธ๋๋ ์์ผ๋ก ๋ด๊ฐ ์์ฃผ ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ ํ ๋ฐ ๋ธ๋ก๊ทธ์ ํ๋ฒ ๊ธฐ๋ก์ ํด๋ณด๊ณ ์ถ์๋ค
์์ผ๋ก ๋ชจ๋ ํ๋ก์ ํธ์ ์์ฃผ์์ฃผ ๋ฑ์ฅํ ํ ๋...
https://www.adebayosegun.com/blog/the-future-of-chakra-ui
Segun Adebayo (aka Sage) - UI Engineer (Design Systems), Software Developer and Product Designer
UI Engineer passionate about design systems, state machines, accessibility, DX and Rust.
www.adebayosegun.com
'TIL > etc.' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [TIL] tailwind๋ฅผ ์ด์ฉํด ์คํ์ผ ์ฌ์ฌ์ฉํ๊ธฐ (feat. @layer, @apply) (0) | 2023.06.19 |
|---|---|
| [TIL] Tailwind CSS (5) | 2023.05.25 |
| [TIL] MongoDB (0) | 2023.05.20 |
| [TIL] ์ด๋ฏธ์ง ์ ๋ก๋ ๊ตฌํ (0) | 2023.05.20 |
| [TIL] html2canvas (0) | 2023.05.20 |
