링크
환경 & 사용 라이브러리 & 프레임워크
- Next.js 13
- Typescript
- React.js
- Recoil
패키지 설치
npm install @radix-ui/themes
root 경로에서 컴포넌트를 Theme로 감싸주기
Next.js 13에서는 layout.tsx 에 해주었다.
Theme의 props 값들로 전체적인 테마 스타일을 설정할 수 있다.
//layout.tsx
import "@radix-ui/themes/styles.css";
import { Theme } from "@radix-ui/themes";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
{/*Recoil 사용을 위한 부분 */}
<RecoilRoot>
{/*Radix 사용을 위해 Theme로 감싼 부분*/}
<Theme
accentColor="blue"
grayColor="mauve"
radius="large"
scaling="90%"
>
<Header />
{children}
</Theme>
</RecoilRoot>
</body>
</html>
);
}### 사용 예시 `의 경우 하위 컴포넌트에서도 설정을 덮어씌울 수 있다.`
//Header.tsx
"use client";
import { Flex, Text, IconButton, Switch, Theme } from "@radix-ui/themes";
import styles from "./Header.module.scss";
import { useRouter } from "next/navigation";
import { useRecoilState } from "recoil";
import { themeRecoil } from "@/recoil/ThemeRecoil";
export default function Header() {
const router = useRouter();
//테마 토글 변경 상태를 관리하기 위한 Recoil state
const [theme, setTheme] = useRecoilState(themeRecoil);
return (
<Theme accentColor={theme === true ? "cyan" : "gray"}>
<Flex
align={"center"}
justify={"between"}
width={"100%"}
p={"6"}
direction={"row"}
className={theme === true ? styles.header_day : styles.header_night}
>
<IconButton
onClick={() => {
router.push("/");
}}
>
<svg
role="img"
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.07926 0.222253C7.31275 -0.007434 7.6873 -0.007434 7.92079 0.222253L14.6708 6.86227C14.907 7.09465 14.9101 7.47453 14.6778 7.71076C14.4454 7.947 14.0655 7.95012 13.8293 7.71773L13 6.90201V12.5C13 12.7761 12.7762 13 12.5 13H2.50002C2.22388 13 2.00002 12.7761 2.00002 12.5V6.90201L1.17079 7.71773C0.934558 7.95012 0.554672 7.947 0.32229 7.71076C0.0899079 7.47453 0.0930283 7.09465 0.32926 6.86227L7.07926 0.222253ZM7.50002 1.49163L12 5.91831V12H10V8.49999C10 8.22385 9.77617 7.99999 9.50002 7.99999H6.50002C6.22388 7.99999 6.00002 8.22385 6.00002 8.49999V12H3.00002V5.91831L7.50002 1.49163ZM7.00002 12H9.00002V8.99999H7.00002V12Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</IconButton>
<Text>Make Your Survey</Text>
<Flex>
<Text size="2">
<label>
<Switch
mr="2"
defaultChecked={theme}
onCheckedChange={(e) => {
setTheme(e);
}}
/>{" "}
Theme Toggle
</label>
</Text>
</Flex>
</Flex>
</Theme>
);
}사용하며 느낀 점
- 먼저 사용해본 Chakra UI와 비교하면 다양한 기능을 제공하지는 않으나, 커스텀 자유도가 높아 컴포넌트를 직접 커스텀해서 만들거라면 Radix가 더 제한 없이 만들기에 적합할 것 같다.
- 특히 CSS 부분에서는 class를 통해 직접 디자인을 수정할 수 있는 게 장점이다.
- 완성된 컴포넌트 느낌 보다는 기본적인 컴포넌트를 제공하기 때문에 조합해서 자신만의 컴포넌트를 만드는 느낌으로 사용해야겠다.
어제보다 오늘 더 발전하기