본문 바로가기

프론트엔드/React9

react-helmet react-helmet주요 기능1. 동적 제목 설정 ()import { Helmet } from 'react-helmet';function MyComponent() { return ( My Page Title Page content );}2. 메타 태그 추가 3. 링크, 스크립트 태그 추가 4. 중첩된 Helmet 처리 (Nested Helmet)여러 컴포넌트에서 Helmet을 사용할 경우, 가장 마지막 렌더링된 컴포넌트가 를 덮어씌웁니다. 설치 방법npm install react-helmet주의 사항react-helmet은 **클라이언트 사이드 렌더링(CSR)**에서 잘 작동합니다.SSR(서버 사이드 렌더링)을 사용한다면, 더 최신.. 2025. 5. 3.
react-ga4 react-ga4react-ga4는 React 애플리케이션에서 Google Analytics 4 (GA4) 를 손쉽게 사용할 수 있도록 도와주는 라이브러리입니다.이는 Google이 이전 Universal Analytics에서 GA4로 전환함에 따라 생긴 변화에 대응하기 위해 만들어졌습니다.주요 특징GA4 지원: react-ga는 Universal Analytics에 맞춰져 있고, react-ga4는 GA4 전용입니다.React 친화적 사용법: React 앱 내에서 페이지뷰, 이벤트, 사용자 속성 등을 추적하기 쉽게 해줍니다.SPA 지원: 페이지 리로드 없이 라우팅이 이루어지는 React 환경에서도 정확한 페이지 추적이 가능하도록 설계되어 있습니다.설치 방법npm install react-ga4기본 사용법.. 2025. 5. 1.
react-circle-flags 만국기 react-circle-flags 만국기react-circle-flags는 React 애플리케이션에서 다양한 국가의 국기를 원형(Circle) 아이콘 형태로 쉽게 사용할 수 있게 해주는 오픈소스 라이브러리입니다. 보통 국가 선택 드롭다운이나 사용자 프로필 등에 자주 사용됩니다.주요 특징원형 형태의 깔끔한 국기 아이콘SVG 기반이라 고해상도에서도 선명React 컴포넌트 형태로 간편한 사용다양한 크기 지원설치 방법npm install react-circle-flags기본 사용법import CircleFlag from 'react-circle-flags';function App() { return ( Hello! );}주요 PropsProp설명예시co.. 2025. 4. 19.
react-share 소셜 미디어 공유 버튼 라이브러리 react-share 소셜 미디어 공유 버튼 라이브러리 react-share는 React 애플리케이션에서 소셜 미디어 공유 버튼을 쉽게 추가할 수 있도록 도와주는 인기 있는 오픈 소스 라이브러리다. 트위터, 페이스북, 카카오톡, 텔레그램 등 다양한 플랫폼에 맞는 공유 버튼을 제공하며, 각 플랫폼의 URL 스킴을 자동으로 처리해줘서 매우 간편하게 사용할 수 있다.주요 특징다양한 소셜 플랫폼 지원: Facebook, Twitter, Telegram, WhatsApp, Reddit, LinkedIn 등아이콘 포함 버튼 제공커스터마이징 가능 (아이콘 크기, 스타일 등)TypeScript 지원설치 방법npm install react-share또는yarn add react-share 기본 사용법 예시예를 들어 페이.. 2025. 4. 13.
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.

티스토리툴바