[React] Chakra UI 이벤트 컴포넌트, Chakra UI 훅 - Accordion, Tabs, Modal, Drawer, Popover, useDisclosure 훅

📌 Chakra UI 이벤트 컴포넌트와 훅

아코디언(Accordion), 탭(Tabs), 팝업(Modal), 사이드바(Drawer), 말풍선(Popover) 등과 같은 
다양한 사용자 인터페이스 컴포넌트를 제공합니다. 
이러한 컴포넌트는 사용자가 웹 애플리케이션을 더욱 편리하게 사용할 수 있도록 하며, 
시각적인 효과를 통해 사용자 경험을 개선합니다.

Chakra UI는 useDisclosure라는 커스텀 훅을 제공합니다. 
이 훅은 Modal, Drawer, Popover 등의 컴포넌트에서 
열림(Open), 닫힘(Close), 토글(Toggle) 상태를 간편하게 관리할 수 있습니다.

---

📌 이벤트 관련 주요 컴포넌트와 훅

분류	내용
아코디언(Accordion)	여러 섹션을 접고 펼 수 있는 UI 컴포넌트
탭(Tabs)	다양한 콘텐츠를 탭을 클릭하여 전환하는 컴포넌트
팝업(Modal)	페이지 중앙에 나타나는 팝업 창으로, 중요한 알림이나 입력을 위한 공간
사이드바(Drawer)	화면 측면에서 슬라이드 형태로 나타나는 패널이나 메뉴
말풍선(Popover)	특정 요소 위에 떠서 추가 정보를 보여주는 말풍선 UI
useDisclosure 훅	Modal, Drawer, Popover 등의 열림, 닫힘, 토글 상태를 쉽게 관리 Chakra UI의 커스텀 훅

 

---

🔎 Accordion (아코디언)

• Accordion : 여러 개의 AccordionItem을 감싸는 부모 컴포넌트
• AccordionItem : 각각의 Accordion 항목을 감싸는 자식 컴포넌트

 

✏️ Accordion 속성 (부모)

여러 개의 AccordionItem을 감싸는 부모 컴포넌트

• allowToggle 속성 : 하나의 AccordionItem만 열고 닫기 가능
• allowMultiple 속성 : 여러 개의 AccordionItem을 동시에 열기 가능

 

✏️ AccordionItem (자식)

Accordion의 자식 컴포넌트, 각 항목 구성

• AccordionButton : 항목의 제목 역할 하는 버튼
• AccordionIcon : 제목 옆의 화살표 아이콘(∨)
• AccordionPanel : 아이템이 열렸을 때 보여주는 내용 부분

 

사용예시

import React from 'react';
import { Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel } from '@chakra-ui/react';

export default function (){
    return <div>
        <Accordion allowToggle allowMultiple>
            <AccordionItem>
                <AccordionButton>
                    제목
                    <AccordionIcon/>
                </AccordionButton>
                <AccordionPanel>
                    내용
                </AccordionPanel>
            </AccordionItem>

            <AccordionItem>
                <AccordionButton>
                    제목
                    <AccordionIcon/>
                </AccordionButton>
                <AccordionPanel>
                    내용
                </AccordionPanel>
            </AccordionItem>

            <AccordionItem>
                <AccordionButton>
                    제목
                    <AccordionIcon/>
                </AccordionButton>
                <AccordionPanel>
                    내용
                </AccordionPanel>
            </AccordionItem>
        </Accordion>
    </div>
}

 

 

 

---

🔎 Tabs (탭)

• Tabs : 전체 탭을 감싸는 부모 컴포넌트
• TabList : 탭의 제목들을 감싸는 자식 컴포넌트
• TabPanels : 각 탭에 해당하는 내용을 감싸는 자식 컴포넌트

 

✏️ Tabs 속성 (부모)

여러 개의 AccordionItem을 감싸는 부모 컴포넌트

• variant 속성 : 탭의 스타일 설정
  옵션 : line, enclosed, enclosed-colored, soft-rounded, solid-rounded, unstyled
• align 속성 : 탭 버튼들의 정렬 방식 설정
  옵션 : start (왼쪽), center (가운데), end (오른쪽)
• isFitted속성 : 탭 버튼들이 가로 폭을 가득 채울지 여부 설정

 

✏️ TabList (자식 - 제목)

Tabs의 자식 컴포넌트, TabList는 탭의 제목을 감싸는 부모 컴포넌트

• Tab : 각 탭의 제목을 나타내는 자식 컴포넌트

✏️ TabPanels (자식 - 내용)

