Remix에서 Chakra 사용하기

Remix에서 Chakra 사용하기 (Using Chakra in Remix)

Remix 프로젝트에 Chakra UI를 설치하는 방법을 안내하는 가이드예요. 스니펫과 원시 컴포넌트를 사용해 더 빠르게 UI를 구축할 수 있습니다.

출처: 문서

본문

템플릿 (Templates)

빠르게 시작하려면 아래 remix 템플릿을 사용하세요.

설치 (Installation)

의존성 설치 (Install dependencies)

npm i @chakra-ui/react @emotion/react

스니펫 추가 (Add snippets)

스니펫은 UI를 더 빨리 구축하는 데 사용할 수 있는 사전 빌드된 컴포넌트예요. @chakra-ui/cli를 사용해 스니펫을 프로젝트에 추가할 수 있습니다.

npx @chakra-ui/cli snippet add

emotion 캐시 설정 (Setup emotion cache)

Remix 샌드박스의 스니펫을 사용해 애플리케이션에 emotion 캐시를 추가할 수 있어요.

Emotion cache 스니펫

tsconfig 업데이트 (Update tsconfig)

TypeScript를 사용한다면 tsconfig 파일의 compilerOptions에 다음 옵션을 포함하도록 업데이트해야 해요.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true
  }
}

JavaScript를 사용한다면 jsconfig.json 파일을 만들고 위 코드를 파일에 추가하세요.

provider 설정 (Setup provider)

애플리케이션 루트에서 Provider 컴포넌트로 애플리케이션을 감싸세요.

이 provider는 다음을 조합해요.

  • 스타일링 시스템을 위한 @chakra-ui/react의 ChakraProvider
  • 컬러 모드를 위한 next-themes의 ThemeProvider
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { Provider } from "@/components/ui/provider"

export default function App() {
  return (
    <Provider>
      <Outlet />
    </Provider>
  )
}

즐거운 개발 되세요! (Enjoy!)

Chakra UI의 스니펫과 원시 컴포넌트의 힘으로 더 빠르게 UI를 구축할 수 있어요.

import { Button, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}

알려진 문제 (Known issues)

Remix와 함께 Chakra UI를 사용할 때 다음 문제가 발생할 수 있어요.

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

이것은 브라우저에 설치된 확장과 관련된 알려진 문제예요. 시크릿 모드에서 애플리케이션을 테스트해 문제가 지속되는지 확인해 보는 것을 권장합니다.

이 문제를 수정해 주실 기여를 환영합니다.

더 알아보기 (Learn more)