개발지식소

1. Pages Router 개요Pages Router는 Next.js 1.x부터 존재했던 기존 라우팅 방식입니다. pages/ 디렉토리 안에 파일을 생성하면 그 파일명이 자동으로 라우트가 됩니다.예를 들어:pages/ ┣ index.js → / ┣ about.js → /about ┗ blog/[id].js → /blog/:id파일 이름 기반 자동 라우팅getStaticProps, getServerSideProps 등 데이터 패칭 함수 제공Link 컴포넌트를 통한 클라이언트 라우팅 지원👉 특징: 학습 곡선이 낮고 직관적, 기존 프로젝트에서 많이 사용됨.2. App Router 개요App Router는 Next.js 13에서 실험적으로 도입되고, 14부터 안정화된 새로..

React의 기본 Hook(useState, useEffect, useRef, useContext)은 “상태를 쓴다/부수효과를 관리한다”로 끝나지 않습니다. 언제, 어떻게 쓰느냐에 따라 렌더 횟수, 불필요한 네트워크 호출, 이벤트 리스너 누수까지 좌우됩니다. 아래는 개념 + 실전 성능 팁을 한 번에 정리한 가이드입니다.1) useState — 초기화·업데이트만 잘해도 빨라진다개념 요약컴포넌트 로컬 상태를 선언하고 업데이트합니다. 업데이트가 일어나면 컴포넌트는 다시 렌더됩니다.성능 팁 1: Lazy 초기화로 무거운 계산 1회로 제한// ❌ 매 렌더마다 heavy() 실행됨const [list, setList] = useState(heavy());// ✅ 최초 마운트 시에만 heavy() 실행const [l..