Chakra UI 베스트 프랙티스

Chakra UI를 효과적으로 활용하기 위한 핵심 패턴과 최적화 기법을 소개합니다. 실무에서 자주 사용되는 컴포넌트 구성 방법과 성능 개선 테크닉을 다룹니다.

---

---

들어가며

이 글에서는 Chakra UI 베스트 프랙티스에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Theme_Customization
2. Responsive_Design_Pattern
3. Component_Composition
4. Style_Props_Optimization
5. useColorMode_Hook
6. useBreakpointValue_Hook
7. Form_Control_Pattern
8. Stack_Layout_System
9. useToast_Notification
10. Lazy_Loading_Images
11. Modal_Best_Practice
12. Component_Variants

---

1. Theme Customization

개요

Chakra UI의 테마를 커스터마이징하여 일관된 디자인 시스템을 구축합니다. extendTheme을 사용해 색상, 폰트, 간격 등을 전역으로 관리할 수 있습니다.

코드 예제

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    brand: {
      500: '#3182CE',
      600: '#2C5282',
    },
  },
  fonts: {
    heading: 'Poppins, sans-serif',
    body: 'Inter, sans-serif',
  },
});

설명

extendTheme으로 커스텀 색상과 폰트를 정의하여 프로젝트 전체에서 일관된 스타일을 유지합니다. ChakraProvider에 theme을 전달하면 모든 컴포넌트에서 사용 가능합니다.

---

2. Responsive Design Pattern

개요

Chakra UI의 반응형 배열 문법을 활용하면 간결하게 모바일, 태블릿, 데스크톱 레이아웃을 구성할 수 있습니다.

코드 예제

import { Box, Text } from '@chakra-ui/react';

function ResponsiveCard() {
  return (
    <Box
      w={['100%', '80%', '60%']}
      p={[4, 6, 8]}
      bg="white"
      borderRadius="md"
    >
      <Text fontSize={['md', 'lg', 'xl']}>
        반응형 텍스트
      </Text>
    </Box>
  );
}

설명

배열의 각 값은 [모바일, 태블릿, 데스크톱] 순서로 적용됩니다. 코드 한 줄로 다양한 화면 크기에 대응할 수 있어 효율적입니다.

---

3. Component Composition

개요

Chakra UI 컴포넌트를 조합하여 재사용 가능한 커스텀 컴포넌트를 만듭니다. as prop을 활용하면 유연한 구조를 설계할 수 있습니다.

코드 예제

import { Button, ButtonProps } from '@chakra-ui/react';

interface CustomButtonProps extends ButtonProps {
  variant?: 'primary' | 'secondary';
}

const CustomButton = ({ variant = 'primary', ...props }: CustomButtonProps) => (
  <Button
    colorScheme={variant === 'primary' ? 'blue' : 'gray'}
    size="lg"
    {...props}
  />
);

설명

ButtonProps를 확장하여 타입 안정성을 유지하면서 커스텀 variant를 추가했습니다. props 스프레드로 모든 Chakra 기능을 그대로 사용할 수 있습니다.

---

4. Style Props Optimization

개요

Chakra UI의 스타일 props를 활용하면 별도의 CSS 파일 없이 인라인으로 스타일을 정의할 수 있습니다. sx prop으로 복잡한 스타일도 처리 가능합니다.

코드 예제

import { Box } from '@chakra-ui/react';

function StyledCard() {
  return (
    <Box
      bg="white"
      p={6}
      borderRadius="lg"
      boxShadow="xl"
      _hover={{ transform: 'scale(1.05)', transition: '0.2s' }}
      sx={{ '&:active': { transform: 'scale(0.95)' } }}
    />
  );
}

설명

_hover와 같은 pseudo props로 인터랙션을 간편하게 구현하고, sx로 고급 CSS 선택자를 사용할 수 있습니다. CSS-in-JS의 장점을 활용한 패턴입니다.

---

5. useColorMode Hook

개요

다크모드와 라이트모드를 쉽게 전환할 수 있는 useColorMode 훅을 제공합니다. 사용자 환경설정에 맞는 테마를 제공할 수 있습니다.

코드 예제

import { Button, useColorMode } from '@chakra-ui/react';

function ThemeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Button onClick={toggleColorMode}>
      {colorMode === 'light' ? '🌙' : '☀️'}
    </Button>
  );
}

설명

useColorMode로 현재 테마 상태를 가져오고 toggleColorMode로 전환합니다. localStorage에 자동 저장되어 사용자 선택이 유지됩니다.

---

6. useBreakpointValue Hook

개요

현재 화면 크기에 따라 다른 값을 반환하는 훅입니다. 조건부 렌더링이나 동적 속성 설정에 유용합니다.

코드 예제

import { Box, useBreakpointValue } from '@chakra-ui/react';