Tabs의 자식 컴포넌트, TabPanels는 각 탭에 해당 내용을 감싸는 부모 컴포넌트

• TabPanel : 각 탭에 연결된 내용을 나타내는 자식 컴포넌트

 

사용예시

import React from 'react';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';

export default function (){
    return <div>
        <Tabs variant="soft-rounded" align='center' isFitted>
            <TabList>
                <Tab>홈</Tab>
                <Tab>시리즈</Tab>
                <Tab>인기</Tab>
            </TabList>
            <TabPanels>
                <TabPanel>홈 화면</TabPanel>
                <TabPanel>시리즈 화면</TabPanel>
                <TabPanel>인기 화면</TabPanel>
            </TabPanels>
        </Tabs>
    </div>
}

 

 

---

🔎 Modal (팝업) / useDisclosure 훅 (상태관리)

Modal 컴포넌트를 사용하려면 Button 컴포넌트가 필요합니다.

사용자가 버튼을 클릭하면 모달 팝업 창이 열립니다.

모달의 열기와 닫기를 제어하기 위해 useDisclosure 훅을 사용합니다.

이 훅은 Button과 Modal 모두에 적용하여 상태를 관리합니다.

• Modal : 모달 전체를 감싸는 부모 컴포넌트
• ModalOverlay : 모달 외부를 덮는 가림막, 영역 클릭 시 팝업 닫히는 자식 컴포넌트
• ModalContent : 모달의 전체 내용을 감싸는 자식 컴포넌트
• useDisclosure : 모달의 열기/닫기를 토글하는 상태 관리 훅
• Button : 모달을 열고 닫는 데 사용 버튼 컴포넌트

 

✏️ Modal 속성 (부모)

모달 전체를 감싸는 부모 컴포넌트

• isOpen 속성
  모달의 열림 상태(true/false)를 나타냄
• onClose 속성
  모달을 닫을 때 호출되는 함수
• isCentered 속성
  모달을 화면 중앙에 위치
• motionPreset 속성
  모달이 나타날 때 사용할 애니메이션 효과 설정
  옵션 : slideInBottom, slideInRight, slideInLeft, scale, none

<Modal isOpen={isOpen} onClose={onClose} isCentered motionPreset='slideInLeft'>

 

✏️ ModalOverlay (자식 - 가림막)

Modal의 자식 컴포넌트, ModalOverlay는 모달 외부를 덮는 가림막

✏️ ModalContent (자식 - 내용)

Modal의 자식 컴포넌트, ModalContent는 각 모달의 내용을 감싸는 부모 컴포넌트

• ModalHeader : 모달의 제목 표시
• ModalCloseButton : 모달을 닫는 아이콘(×)
• ModalBody : 모달의 본문 내용 표시
• ModalFooter : 모달 하단의 추가 버튼이나 꼬릿말을 넣는 부분

 

✏️ useDisclosure (상태관리 훅)

모달의 열기/닫기를 간편하게 관리하는 훅

• isOpen 속성
  모달이 열려 있는지(true), 닫혀 있는지(false)를 나타내는 값
• onClose 속성
  모달을 닫을 때 호출 (isOpen ➡️ false 변경)
• onOpen 속성
  모달을 열 때 호출 (isOpen ➡️ true 변경)

/*
  모달열림상태 : 모달이 열려 있으면 true, 닫혀 있으면 false
  모달닫기 : 모달을 닫는 함수
  모달열기 : 모달을 여는 함수
*/
const { 모달열림상태, 모달닫기, 모달열기 } = useDisclosure();

import { useDisclosure } from '@chakra-ui/react';
const { isOpen, onClose, onOpen } = useDisclosure();

 

 

✏️ Button 속성 (상태관리 체크 변경)

모달의 상태를 변경하는 버튼

• onClick 속성
  버튼 클릭 시 모달의 열림 상태를 변경

<Button onClick={onOpen}>모달창</Button>

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

// 버튼 클릭 시 모달 열기
<Button onClick={onOpen}>모달 열기</Button>

// 모달 내부에서 닫기 버튼 클릭 시 모달 닫기
<Button onClick={onClose}>모달 닫기</Button>

 

---

사용예시

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

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

    return <div>
        <Button onClick={onOpen}>모달창</Button>
        <Modal isOpen={isOpen} onClose={onClose} isCentered motionPreset='slideInLeft'>
            <ModalOverlay/>
            <ModalContent>
                <ModalHeader>제목</ModalHeader>
                <ModalCloseButton/>
                <ModalBody>본문</ModalBody>
                <ModalFooter>꼬릿말</ModalFooter>
            </ModalContent>
        </Modal>
    </div>
}

 

 

 

