jonbeo 님의 블로그

React Suspense & lazy() – 코드 스플리팅으로 로딩 속도 최적화하기

안녕하세요 😊React 프로젝트가 커질수록 초기 로딩 속도가 느려지는 문제를 겪게 됩니다.이럴 때 효과적인 방법이 바로 **코드 스플리팅(Code Splitting)**입니다. React는 기본적으로 import로 컴포넌트를 불러오지만,필요할 때만 해당 컴포넌트를 로드하도록 설정하면 초기 번들 크기를 줄일 수 있습니다.이때 사용하는 것이 **React.lazy()**와 ****입니다.📍 1. React.lazy()란?컴포넌트를 **지연 로딩(Lazy Loading)**하는 함수해당 컴포넌트가 실제로 필요할 때만 로드 → 초기 번들 크기 감소기본 문법const MyComponent = React.lazy(() => import("./MyComponent"));📍 2. Suspense란?lazy로 로드..

안녕하세요 😊React를 사용하다 보면“이 계산은 매번 다시 하지 않아도 되는데…”“렌더링이 되어도 이 값은 유지하고 싶다…”이럴 때 유용한 Hook이 바로 **useMemo**와 **useRef**입니다.이번 글에서는 두 Hook의 차이점과실무에서 어떻게 활용할 수 있는지 예제와 함께 정리해드리겠습니다.📍 1. useMemo – 계산 결과 메모이제이션기본 개념의존성 배열이 변할 때만 함수를 실행하고, 그 외에는 이전 계산값을 재사용 예제import { useMemo, useState } from "react";export default function ProductList({ products }) { const [filter, setFilter] = useState(""); const filte..

안녕하세요 😊이번 글에서는 React 18 이후 도입된 동시성(Concurrency) 관련 Hook인 **useTransition**을 알아보겠습니다.useTransition은 덜 중요한 상태 업데이트를 **비동기 전환(transition)**으로 표시하여, 사용자의 타이핑/클릭 같은 긴급한 인터랙션이 느린 렌더링에 막히지 않도록 도와줍니다.1) useTransition 한 줄 정의긴급도 낮은 업데이트를 “전환”으로 표시해, UI가 끊기지 않게 만드는 Hook반환값: [isPending, startTransition]isPending: 전환 중인지 여부 (로딩 스피너, 로딩 텍스트 등에 활용)startTransition(cb): cb 안의 상태 업데이트를 낮은 우선순위로 실행2) 언제 쓰면 좋은가요?검..

이번 글에서는 React의 성능 최적화 Hook 중 하나인useDeferredValue에 대해 알아보겠습니다.이 Hook은 사용자 입력과 같이 빠르게 바뀌는 값의 **"지연된 버전"**을 만들어UI가 끊기지 않고 부드럽게 렌더링될 수 있도록 도와줍니다.초보자 분들도 이해할 수 있도록 개념부터 사용법, 실전 예제까지 차근차근 설명드릴게요!📍 1. useDeferredValue란?useDeferredValue는바로 반영하지 않고, 브라우저가 여유 있을 때 값 업데이트를 미루는 Hook입니다.주로 입력이 빠르게 바뀌는데, 그걸 기반으로 무거운 연산을 해야 할 때 사용됩니다.예: 검색창에 입력할 때마다 긴 리스트를 필터링해야 한다면→ useDeferredValue로 부하를 줄일 수 있습니다.📍 2. 기본 사..

디자인이 깔끔한 로그인 페이지를 만들고 싶은데 CSS가 너무 어렵다고 느끼셨다면,이번 포스팅이 딱입니다!Tailwind CSS를 활용하면 복잡한 CSS 없이도 빠르게 예쁜 UI를 만들 수 있어요.이번에는 React + Tailwind 조합으로 로그인 폼을 직접 만드는 실습을 함께 해보겠습니다. ✅ 사전 준비1. React 프로젝트 생성npx create-react-app login-formcd login-form2. Tailwind 설치 및 설정npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p tailwind.config.js 수정:content: ["./src/**/*.{js,jsx,ts,tsx}"] src/index.css ..

