본문 바로가기
728x90
반응형

📌 Front End/└ React36

[React] Chakra UI 테마(Theme) - 사용자 정의 스타일 📌 Chakra UI 테마(Theme)디자인 시스템을 고려할 때, 웹 페이지에서 기본적으로 사용되는 색상이 있습니다.반복적으로 사용되는 색상은 변수화하여 관리할 필요가 있습니다. Chakra UI는 API를 통해 간편하게 사용자 정의가 가능하며, 테마 변경이 쉽습니다.재사용 가능한 UI 구성 요소를 빠르게 구축할 수 있도록 돕는 도구 키트로, React 위에 구축되어 있습니다.이 시스템은 테마 엔진을 사용하여 스타일을 지정합니다.📌 Chakra UI 테마 카테고리Chakra UI를 사용할 때 기본적으로 알아야 할 핵심 요소들입니다.이들을 통해 일관되고 유연한 디자인 시스템을 구축할 수 있습니다.아래와 같이 정해진 카테고리명을 사용합니다.카테고리설명components기본 컴포넌트의 디자인 / 속성 데이.. 2024. 9. 29.
[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.. 2024. 9. 29.
[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를.. 2024. 9. 25.
[React] 리액트에서 Chakra UI, Chakra Icons 사용하기 📌 차크라 란? (Chakra UI)Chakra UI는 React용 디자인 시스템을 제공하는 라이브러리로컴포넌트 기반 스타일링과 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다. 컴포넌트 기반 스타일링 다양한 기본 컴포넌트를 제공해, 이를 활용해 빠르게 스타일을 적용할 수 있습니다.테마 설정 테마 설정을 통해 전체적인 스타일 일관성을 유지하고, 쉽게 커스터마이징할 수 있습니다.반응형 디자인 기본적으로 반응형 디자인을 지원하여 다양한 디바이스 환경에 대응할 수 있습니다.접근성 웹 접근성을 고려한 컴포넌트를 제공하여, 접근성을 높일 수 있습니다.📌 Tailwind CSS vs Chakra UI 테일윈드(Tailwind CSS)  개별 스타일을 유틸리티 클래스를 통해 직접 정의하는 방식 차크라(Chak.. 2024. 9. 25.
[React] Tailwind CSS 커스텀(Custom) 설정 - tailwind.config.js 옵션, Tailwind CSS 선택자(가상클래스, 가상요소, 미디어쿼리, 반응형) 📌 Tailwind CSS 커스터마이징 (tailwind.config.js)Tailwind는 기본적으로 제공되는 유틸리티 클래스를 사용해 빠르게 스타일링을 할 수 있지만,각 프로젝트의 필요에 따라 커스터마이징이 필요할 때가 있습니다.이를 위해 tailwind.config.js 파일을 활용하여 필요한 스타일을 쉽게 정의할 수 있습니다.📝 설정 파일(tailwind.config.js) 구조'📜tailwind.config.js' 파일은 Tailwind를 커스터마이징하는 핵심 파일입니다.여기에서 theme, variants, plugins, darkMode 등의 설정을 추가하여 프로젝트에 맞는 스타일을 정의합니다./* 📜 tailwind.config.ts *//** @type {import('tailwi.. 2024. 9. 23.
[React] 리액트에서 Tailwind CSS 사용하기 📌 테일윈드 란? (Tailwind CSS)Tailwind는 유틸리티 우선(Utility-First) CSS 프레임워크입니다.여기서 "유틸리티 클래스"란, 버튼이나 모달 같은 요소를 구성하는 것이 아니라,빨간색 글자 색상이나 XL 사이즈 글자 크기처럼 각각의 CSS 속성과 값을 의미합니다. 즉, "유틸리티 우선"이라는 것은 Bootstrap처럼 미리 정의된 스타일을 사용하는 것이 아니라,사용자가 원하는 대로 각 속성 값을 적용할 수 있다는 뜻입니다.Bootstrap은 미리 정의된 클래스명만 사용할 수 있지만,Tailwind는 대괄호([])를 사용하여 사용자 정의 클래스명을 직접 지정할 수 있습니다.예를 들어, bg-[color]와 같이 사용할 수 있습니다. Tailwind에서 정의된 클래스를 사용하면,.. 2024. 9. 20.
[React] 리액트에서 CSS 적용하는 여러가지 방식(Import, 인라인, CSS Module, Styled-Components) 📌 React에 CSS 적용하기 create-react-app으로 만든 React 프로젝트에서는 CSS를 사용하기 위해 따로 설정할 필요가 없습니다.기본적으로 CSS를 다룰 수 있도록 준비되어 있습니다. css-loader @import, url() 등 CSS 파일에서 다른 파일을 불러오거나 이미지를 사용할 수 있게 도와줌 style-loader  태그를 통해 CSS를 DOM에 적용 📌 React에서 CSS 처리방법Import (전역 방식)인라인(inline) 스타일CSS Module (클래스명이 고유한 해시값으로 변환) Styled-Components 라이브러리 🔎 Import (전역 방식)가장 기본적인 방법으로, 컴포넌트에서 CSS 파일을 직접 import하여 사용합니다.className 속성을.. 2024. 9. 20.
[React] MobX 상태 관리, 비동기 작업, 이벤트 시스템(action, computed, runInAction, autorun, reaction, when) 📌 MobX 6 주요 개념MobX 6부터는 @observable, @action, @computed 와 같은 데코레이터 문법 대신makeObservable과 makeAutoObservable을 사용해상태와 메서드를 명시적으로 설정하는 것이 권장됩니다.📌 관찰 가능한 상태(Observable) / 상태 변경 메서드(Action) Observable 상태가 바뀌면 자동으로 감지하고, 이를 사용하는 컴포넌트를 자동으로 업데이트 Action 상태를 변경하는 메서드, 여러 변경을 그룹화하여 성능 개선 makeAutoObservable 클래스의 생성자에서 호출하면 모든 속성과 메서드를  자동으로 observable 및 @action으로 설정 makeObservable 클래스의 속성을 observable로 만들고.. 2024. 9. 13.
[React] MobX 상태 관리 라이브러리 📌 MobX (전역 상태 관리) 상태 관리 라이브러리는 여러 컴포넌트 간의 상태를 쉽게 관리할 수 있도록 돕는 도구입니다.MobX는 전역적으로 상태를 관리할 수 있는 스토어(Store)를 제공하여,상태를 한 곳에서 관리하고 필요할 때 접근할 수 있게 합니다.이를 통해 컴포넌트 간에 상태를 계속 전달하지 않아도 되어 상태 관리가 간단해집니다.  📌 MobX 작동 원리MobX는 단방향 데이터 흐름을 기반으로 작동합니다.MobX에서의 상태 관리 과정은 다음과 같은 단계로 이루어집니다.  Actions (액션) 상태를 변경하기 위한 함수 사용자가 어떤 동작을 취하면 그에 따라 상태를 변화시키는 역할  Observable State (관찰 가능한 상태) MobX에서 관리하는 데이터 이 데이터는 여러 컴포넌트에.. 2024. 9. 11.
728x90
반응형

티스토리툴바