[React] Chakra UI 주요 컴포넌트, Chakra UI 요소

📌 Chakra UI 주요 컴포넌트

Chakra UI는 React 기반의 UI 라이브러리로, 간단한 코드만으로 세련된 UI를 쉽게 구현할 수 있습니다.

특히 레이아웃과 UI 요소를 위한 다양한 컴포넌트를 제공하여

복잡한 페이지 구조를 간편하게 만들 수 있습니다.

Chakra UI의 주요 레이아웃 컴포넌트와 자주 사용하는 UI 요소들을 살펴보겠습니다.

 

🔎 리액트 속성 정의

Chakra UI 컴포넌트 옵션을 작성할 때, 아래 두 가지 방식을 사용할 수 있습니다.

•  a=" "   : 기본적인 HTML 속성 문법
•  a={}     : React에서 사용되는 JSX 문법

 

---

📌 레이아웃 관련 주요 컴포넌트

컴포넌트명	설명
Flex & Spacer	유연한 레이아웃을 구성하는 Flex와 요소 간의 간격을 균일하게 조정하는 Spacer를 함께 사용 (Flexbox 레이아웃)
Grid & GridItem	복잡한 레이아웃을 그리드 기반으로 구성할 때 사용 Grid 부모 요소, GridItem 자식 요소 구성 (반응형 레이아웃)
Stack, HStack, VStack	요소를 가로로 정렬하는 HStack 세로로 정렬하는 VStack을 사용하여 간단한 레이아웃 쉽게 구성
Box	기본 컨테이너 컴포넌트로 div처럼 하위 요소를 그룹화하여 묶을 때 사용
Center, Circle, Square	요소를 중앙에 정렬하는 Center 원형 모양을 만드는 Circle 정사각형 모양을 만드는 Square 주로 아이콘이나 특정 모양의 요소를 만들 때 사용
AspectRatio	요소의 가로세로 비율 고정하여 이미지나 비디오 같은 콘텐츠를 적절한 비율로 표시할 때 사용

 

---

🔎 Flex & Spacer (플렉스 레이아웃)

• Flex
  플렉스 박스 레이아웃을 쉽게 구현할 수 있는 부모 컴포넌트
  요소의 방향, 정렬 및 간격을 손쉽게 설정
• Spacer
  플렉스 자식 요소들 사이에 균등한 간격을 만드는 데 사용 자식 컴포넌트

 

사용예시

import React from 'react';
import { Flex, Spacer, Box } from '@chakra-ui/react';

export default function (){
    return <div>
        <Flex>
            <Box bg="red">Box 1</Box>
            <Spacer/>
            <Box bg="red">Box 2</Box>
            <Spacer/>
            <Box bg="red">Box 3</Box>
            <Spacer/>
            <Box bg="red">Box 4</Box>
            <Spacer/>
            <Box bg="red">Box 5</Box>
        </Flex>
    </div>
}

 

 

---

🔎 Grid & GridItem (그리드 레이아웃)

• Grid : 행과 열을 설정하여 그리드 레이아웃을 구현하는 부모 컴포넌트
• GridItem : 그리드 안에서 각 아이템의 크기를 설정 자식 컴포넌트

 

✏️ Grid 속성 (부모)

• templateColumns 속성 : 가로 열의 개수 정의
• templateRows 속성 : 세로 행의 개수 정의

✏️ GridItem 속성 (자식)

• colSpan 속성 : 가로 열에서 차지할 칸의 개수 정의
• rowSpan 속성 : 세로 행에서 차지할 칸의 개수 정의

 

사용예시

import React from 'react';
import { Grid, GridItem } from '@chakra-ui/react';

export default function (){
    return <div>
        <Grid templateRows="repeat(3, 1fr)" templateColumns="repeat(4, 1fr)" gap={3}>
            <GridItem bg="pink">1</GridItem>
            <GridItem bg="pink" rowSpan={2}>2</GridItem>
            <GridItem bg="pink">3</GridItem>
            <GridItem bg="pink">4</GridItem>
            <GridItem bg="pink">5</GridItem>
            <GridItem bg="pink" colSpan={2}>6</GridItem>
        </Grid>
    </div>
}

 

 

---

🔎 Stack, HStack, VStack (가로/세로 방향 정렬)

• Stack : 자식 요소들을 수직 또는 수평으로 나열하는 컴포넌트
• HStack : 가로 방향으로 요소들을 정렬하는 컴포넌트
• VStack : 세로 방향으로 요소들을 정렬하는 컴포넌트

 

사용예시

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

