[React] 리액트에서 Chakra UI, Chakra Icons 사용하기

📌 차크라 란? (Chakra UI)

Chakra UI는 React용 디자인 시스템을 제공하는 라이브러리로

컴포넌트 기반 스타일링과 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다.

 

• 컴포넌트 기반 스타일링
  다양한 기본 컴포넌트를 제공해, 이를 활용해 빠르게 스타일을 적용할 수 있습니다.
• 테마 설정
  테마 설정을 통해 전체적인 스타일 일관성을 유지하고, 쉽게 커스터마이징할 수 있습니다.
• 반응형 디자인
  기본적으로 반응형 디자인을 지원하여 다양한 디바이스 환경에 대응할 수 있습니다.
• 접근성
  웹 접근성을 고려한 컴포넌트를 제공하여, 접근성을 높일 수 있습니다.

---

📌 Tailwind CSS vs Chakra UI

•  테일윈드(Tailwind CSS)  개별 스타일을 유틸리티 클래스를 통해 직접 정의하는 방식
•  차크라(Chakra UI)  미리 디자인된 컴포넌트를 가져다 쓰는 방식

---

 테일윈드(Tailwind CSS) 유틸리티 클래스 기반의 스타일링 시스템

HTML 태그 요소에 className="tailwind정의클래스명" 을 직접 추가하여 스타일을 적용합니다.

예를 들어, 배경색이나 글자색 같은 스타일 속성을 미리 정의된 클래스를 통해 빠르게 선택하고 적용

사용자가 각 요소에 스타일을 세밀하게 조정하는 방식입니다.

 차크라(Chakra UI)  컴포넌트 기반 스타일링 시스템

이미 디자인된 다양한 UI 컴포넌트를 제공하여 빠르게 적용할 수 있습니다.

버튼이나 입력 필드와 같은 UI 요소를 미리 디자인된 컴포넌트를 사용해 코드에 바로 적용

스타일링에 대한 부담이 줄어듭니다.

---

📌 React에 Chakra UI 사용 (➕Chakra Icons)

Chakra UI는 React용 컴포넌트 기반 디자인 시스템입니다.

CSS 코드 없이 props로 쉽게 스타일을 적용할 수 있고,

Chakra Icons 같은 기능도 지원합니다.

CSS 파일 없이 배경색과 글자 크기를 간편하게 설정할 수 있으며, 

반응형 디자인과 접근성도 기본 지원됩니다.

 

예를 들어, Box 컴포넌트에 props (예: bg, fontSize) 로 스타일을 지정할 수 있습니다.

 <Box bg="red.500" fontSize="xl">Hello</Box> 

---

✅ Chakra UI / Chakra Icons 라이브러리 설치

React에서 Chakra UI를 사용하려면 다음과 같은 라이브러리를 설치해야 합니다.

• @chakra-ui/react : Chakra UI의 기본 컴포넌트와 스타일링을 제공
• @chakra-ui/icons : Chakra UI에서 아이콘을 사용하기 위한 라이브러리

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

 

---

📜 Chakra Provider 적용 (최상단 컴포넌트에서 import 설정)

'📁components/📜main.tsx' ➡️ ChakraProvider를 import해서 사용

 

'📁components/📜main.tsx' 최상위 컴포넌트를 ChakraProvider로 감싸야 합니다.

이렇게 감싸면 자식 컴포넌트에서도 Chakra UI를 사용할 수 있게 됩니다.

 

테마를 사용하든 사용하지 않든 ChakraProvider로 감싸는 것이 필수입니다.

Provider를 사용하는 이유는 Chakra UI에 특정 설정을 적용할 수 있기 때문이며,

이를 통해 모든 설정과 구성 사항이 자식 컴포넌트에 자동으로 적용됩니다.

// 1️⃣ ChakraProvider를 import
import { ChakraProvider } from '@chakra-ui/react';

// 2️⃣ ChakraProvider로 자식컴포넌트 감싸기
<ChakraProvider>
  <자식컴포넌트 />
</ChakraProvider>

 

 

사용예시

// ▶ 📁components/📜main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';

import { ChakraProvider } from '@chakra-ui/react';
import App from './app';

const root = ReactDOM.createRoot(document.querySelector("#reactRoot") as HTMLElement);

root.render(
     <ChakraProvider>  // ▶ ChakraProvider로 자식컴포넌트 감싸기
          <App/>
     </ChakraProvider>
)

 

---

📜 Chakra UI 사용  (자식 컴포넌트)

'📁components/📜app.tsx'

 

부모 컴포넌트인 '📁components/📜main.tsx' 에서 Chakra UI를 import 했기 때문에,

자식 컴포넌트인 '📁components/📜app.tsx' 에서도 Chakra UI 컴포넌트를 사용할 수 있습니다.

 

Chakra UI 에서 정의된 컴포넌트를 사용하고

해당 요소에 글꼴 크기를 적용할 때는 fontSize 같이 prop 옵션 사용합니다.

// 1️⃣ Chakra UI 사용할 컴포넌트 import
import { ChakraUI정의된사용컴포넌트명 } from '@chakra-ui/react';

// 2️⃣ Chakra UI 정의된 컴포넌트 사용
<ChakraUI정의된컴포넌트명/>
// 예시: Box 컴포넌트 사용
// <Box w={500} p={4} m="20px auto" fontSize="xl">내용</Box>

 

 

사용예시

// ▶ 📁components/📜app.tsx
import React from 'react';
import { Box } from '@chakra-ui/react'; // ▶ Chakra UI 임폴트

export default function (){
    return <div>
        <Box bg='red'>  // ▶ Chakra UI - Box 컴포넌트 (배경색 red)
            내용
        </Box>
    </div>
}

 

---

📜 Chakra Icons 사용  (사용 컴포넌트)

'📁components/📜app.tsx'

 

Chakra Icons를 사용할 컴포넌트에서 필요한 아이콘을 import하여 사용하면 됩니다.

아래 사이트에서 정의된 아이콘 컴포넌트 이름을 확인하고, 필요한 아이콘만 import합니다.

Chakra UI Icons Documentation

// 1️⃣ Chakra Icons 사용할 컴포넌트 import
import { ChakraIcons정의된사용아이콘컴포넌트명 } from '@chakra-ui/icons';

// 2️⃣ 아이콘 컴포넌트 사용
<ChakraIcons정의된사용아이콘컴포넌트명 />

 

 

사용예시

import React from 'react';
import { Input, InputGroup, InputLeftAddon, InputLeftElement } from '@chakra-ui/react';
import { SearchIcon } from '@chakra-ui/icons'; // ▶ Chakra Icons 임폴트

export default function (){
    return <div>
        <InputGroup>
            <InputLeftElement>
                <SearchIcon/>   // ▶ Chakra Icons - SearchIcon 검색 아이콘 사용
            </InputLeftElement>
            <Input/>
        </InputGroup>
    </div>
}

 

---