FrameWork73 DarkMode Chakra는 기본적으로 dark모드를 지원함dark모드를 사용하기 위해서는 아래 순서를 따른다 Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React aSimple, Modular and Accessible UI Components for your React Applications. Built with Styled Systemv2.chakra-ui.com [순서]1. 테마설정2. 테마를 프로젝트에 등록3. 등록한 테마를 적재적소에 적용 [1. 테마설정]테마를 담당하는 파일 생성: theme.ts // theme.ts// 1. imp.. 2024. 8. 10. 모달 + useDisclosure Chakra에서 모달을 만들어 띄우기 위해 useDisclosure 훅을 사용한다.useDisclosure는 isOpen, onOpen, onClose를 반환한다. [Modal]ChakraUI에서 Modal컴포넌트를 이용해 Modal만듬props(isOpen, onClose)를 명시해야 함children 컴포넌트들과 함께 사용됨Modal > ModalComponent > ModalHeader, ModalBody, ModalFooterModalOverlay: 모달 띄워지면 주위 어둡게ModalCloseButton: 모달 닫기 버튼 > onClose함수 실행되는 구조 // 모달 실행시 어둡게 .. 2024. 8. 10. React Router 사용자가 요청한 링크주소(URL)에 맞는 페이지를 찾아서 보여주는 것 [설치] npm i react-router-dom [사용]라우팅 경로별 보일 페이지를 정한다.createBrowserRouter를 활용해 라우팅 경로를 관리한다.라우팅 경로 1개당 1개의 dictionary로 관리RouterProvider를 사용해 라우팅 경로를 등록//----- router.tsximport { createBrowserRouter } from "react-router-dom";import Root from "./components/Root";/*path에 url경로를 적고 element에 경로별 화면을 입력한다.children에 자식경로를 입력하여 가지치기하며 routing을 관리 createBrowserRouter.. 2024. 8. 9. React-Icons [설치]npm install react-icons --save React Icons react-icons.github.io 2024. 8. 9. 이전 1 2 3 4 5 ··· 19 다음