React로 프로젝트를 만들다 보면 점점 커지는 컴포넌트,복붙으로 뒤죽박죽 된 코드들...관리하기도 힘들고, 다른 사람이 보기에도 난감한 구조가 되기 쉽습니다.이럴 때 필요한 게 바로 **‘리팩토링(Refactoring)’**입니다!이번 포스팅에서는 실무에서도 자주 쓰는 컴포넌트 리팩토링 꿀팁 5가지를 예제와 함께 소개해드리겠습니다. ✅ 꿀팁 1. UI 쪼개기 (컴포넌트 분리)하나의 컴포넌트에 300줄… 이건 절대 안 됩니다 😱UI 단위로 잘라서 컴포넌트를 쪼개면 관리도 쉬워지고 재사용도 가능해집니다.💡 Beforefunction Profile() { return ( 이름 설명 팔로우 );}💡 After function Profile() { ..

React 컴포넌트끼리 데이터를 주고받는 기본 방식은 props입니다.하지만 props를 너무 많이 전달하면 코드가 복잡해지기 쉬워요.이럴 때 등장하는 구조가 바로 Context API입니다.이 포스팅에서는 props와 Context가 어떤 차이가 있고언제 어떤 걸 쓰는 게 좋은지 흐름도와 예제 중심으로 이해하기 쉽게 알려드릴게요. ✅ 기본 개념 요약항목 Props Context API 목적부모 → 자식 데이터 전달전역 상태 공유사용 대상단일/소수의 컴포넌트여러 컴포넌트 간 데이터 공유단점중첩이 깊으면 props drilling 발생구조 파악이 어려워질 수 있음장점명시적인 데이터 전달전역 접근 가능, props 생략 가능 1️⃣ Props로 상태 전달하는 기본 예제function Parent() { ..

React에서 컴포넌트 상태를 다룰 땐 대부분 useState를 사용합니다.그런데 상태가 복잡해지면 useReducer가 더 유리할 때가 있어요.이번 글에서는 useState와 useReducer가 어떨 때 어떤 차이점이 있는지,그리고 언제 어떤 걸 써야 하는지 예제를 통해 비교해보겠습니다. ✅ useState란?가장 기본적인 상태관리 훅변수 1~2개, 간단한 숫자나 문자열 상태에 적합const [count, setCount] = useState(0); ✅ useReducer란?상태 업데이트 로직이 복잡할 때 사용여러 상태를 하나의 로직으로 관리 가능reducer 함수와 dispatch를 함께 사용const [state, dispatch] = useReducer(reducer, initialState)..

React로 SPA(Single Page Application)를 만들다 보면, 페이지 이동이 필요해집니다.이때 사용하는 도구가 바로 React Router DOM입니다.이번 포스팅에서는 2025년 기준으로 가장 많이 쓰는 버전인 v6 기준으로React Router DOM을 사용하는 방법을 기초부터 중첩 라우팅까지 간단한 예제와 함께 정리해드릴게요! ✅ React Router DOM이란? React는 기본적으로 페이지 이동 기능이 없습니다.SPA에서 URL에 따라 화면을 바꾸기 위해선 react-router-dom 패키지가 필요합니다. 1️⃣ 설치 방법npm install react-router-dom 또는 yarn 사용 시:yarn add react-router-dom 2️⃣ 기본 구성: Browse..

지금까지 MUI와 Ant Design의 기본 사용법과 커스터마이징 방법을 배워봤다면,이번엔 그걸 직접 관리자 페이지 레이아웃에 적용해보는 실습을 해볼 차례입니다.사이드바 + 상단바 + 콘텐츠 영역으로 구성된 기본적인 대시보드 틀을 구현해볼게요.✅ 구조 설계 미리보기+-------------------------------+| Header Bar |+------------+------------------+| Sidebar | Main Content |+------------+------------------+ ✅ MUI 버전 예제import { Box, AppBar, Toolbar, Drawer, Typography } from '@mui/material'..