---

🔎 Drawer (사이드바) / useDisclosure 훅 (상태관리)

Drawer 컴포넌트를 사용하려면 Button 컴포넌트가 필요합니다.

사용자가 버튼을 클릭하면 사이드바가 열립니다.

사이드바(드로어) 열기와 닫기를 제어하기 위해 useDisclosure 훅을 사용합니다.

이 훅은 Button과 Drawer 모두에 적용하여 상태를 관리합니다.

• Drawer : 사이드바 전체를 감싸는 부모 컴포넌트
• DrawerOverlay : 사이드바 외부를 덮는 가림막, 영역 클릭 시 팝업 닫히는 자식 컴포넌트
• DrawerContent : 사이드바의 전체 내용을 감싸는 자식 컴포넌트
• useDisclosure : 사이드바의 열기/닫기를 토글하는 상태 관리 훅
• Button : 사이드바를 열고 닫는 데 사용 버튼 컴포넌트

 

✏️ Drawer 속성 (부모)

사이드바 전체를 감싸는 부모 컴포넌트

• isOpen 속성
  사이드바의 열림 상태(true/false)를 나타냄
• onClose 속성
  사이드바를 닫을 때 호출되는 함수
• placement 속성
  사이드바가 나타나는 방향을 지정
  옵션 : left, right, top, bottom

<Drawer isOpen={isOpen} onClose={onClose} placement='left'>

 

✏️ DrawerOverlay (자식 - 가림막)

Drawer의 자식 컴포넌트, DrawerOverlay는 사이드바 외부를 덮는 가림막

✏️ DrawerContent (자식 - 내용)

Drawer의 자식 컴포넌트, DrawerContent는 사이드바의 내용을 감싸는 부모 컴포넌트

• DrawerHeader : 사이드바의 제목 표시
• DrawerCloseButton : 사이드바를 닫는 아이콘(×)
• DrawerBody : 사이드바의 본문 내용 표시
• DrawerFooter : 사이드바 하단의 추가 버튼이나 꼬릿말을 넣는 부분

 

✏️ useDisclosure (상태관리 훅)

사이드바의 열기/닫기를 간편하게 관리하는 훅

• isOpen 속성
  사이드바가 열려 있는지(true), 닫혀 있는지(false)를 나타내는 값
• onClose 속성
  사이드바를 닫을 때 호출 (isOpen ➡️ false 변경)
• onOpen 속성
  사이드바를 열 때 호출 (isOpen ➡️ true 변경)

/*
  사이드바 열림 상태 : 사이드바가 열려 있으면 true, 닫혀 있으면 false
  사이드바 닫기 : 사이드바를 닫는 함수
  사이드바 열기 : 사이드바를 여는 함수
*/
const { 사이드바열림상태, 사이드바닫기, 사이드바열기 } = useDisclosure();

import { useDisclosure } from '@chakra-ui/react';
const { isOpen, onClose, onOpen } = useDisclosure();

 

 

✏️ Button 속성 (상태관리 체크 변경)

사이드바의 상태를 변경하는 버튼

• onClick 속성
  버튼 클릭 시 사이드바의 열림 상태를 변경

<Button onClick={onOpen}>드로우 창</Button>

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

// 버튼 클릭 시 사이드바 열기
<Button onClick={onOpen}>사이드바 열기</Button>

// 사이드바 내부에서 닫기 버튼 클릭 시 사이드바 닫기
<Button onClick={onClose}>사이드바 닫기</Button>

 

---

사용예시

import React from 'react';
import { Drawer, DrawerOverlay, DrawerContent, DrawerHeader, DrawerCloseButton, DrawerBody, DrawerFooter, Button } from '@chakra-ui/react';
import { useDisclosure } from '@chakra-ui/react';

export default function (){

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

    return <div>
        <Button onClick={onOpen}>드로우 창</Button>
        <Drawer isOpen={isOpen} onClose={onClose} placement='left'>
            <DrawerOverlay/>
            <DrawerContent>
                <DrawerHeader>제목</DrawerHeader>
                <DrawerCloseButton/>
                <DrawerBody>본문</DrawerBody>
                <DrawerFooter>꼬릿말</DrawerFooter>
            </DrawerContent>
        </Drawer>
    </div>
}

 

 

---

🔎 Popover (말풍선) / useDisclosure 훅 (상태관리)

Popover 컴포넌트를 사용하려면 Button 컴포넌트가 필요합니다.

