728x90
반응형
📌 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>
}
728x90
반응형
