📍 img 태그 - srcimport Icon from '@/assets/icons/icon.svg';... ...import한 이미지를 단순히 img 태그에 사용한다간편하지만 svg 파일의 색상을 변경할 수 없다 📍 ReactComponentimport { ReactComponent as Icon } from '@/assets/icons/icon.svg';... ...svg를 컴포넌트화하면 색상을 변경할 수 있다. svg 파일에서 바꾸고자 하는 요소를 current로 바꿔야 커스텀이 가능하다. 📍 svgr나는 vite를 사용하기에 vite를 사용하는 방법으로 소개하겠다.vite 프로젝트에서 svg 파일을 React 컴포넌트처럼 import 할 수 있는 라이브러리를 사용한다. 🔨 세팅하기패키지 설..

무언가 작업을 했을 때 즉각적인 피드백을 제공하기 위해 toast를 사용했다. 사용자에게 경고 등을 표시할 때 alert을 쓸 수도 있지만, alert보다는 toast가 더 예뻐서 toast를 쓰려고 한다.또한, alert은 사용자가 직접 닫아야 하지만 toast는 디자인/스타일/조작 방법 등 커스터마이징해서 사용할 수 있다. 🎈 패키지 설치yarn add react-toastify 🎈 사용하기import {toast, ToastContainer} from 'react-toastify';import 'react-toastify/dist/ReactToastify.css';function App() { const handelButtonClick = () => { toast.error('경고입니다...

🎈 react-signature-canvas 패키지 설치yarn add react-signature-canvas 🎈 서명 컴포넌트 구현import {useRef} from 'react';import SignatureCanvas from 'react-signature-canvas';const SignaturePad = () => { const canvas = useRef(null); const handleCanvasClear = () => { canvas.current?.clear(); }; export default SignaturePad; 🎈 활용편🔨 화면 사이즈 변화하면 입력값이 리셋되는 경우SignatureCanvas props에 추가clearOnResize={false} 🔨 ..

🖥️ React란?Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술 🖥️ React 특징1. 컴포넌트를 기반으로 UI를 표현한다컴포넌트 (Component)화면(UI)을 구성하는 구성 요소 2. 화면 업데이트 구현이 쉽다업데이트사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것 선언형 프로그래밍 vs 명령형 프로그래밍 선언형 프로그래밍 명령형 프로그래밍 과정은 생략하고 목적만 간결히 명시하는 것목적을 이루기 위한 모든 일련의 과정을 설명하는 방식마치 우리가 식당에서 주문하는 것과 유사함“토마토 파스타 하나 주세요”토마토 파스타를 만드는 방식은 모르겠고, 아무튼 토마토 파스타..

🚨 문제 상황Next.js로 x(구 트위터) 클론코딩하는 강의를 듣는 중 문제가 발생했다.나는 분명 강의 코드를 복사해서 내 프로젝트에 붙여 넣었는데 강의처럼 작동하지 않았다. 'use client';import { useRouter } from 'next/navigation';import Main from '@/app/(beforeLogin)/_component/Main';export default function Login() { const router = useRouter(); router.replace('/i/flow/login'); return ;}코드는 이런 단순한 코드이다.클라이언트에서 로그인 페이지(/login)로 접근할 경우, 내부적으로 router.replace('/i/flow/..

🔍 Control Props 패턴이란?이전 글에서 Compound Component 패턴에 대해 알아봤다.컴파운드 컴포넌트 패턴은 부모와 자식 컴포넌트가 자연스럽게 협력하는 구조를 만들기 위한 패턴이었다. Control Props 패턴은 컴포넌트가 자체 상태를 가질 수도 있고, 부모가 상태를 제어할 수도 있게 만드는 패턴이다.input, select, modal, toggle 등 상태를 외부에서 완전히 제어할 수 있게 해야 하는 컴포넌트에서 사용된다. 🧩 예제 코드이전 글에서 활용한 예제 코드를 수정하여 실습해 보자.Toggle.tsximport { createContext, useContext, useState, ReactNode } from 'react';type ToggleContextType ..

🔍 Compound Component 패턴이란?Compound Component(컴파운드 컴포넌트) 패턴은 부모와 자식 컴포넌트가 자연스럽게 협력하는 구조를 만들기 위한 패턴이다.부모가 Context를 제공하고, 자식 컴포넌트들이 props 없이 그 상태를 자유롭게 사용할 수 있다.이 패턴은 Select, Accordion, Tabs, Modal Step Form과 같은 UI를 구성할 때 자주 사용된다.Toggle 예제를 통해 이 패턴을 이해하고, Context의 역할을 알아보자. 🔍 Context란?Context는 여러 컴포넌트들이 데이터를 공유할 수 있도록 도와주는 기능이다.React에서는 일반적으로 부모 컴포넌트에서 자식으로 데이터를 props를 통해 넘긴다.하지만 컴포넌트 깊이가 깊어질수록 이..

리스트가 길어질수록 모든 항목을 한 번에 렌더링하면 성능 문제가 발생한다.특히 1,000개 이상의 데이터를 렌더링할 때 브라우저가 느려지고 사용자 경험이 저하된다.이를 해결하는 기술이 Virtual Scroll(가상 스크롤)이다. 🔎 가상 스크롤(Virtual Scroll)이란?가상 스크롤(Virtual Scroll)은 긴 리스트나 테이블에서 화면에 보이는 항목만 렌더링하고 나머지 항목은 렌더링하지 않는 기법이다.사용자가 스크롤할 때마다 보여줄 항목만 동적으로 추가한다.렌더링 비용과 메모리 사용량을 크게 줄일 수 있다.항목 수가 많아도 초기 렌더링 속도를 빠르게 유지하고 스크롤 성능을 높이는 것이다.💡 예: 카카오톡, 인스타그램, 유튜브 피드 → 수천~수만 개 항목이 있지만 느려지지 않는다. 🧩 ..