꽃 같은 인생

🌐 React 전역 상태관리 개념 정리 노트 🌐🎯 1. 전역 상태관리의 장점리액트는 대표적인 SPA라이브러리이고 SPA구현방법은 상태변경 → 리렌더링 이기에 상태를 잘 관리 하는 것이 매우 중요하다.🎨 리액트 전역 상태 관리 개념리액트 전역 상태 관리는 여러 컴포넌트 간 데이터 공유를 효율적으로 처리하는 방법.로컬 상태(useState)로는 관리하기 어려운 글로벌 데이터(예: 사용자 정보, 테마 설정, 로그인 상태 등)를 전역에서 일관되게 사용할 수 있다.전역 상태 관리가 필요한 이유:⚡ props drilling 문제 해결♻️ 반복적인 데이터 전달 방지🔗 컴포넌트 간 상태 일관성 유지📌 데이터 일관성 및 유지보수여러 컴포넌트에서 동일한 데이터를 공유할 때 중앙에서 관리하여 일관성 유지가 가능..

🌈 SCSS 개념 및 활용 노트 🌈🎨 1. SCSS 개념SCSS(Sassy CSS)는 Sass(Syntactically Awesome Stylesheets)의 문법 중 하나로, CSS와 호환되는 확장된 문법을 제공해. SCSS는 CSS보다 더 강력한 기능(⭐️ 변수, 🌿 중첩, 💡 재사용 등)을 지원하여 스타일링 작업을 효율적이고 유지보수하기 쉽게 만들어준다.🌟 SCSS의 장점:💾 코드 재사용성 증가🧹 유지보수 용이👀 가독성 높은 구조화된 코드🏗️ 복잡한 CSS 관리 용이🌟 2. SCSS 사용법🎁 📌 변수 선언 및 사용 방법변수는 $ 기호를 사용하여 선언해. 이를 통해 색상, 글꼴 크기 등의 값을 재사용할 수 있어.// 🌈 변수 선언$primary-color: #ff6b6b;$s..

🌟 HTML5 & CSS3 정리 노트 🌟HTML5와 CSS3는 최신 웹 표준으로, 보다 효율적이고 의미론적인 마크업과 스타일링을 제공한다.🔍 HTML5 마크업 정리🔖 HTML5의 기본 구조 웹사이트 제목 홈 소개 연락처 HTML5 소개 HTML5는 웹 표준의 최신 버전입니다. 관련 링크 HTML5 문서 CSS3 가이드 ..

🌟 HTML5 마크업 언어 정리 🌟HTML5는 최신 웹 표준으로, 보다 효율적이고 의미론적인 마크업을 제공한다.🔖 HTML5의 기본 구조 웹사이트 제목 홈 소개 연락처 HTML5 소개 HTML5는 웹 표준의 최신 버전입니다. 관련 링크 HTML5 문서 CSS3 가이드 &co..

🎯 React 컴포넌트 생명주기 (Lifecycle) 정리 🎯1️⃣ 컴포넌트 생명주기란?React 컴포넌트는 탄생(Mount) → 업데이트(Update) → 소멸(Unmount) 과정을 거칩니다.클래스형 컴포넌트에서는 생명주기 메서드를, 함수형 컴포넌트에서는 useEffect()를 사용하여 특정 시점에 작업을 수행할 수 있습니다.✅ 컴포넌트 생명주기 주요 과정마운트(Mount): 컴포넌트가 처음 생성되어 화면에 나타날 때업데이트(Update): 상태(state)나 props가 변경될 때언마운트(Unmount): 컴포넌트가 제거될 때💡 쉽게 말하면?컴포넌트의 탄생 → 변화 → 죽음 과정을 관리하는 것이 생명주기입니다.2️⃣ 클래스형 컴포넌트에서의 생명주기클래스형 컴포넌트에서는 생명주기 메서드를 사용하..

🚀 React의 상태 변경 (State Update) 개념 정리 🚀1️⃣ React에서 상태(State)란?*State(상태)**는 React 컴포넌트 내부에서 관리하는 변경 가능한 데이터입니다.상태가 변경되면 자동으로 해당 컴포넌트가 다시 렌더링됩니다.✅ React에서 State의 특징useState() 훅을 사용하여 선언상태가 변경되면 자동으로 UI가 업데이트됨직접 변경(state = newValue)할 수 없으며, setState()를 사용해야 함2️⃣ State 변경하는 방법 (useState)✅ 기본적인 State 변경import React, { useState } from "react";function Counter() { const [count, setCount] = useState..