export default function (){
    return <div>
        <HStack>
            <VStack>
                <Text>텍스트1</Text>
                <Text>텍스트2</Text>
                <Text>텍스트3</Text>
                <Text>텍스트4</Text>
            </VStack>
            <VStack>
                <Text>텍스트5</Text>
                <Text>텍스트6</Text>
                <Text>텍스트7</Text>
                <Text>텍스트8</Text>
            </VStack>
        </HStack>
        <Stack>
            <Box bg="red">Item 1</Box>
            <Box bg="green">Item 2</Box>
        </Stack>
        <Stack direction={'row'}>
            <Box bg="red">Item 1</Box>
            <Box bg="green">Item 2</Box>
        </Stack>
    </div>
}

 

 

---

🔎 Box (하위 요소 그룹화)

Box는 기본적으로 HTML의 <div> 태그를 대체하며, 레이아웃 요소들을 그룹화하는데 자주 사용

Chakra UI에서는 Box를 이용해 간편하게 스타일을 설정할 수 있습니다.

 

사용예시

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

export default function (){
    return <div>
        <Box bg='red' w='100%' p={2} color='white'>
            This is a Box
        </Box>
    </div>
}

 

 

---

🔎 Center, Circle, Square (정렬 및 요소 모양 제작)

• Center : 자식 요소를 중앙에 배치해주는 레이아웃 컴포넌트
• Circle : 크기가 고정된 원형 박스를 만들 때 사용
• Square : 크기가 고정된 정사각형 박스를 만들 때 사용

 

사용예시

import React from 'react';
import { Center, Circle, Square } from '@chakra-ui/react';

export default function (){
    return <div>
        <Center w={500} h={200} bg="pink" color="white">
            Center Text
        </Center>
        <Circle size="40px" bg="pink" color="white">
            Icon
        </Circle>
        <Square size="40px" bg="pink" color="white">
            Box
        </Square>
    </div>
}

 

 

---

🔎 AspectRatio (비율)

AspectRatio는 내부 요소의 콘텐츠 비율을 지정해주는 컴포넌트입니다.

주로 영상, 이미지와 같은 요소의 고정된 비율을 유지할 때 유용합니다.

• ratio 속성
  비율을 설정하는 속성으로, 가로/세로 비율로 지정
  1:1(정사각형), 16:9(일반적인 비디오 비율)

 

사용예시

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

export default function (){
    return <div>
        <AspectRatio w={200} ratio={9 / 6}>
            <img src="https://cdn.pixabay.com/photo/2024/09/02/13/08/kingfisher-9016787_1280.jpg"/>
        </AspectRatio>
        <AspectRatio w={200} ratio={16 / 9}>
            <iframe
                src="https://cdn.pixabay.com/video/2024/09/06/230060_large.mp4"
                allowFullScreen
                title="Video"
            />
        </AspectRatio>
    </div>
}

 

 

---

📌 UI 요소 주요 컴포넌트

컴포넌트명	설명
InputGroup & InputElement	여러 개의 입력 필드나 아이콘을 함께 사용하는 그룹을 만들 때 사용 구성 - InputGroup (부모 요소) - Input (자식 요소) - InputLeftAddon  /  InputLeftElement - InputRightElement  /  InputRightAddon
PinInput & PinInputField	PIN 코드나 숫자를 입력할 때 사용하는 컴포넌트로, 주로 인증 과정에서 사용 OTP(One-Time Password) 기능 활용 각각 자리별로 따로 Input을 만드는 입력 태그 구성 - PinInput (부모 요소) - PinInputField (자식 요소)
Editable & EditablePreview & EditableInput	사용자가 직접 수정할 수 있는 텍스트를 제공할 때 유용 - Editable 태그 안에 (부모 요소) - EditablePreview 와 (자식 요소)   EditableInput / EditableTextarea 을 포함해야 한다. EditablePreview : 수정 전 기본 텍스트를 보여줌 EditableInput : 사용자가 수정할 수 있는 입력 필드 EditableTextarea : 사용자가 여러 줄의 텍스트를 입력할 수 있는 영역
Image	이미지 요소를 삽입하고 다룰 때 사용 다양한 스타일과 크기 조정 가능

 

---

🔎 InputGroup & InputElement (입력창 그룹화)

입력 요소의 순서를 지켜 사용하는 것이 중요합니다.

InputLeftAddon/InputLeftElement ➡️ Input ➡️ InputRightElement/InputRightAddon

 

✏️ InputGroup (부모)

입력 필드를 꾸미기 위한 부모 컴포넌트

 

✏️ InputElement (자식)

Input의 자식 컴포넌트, 다음을 포함

