전체 글126 Lottie 애니메이션 Lottie 애니메이션Lottie란?Airbnb에서 만든 애니메이션 렌더링 라이브러리After Effects에서 만든 애니메이션을 JSON으로 변환해서 웹/앱에서 재생 가능SVG 또는 Canvas로 부드럽고 가벼운 애니메이션을 구현애니메이션 고르기: LottieFiles 사용법https://lottiefiles.com/ LottieFiles: Download Free lightweight animations for website & apps.Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship .. 2025. 4. 12. Ant Design Ant Design Ant Design은 중국의 알리바바 그룹에서 만든 React UI 라이브러리로, 기업용(enterprise-grade) UI 설계에 초점을 맞췄다.디자인이 깔끔하고 일관성 있으며, 수많은 고급 컴포넌트를 제공해서 생산성을 엄청 높여준다.Ant Design이란?풍부한 UI 컴포넌트: 버튼, 모달, 테이블, 폼 등 거의 모든 걸 제공.디자인 시스템 기반: 깔끔하고 일관된 UX를 제공.i18n 지원: 다국어, RTL 등의 기능도 기본 탑재.TypeScript 지원: TS로도 완벽하게 쓸 수 있음.커스터마이징 가능: 테마 변경도 쉬움.설치 방법npm install antdCSS를 전역에 포함해야 하므로 보통 index.js나 App.js에 다음을 추가합니다:import 'antd/dist/.. 2025. 4. 12. 객체의 불변성 객체의 불변성React에서 useState로 객체를 다룰 때 불변성(Immutability) 개념을 잘 이해하고 있어야, 예상대로 리렌더링이 잘 되고 버그도 예방할 수 있다.불변성이란, 원래 객체를 직접 수정하지 않고, 복사해서 수정된 새 객체를 만드는 방식을 말한다.React에서는 상태가 변경될 때 컴포넌트가 리렌더링되는데, 기존 객체를 직접 수정하면 변경을 감지하지 못해 리렌더링이 일어나지 않을 수 있다. 나쁜 예시 (불변성 깨짐)const [user, setUser] = useState({ name: 'Alice', age: 25 });// ❌ 직접 객체 수정user.age = 26;setUser(user);이 경우 user 객체의 참조는 바뀌지 않았기 때문에, React는 "아무것도 안 바뀌었네".. 2025. 4. 12. useParams vs useNavigate useParams vs useNavigateuseParams와 useNavigate는 React Router에서 제공하는 Hook들이다.이 둘은 라우팅 관련 기능을 사용할 때 아주 자주 사용한다.useParams – URL의 파라미터를 가져오는 Hook라우트(URL 경로) 안에 동적 파라미터가 있을 때, 그 값을 컴포넌트에서 꺼내서 사용하고 싶을 때 사용한다.// App.jsimport { BrowserRouter, Routes, Route } from 'react-router-dom';import UserPage from './UserPage';function App() { return ( } /> );} // UserPage.jsimport { us.. 2025. 4. 6. useState vs useEffect useState vs useEffect useState와 useEffect는 React의 함수형 컴포넌트에서 가장 자주 사용하는 Hook 중 하나다.useStateuseState는 컴포넌트의 상태(state)를 저장하고 관리할 수 있도록 해주는 Hook이다. const [state, setState] = useState(initialValue); state: 현재 상태 값setState: 상태를 업데이트하는 함수initialValue: 초기 상태 값 import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( 현재 카운트: {count} se.. 2025. 4. 6. React 스타일링 방식 비교 (CSS Modules, styled-components, 일반 CSS) React 스타일링 방식 비교 (CSS Modules, styled-components, 일반 CSS) 방식모듈화클래스 충돌 방지동적 스타일가독성/유지보수CSS Modules✅✅❌✅styled-components✅✅✅✅일반 CSS❌❌❌❌ (규모 커지면) 1. CSS Modules파일 확장자: MyComponent.module.css클래스 이름 자동 고유화 → 충돌 걱정 없음정적인 스타일에 아주 좋고, 유지보수도 용이함📁 디렉토리 구조src/├── components/│ └── Button/│ ├── Button.jsx│ └── Button.module.css└── App.jsxButton.module.css.button { background-color: #4caf50; c.. 2025. 4. 5. 이전 1 2 3 4 ··· 21 다음