jonbeo 님의 블로그

React를 처음 배우면서 가장 많이 마주치는 훅 중 하나가 바로 **useEffect**입니다.하지만 초보자 분들에게는 “언제 실행되는지?”, “언제 멈추는지?” 헷갈리기 쉬운 개념이죠.이번 포스팅에서는 useEffect의 동작 원리와 사용법,그리고 클래스 컴포넌트의 라이프사이클 메서드와의 비교까지 알아보겠습니다.✅ 1. useEffect란?컴포넌트가 렌더링된 이후 특정 작업(=Effect)을 수행할 수 있도록 하는 React Hook입니다. 예:API 호출이벤트 리스너 등록타이머 설정외부 상태 동기화 등📌 기본 문법 useEffect(() => { // 실행할 코드}, [의존성 배열]);✅ 2. useEffect 실행 시점 정리 의존성 배열 실행 시점 없음항상 실행 (렌더링마다)빈 배열 []처음..

SEO(Search Engine Optimization)는 단순히 구글 노출이 아니라,사용자와 검색엔진 모두가 이해할 수 있는 구조로 웹을 만드는 것입니다. React, Next.js 환경에서는 SSR(서버 사이드 렌더링) 또는 SSG(정적 생성)과 함께메타정보, OG(Open Graph), JSON-LD 등을 세팅해줘야 합니다.🧱 1. 기본 메타태그 설정 📌 필수 메타태그 3종 세트title → 검색 제목description → 검색 결과 요약robots → 검색엔진 접근 허용🪶 2. Open Graph (SNS 미리보기 설정) 📌 Open Graph는 페이스북, 카카오톡, 트위터 등 SNS 공유 썸네일 정보 💡 트위터 추가 메타태그 ⚡ 3. Next.js에서 자동 SEO 설정 (App R..

웹사이트 속도는 UX, SEO, 매출, 이탈률까지 모든 것에 영향을 미칩니다.특히 3초 이상 로딩되면 40%의 사용자가 떠난다는 통계가 있을 정도죠 ⚡ 이번 포스팅에서는 실제 서비스에서 바로 적용 가능한프론트엔드 성능 최적화 핵심 3단계를 다룹니다 👇⚙️ 1. 코드 스플리팅 (Code Splitting)앱을 여러 조각으로 나눠, 필요한 코드만 로드하는 기술🔸 React 예시 (Dynamic Import) import React, { Suspense, lazy } from "react";const Chart = lazy(() => import("./Chart"));export default function Dashboard() { return ( 대시보드 로딩 중...}> ..

React 앱이 느려지는 주요 원인은 대부분 “불필요한 리렌더링”입니다.컴포넌트가 재렌더링될 때마다 함수, 객체, 배열이 새로 생성되기 때문이죠. 이 문제를 해결하기 위한 세 가지 Hook:🧠 useMemo, ⚙️ useCallback, 📦 useRef 이 세 가지를 제대로 알면 성능 최적화 + 안정적인 상태 관리가 동시에 가능합니다 👇🧠 1. useMemo – 계산 결과를 메모이징복잡한 계산의 결과를 기억해두고, 의존값이 변할 때만 다시 계산. import { useMemo, useState } from "react";function ExpensiveComponent({ items }: { items: number[] }) { const [count, setCount] = useState(0)..

React 프로젝트에서 자연스러운 애니메이션을 구현하고 싶다면CSS transition이나 GSAP보다 먼저 고려해야 할 라이브러리, 바로 Framer Motion입니다. Next.js, CRA, Remix 등 어떤 React 환경에서도 쉽게 동작하고,상태 변화 → 애니메이션 전환을 아주 직관적으로 다룰 수 있죠.⚙️ 1. 설치 및 기본 세팅 npm install framer-motion 기본 Import: import { motion } from "framer-motion";🧩 2. 기본 애니메이션 예제 import { motion } from "framer-motion";export default function BasicBox() { return ( );} 📌 실행 흐름initial:..

기존 pages/ 라우터와 달리, App Router는 디렉터리 구조 자체가 라우팅 규칙이 됩니다.app/ 디렉토리 안의 폴더마다 페이지, 레이아웃, 로딩, 에러 처리, 메타데이터를 담당하는 파일이 존재하죠.🧩 1. App Router 기본 구조 app/ ├─ layout.tsx # 공통 레이아웃 ├─ page.tsx # 루트 페이지 ├─ loading.tsx # 로딩 상태 ├─ error.tsx # 에러 페이지 ├─ about/ │ ├─ page.tsx # /about │ ├─ layout.tsx # about 전용 레이아웃 │ ├─ loading.tsx # about 로딩 UI │ └─ error.ts..

React로 만든 SPA(Single Page Application)는 기본적으로 클라이언트 렌더링(CSR) 방식입니다.하지만 이 방식은 SEO, 초기 로딩 속도에서 한계가 있었죠.Next.js는 이런 단점을 보완하기 위해 다양한 렌더링 옵션을 제공합니다 👇💻 1. CSR (Client-Side Rendering)📌 렌더링 위치 → 브라우저(클라이언트)📌 예시 → 순수 React 앱 (create-react-app) function App() { const [data, setData] = useState(null); useEffect(() => { fetch("/api/data").then(res => res.json()).then(setData); }, []); return {dat..

React의 상태 관리는 프로젝트 규모와 요구사항에 따라 달라집니다.단순히 useState로 충분한 경우도 있지만, 전역 상태 관리가 필요해지면 선택지가 다양해집니다.이번 포스팅에서는 대표적인 세 가지 접근법을 살펴봅니다.🧩 1. Context APIReact 기본 제공 전역 상태 관리 도구✅ 특징React에 내장 → 별도 라이브러리 설치 불필요createContext + useContext 사용전역 상태를 Provider로 감싸서 하위 컴포넌트에서 접근 가능📌 예시 const ThemeContext = React.createContext();function App() { return ( );}function Toolbar() { const theme = React.us..

기존의 웹사이트는 URL 변경 시 서버에서 새로운 페이지를 로드하는 방식이었습니다.하지만 SPA에서는 실제 HTML은 하나(index.html)만 존재하고,페이지 전환은 자바스크립트로 UI를 바꿔주는 방식으로 이루어집니다. 👉 이 과정을 쉽게 구현해주는 게 React Router입니다.⚙️ 1. React Router 설치 npm install react-router-dom 📌 2. 기본 구조 import { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./pages/Home";import About from "./pages/About";function App() { return ( ..

리액트는 상태가 변경되면 관련된 컴포넌트를 다시 렌더링하는 방식으로 동작합니다.하지만 이 과정에서 필요 없는 컴포넌트까지 렌더링되면 성능 저하로 이어지죠.이를 방지하기 위해 메모이제이션(Memoization) 기법을 활용합니다.🧠 1. React.memo컴포넌트 자체를 메모이제이션하여 불필요한 리렌더링 방지 import React from "react";const Child = React.memo(({ value }) => { console.log("렌더링됨:", value); return {value};});export default Child;props가 바뀌지 않으면 다시 렌더링하지 않음PureComponent와 비슷한 개념📌 주의: props가 객체/배열일 경우 참조가 바뀌면 여전히 리렌더..