사용자가 버튼을 클릭하면 요소의 말풍선이 열립니다.

말풍선 열기와 닫기를 제어하기 위해 useDisclosure 훅을 사용합니다.

이 훅은 Button과 Popover 모두에 적용하여 상태를 관리합니다.

• Popover : 말풍선 전체를 감싸는 부모 컴포넌트
• PopoverTrigger : 말풍선을 여는 트리거 역할 자식 컴포넌트
• PopoverContent : 말풍선의 내용을 감싸는 자식 컴포넌트
• useDisclosure : 말풍선의 열기/닫기를 토글하는 상태 관리 훅
• Button : 말풍선을 열고 닫는 데 사용 버튼 컴포넌트

 

✏️ Popover 속성 (부모)

Popover 전체를 감싸는 부모 컴포넌트

• isOpen 속성
  말풍선의 열림 상태(true/false)를 나타냄
• onClose 속성
  말풍선을 닫을 때 호출되는 함수
• placement 속성
  말풍선이 나타나는 방향을 지정
  옵션 : top, right, bottom, left

<Popover isOpen={isOpen} onClose={onClose} placement='bottom'>

 

✏️ PopoverTrigger (자식 - 트리거)

PopoverTrigger는 말풍선을 여는 동작을 할 버튼을 감싸는 자식 컴포넌트

 

• Popover를 열기 위한 트리거가 필요할 때는 PopoverTrigger 사용
• Popover의 위치를 정하기 위해서는 PopoverAnchor 사용

 

✏️ PopoverContent (자식 - 내용)

PopoverContent는 말풍선의 내용을 감싸는 부모 컴포넌트

• PopoverArrow : 말풍선의 화살표 부분, (∧)모양 말풍선이 시작 위치 표시
• PopoverHeader : 말풍선의 제목 표시
• PopoverCloseButton : 말풍선을 닫는 버튼
• PopoverBody : 말풍선의 본문 내용 표시
• PopoverFooter : 말풍선 하단의 추가 버튼이나 꼬릿말을 넣는 부분

 

✏️ useDisclosure (상태관리 훅)

말풍선의 열기/닫기를 간편하게 관리하는 훅

• isOpen 속성
  말풍선이 열려 있는지(true), 닫혀 있는지(false)를 나타내는 값
• onClose 속성
  말풍선을 닫을 때 호출 (isOpen ➡️ false 변경)
• onOpen 속성
  말풍선을 열 때 호출 (isOpen ➡️ true 변경)

/*
  말풍선 열림 상태 : 말풍선이 열려 있으면 true, 닫혀 있으면 false
  말풍선 닫기 : 말풍선을 닫는 함수
  말풍선 열기 : 말풍선을 여는 함수
*/
const { 말풍선열림상태, 말풍선닫기, 말풍선열기 } = useDisclosure();

import { useDisclosure } from '@chakra-ui/react';
const { isOpen, onClose, onOpen } = useDisclosure();

 

 

✏️ Button 속성 (상태관리 체크 변경)

말풍선의 상태를 변경하는 버튼

• onClick 속성
  버튼 클릭 시 말풍선의 열림 상태를 변경

<Button onClick={onOpen}>말풍선 열기</Button>

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

// 버튼 클릭 시 말풍선 열기
<Button onClick={onOpen}>말풍선 열기</Button>

// 말풍선 내부에서 닫기 버튼 클릭 시 말풍선 닫기
<Button onClick={onClose}>말풍선 닫기</Button>

 

---

사용예시

import React from 'react';
import { Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverHeader, PopoverBody, PopoverFooter, PopoverCloseButton, Button } from '@chakra-ui/react';
import { useDisclosure } from '@chakra-ui/react';

export default function PopoverExample() {
  const { isOpen, onClose, onOpen } = useDisclosure();

  return (
    <div>
      <Popover isOpen={isOpen} onClose={onClose} placement='bottom'>
        <PopoverTrigger>
          <Button onClick={onOpen}>말풍선 열기</Button>
        </PopoverTrigger>
        
        <PopoverContent>
          <PopoverArrow />
          <PopoverHeader>Popover 제목</PopoverHeader>
          <PopoverCloseButton />
          <PopoverBody>
            Popover의 본문 내용입니다. 여기에 추가 정보를 담을 수 있습니다.
          </PopoverBody>
          <PopoverFooter>
            <Button onClick={onClose}>닫기</Button>
          </PopoverFooter>
        </PopoverContent>
      </Popover>
    </div>
  );
}

 

 

---