function AdaptiveLayout() {
  const columns = useBreakpointValue({ base: 1, md: 2, lg: 3 });

  return (
    <Box display="grid" gridTemplateColumns={`repeat(${columns}, 1fr)`} gap={4}>
      {/* 그리드 아이템들 */}
    </Box>
  );
}

설명

화면 크기에 따라 그리드 열 개수를 동적으로 조정합니다. 반응형 스타일 props보다 더 복잡한 로직에 적합합니다.

---

7. Form Control Pattern

개요

FormControl 컴포넌트로 폼 요소를 체계적으로 구성하고 접근성을 자동으로 관리합니다. isInvalid prop으로 유효성 검사 상태를 표시합니다.

코드 예제

import { FormControl, FormLabel, Input, FormErrorMessage } from '@chakra-ui/react';
import { useState } from 'react';

function EmailForm() {
  const [email, setEmail] = useState('');
  const isError = email !== '' && !email.includes('@');

  return (
    <FormControl isInvalid={isError}>
      <FormLabel>이메일</FormLabel>
      <Input value={email} onChange={(e) => setEmail(e.target.value)} />
      <FormErrorMessage>올바른 이메일을 입력하세요</FormErrorMessage>
    </FormControl>
  );
}

설명

isInvalid가 true일 때만 에러 메시지가 표시되며, ARIA 속성이 자동으로 설정되어 스크린 리더를 지원합니다.

---

8. Stack Layout System

개요

Stack 컴포넌트는 flexbox 기반으로 요소를 쉽게 정렬할 수 있습니다. VStack(세로), HStack(가로), Stack(방향 지정)을 제공합니다.

코드 예제

import { VStack, HStack, Box } from '@chakra-ui/react';

function LayoutExample() {
  return (
    <VStack spacing={4} align="stretch">
      <Box bg="blue.100" p={4}>헤더</Box>
      <HStack spacing={4}>
        <Box bg="green.100" flex={1} p={4}>사이드바</Box>
        <Box bg="yellow.100" flex={3} p={4}>메인</Box>
      </HStack>
    </VStack>
  );
}

설명

spacing으로 간격을 일괄 적용하고, align/justify로 정렬을 제어합니다. flex prop으로 반응형 레이아웃을 간단히 구현할 수 있습니다.

---

9. useToast Notification

개요

useToast 훅으로 사용자에게 피드백을 제공하는 알림을 표시합니다. 위치, 지속시간, 스타일을 커스터마이징할 수 있습니다.

코드 예제

import { Button, useToast } from '@chakra-ui/react';

function ToastExample() {
  const toast = useToast();

  return (
    <Button onClick={() => toast({
      title: '저장 완료',
      status: 'success',
      duration: 3000,
      isClosable: true,
    })}>
      저장하기
    </Button>
  );
}

설명

status로 success, error, warning, info 중 선택하여 상황에 맞는 알림을 표시합니다. duration으로 자동 닫힘 시간을 설정할 수 있습니다.

---

10. Lazy Loading Images

개요

Chakra의 Image 컴포넌트는 로딩 상태와 에러 처리를 기본 제공합니다. loading="lazy"로 성능을 최적화할 수 있습니다.

코드 예제

import { Image, Skeleton } from '@chakra-ui/react';

function LazyImage() {
  return (
    <Image
      src="https://example.com/image.jpg"
      alt="설명"
      fallback={<Skeleton height="200px" />}
      loading="lazy"
      borderRadius="md"
    />
  );
}

설명

fallback에 Skeleton을 사용해 이미지 로딩 중 자연스러운 UI를 제공합니다. loading="lazy"로 뷰포트에 들어올 때만 로드됩니다.

---

11. Modal Best Practice

개요

Modal 컴포넌트로 다이얼로그를 구현하며, useDisclosure 훅으로 열림/닫힘 상태를 관리합니다. 접근성과 포커스 관리가 자동으로 처리됩니다.

코드 예제

import { Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, useDisclosure } from '@chakra-ui/react';

function ModalExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>열기</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>제목</ModalHeader>
          <ModalBody>내용</ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
}

설명

useDisclosure는 isOpen, onOpen, onClose를 제공하여 모달 상태를 쉽게 관리합니다. ESC 키와 배경 클릭으로 닫히며 포커스 트랩이 자동 적용됩니다.

---

12. Component Variants

개요

컴포넌트 variants를 테마에 정의하여 일관된 스타일 변형을 재사용할 수 있습니다. 디자인 시스템 확장에 효과적입니다.

코드 예제

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  components: {
    Button: {
      variants: {
        brand: {
          bg: 'brand.500',
          color: 'white',
          _hover: { bg: 'brand.600' },
        },
      },
    },
  },
});

설명

테마에 커스텀 variant를 정의하면 <Button variant="brand">로 간단히 사용할 수 있습니다. 프로젝트 전체에서 일관된 버튼 스타일을 유지할 수 있습니다.

---

마치며

이번 글에서는 Chakra UI 베스트 프랙티스에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#React #ChakraUI #TypeScript #ComponentOptimization #UIDesign