• Input : 기본 입력 필드
• InputLeftAddon : 입력 필드 왼쪽에 고정된 값 추가
• InputLeftElement : 입력 필드 왼쪽에 특정 글자를 넣기
• InputRightAddon : 입력 필드 오른쪽에 고정된 값 추가
• InputRightElement : 입력 필드 오른쪽에 특정 글자를 넣기
• InputAddon : 입력 필드 양쪽에 추가적인 정보를 제공하는 컴포넌트

 

사용예시

import React from 'react';
import { Input, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, InputAddon } from '@chakra-ui/react';
import { SearchIcon } from '@chakra-ui/icons'; // ▶ Chakra Icons 아이콘 사용

export default function (){
    return <div>
        <InputGroup>
            <InputLeftElement><SearchIcon/></InputLeftElement>
            <Input placeholder="Search"/>
            <InputRightAddon children={<SearchIcon />} />
        </InputGroup>

        <InputGroup>
            <InputLeftAddon>https://www.</InputLeftAddon>
            <InputAddon borderRadius={0}>www.</InputAddon>
            <Input/>
            <InputRightAddon>.com</InputRightAddon>
        </InputGroup>

        <InputGroup>
            <InputLeftAddon>+82</InputLeftAddon>
            <Input/>
        </InputGroup>

        <InputGroup>
            <InputLeftElement>+82</InputLeftElement>
            <Input/>
        </InputGroup>
    </div>
}

 

 

---

🔎 PinInput & PinInputField (보안 입력창)

PinInput은 OTP(One-Time Password)와 같은 고정 길이의 숫자를 입력받는 UI 컴포넌트

각 자리수마다 별도의 입력 필드를 생성하여 사용자에게 직관적인 입력 경험을 제공합니다.

• PinInput : OTP 입력 필드를 그룹화하는 부모 컴포넌트
• PinInputField : 각 자리수에 맞춰 인풋창을 생성하는 자식 컴포넌트

 

✏️ PinInput 속성 (부모)

• mask 속성 : 입력 값을 가려 보안성을 높입니다.
• type 속성 : 입력할 데이터의 유형 지정 (예: 'text', 'number')
• onChange 속성 : 입력 값이 변경될 때 호출되는 콜백 함수
• placeholder 속성 : 각 필드에 표시할 도움말 텍스트
• defaultValue 속성 : 입력하지 않아도 기본적으로 표시될 값

 

사용예시

import React from 'react';
import { PinInput, PinInputField, HStack } from '@chakra-ui/react';

export default function (){
    return <div>
        <HStack>
            <PinInput type='number' mask placeholder='예시' defaultValue='12' onChange={(value)=>{
                console.log(value); // 입력값이 변경될 때 로그 출력
            }}>
                <PinInputField/>
                <PinInputField/>
                <PinInputField/>
            </PinInput>
        </HStack>
    </div>
}

 

---

🔎 Editable & EditablePreview & EditableInput (텍스트 클릭 입력창 수정)

Editable 컴포넌트는 텍스트를 클릭하여 수정할 수 있는 UI를 제공합니다.

EditableInput, EditablePreview를 함께 사용하여 기본 텍스트를 수정할 수 있습니다.

• Editable : 부모 컴포넌트 미리 보여질 값들을 감싸야 합니다.
• EditablePreview : 텍스트의 미리보기 자식 컴포넌트 (EditableInput 함께 사용)
• EditableInput : 사용자가 수정할 수 있는 입력 필드 자식 컴포넌트
• EditableTextarea : 다중 행 입력 필드 자식 컴포넌트 (EditableInput 대신 사용) 

 

✏️ Editable 속성 (부모)

• defaultValue 속성 : 입력창 클릭 전 기본적으로 보여질 텍스트

 

사용예시

import React from 'react';
import { Editable, EditablePreview, EditableInput, EditableTextarea } from '@chakra-ui/react';

export default function (){
    return <div>
        <Editable defaultValue="Click to edit">
            <EditablePreview />
            <EditableInput />
        </Editable>
        <Editable defaultValue='기본값'>
            <EditablePreview/>
            <EditableTextarea/>
        </Editable>
    </div>
}

 

 

---

🔎 Image (이미지 삽입)

이미지를 삽입하는 컴포넌트

fallbackSrc 속성을 통해 이미지 로딩 중일 때 보여줄 대체 이미지를 설정할 수 있습니다.

 

사용예시

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

export default function (){
    return <div>
        <Image src="https://cdn.pixabay.com/photo/2024/09/02/13/08/kingfisher-9016787_1280.jpg" 
           fallbackSrc="로딩되기 전까지 보여주는 이미지" 
           w={100}
        />
    </div>
}

 

---