🎯 2일차: 파일 기반 라우팅 + 불변성 완전 정복!

짱효·2025년 9월 21일

목표공부

✏️

목록 보기

7/7

📚 학습 목표

Next.js 파일 기반 라우팅 시스템 마스터

React 불변성과 상태 업데이트 완전 이해

동적 라우팅 실습으로 실무 능력 향상

📂 Part 1: 파일 기반 라우팅 시스템

🎯 전통적인 라우팅 vs 파일 기반 라우팅

전통적인 React 라우팅 (React Router)

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/blog/:slug" element={<BlogPost />} />
        <Route path="/products/:category" element={<Products />} />
        <Route path="/user/:id/profile" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  )
}

문제점:

라우트가 많아질수록 코드가 복잡해짐
파일 구조와 URL 구조가 따로 관리됨
라우트 추가할 때마다 설정 파일 수정 필요

Next.js 파일 기반 라우팅 (혁명적!)

app/                    URL
├── page.js            → '/'
├── about/
│   └── page.js        → '/about'
├── blog/
│   ├── page.js        → '/blog'
│   └── [slug]/
│       └── page.js    → '/blog/[slug]'
├── products/
│   └── [category]/
│       └── page.js    → '/products/[category]'
└── user/
    └── [id]/
        └── profile/
            └── page.js → '/user/[id]/profile'

장점:

파일 = URL 직관적 매핑
자동 라우트 생성 - 설정 불필요
코드 분할 자동화 - 성능 최적화
중첩 라우팅 쉬움

🔥 App Router 파일 기반 라우팅 완전 분석

1️⃣ 기본 파일 구조와 역할

app/
├── layout.js          🏠 루트 레이아웃 (필수)
├── page.js            📄 홈페이지
├── loading.js         ⏳ 로딩 UI
├── error.js           ❌ 에러 UI  
├── not-found.js       🔍 404 페이지
├── global-error.js    💥 전역 에러
└── favicon.ico        🎯 파비콘

2️⃣ 각 파일의 실제 사용법

page.js - 페이지 컴포넌트

// app/page.js - 홈페이지 ('/' 경로)
export default function HomePage() {
  return (
    <div>
      <h1>홈페이지에 오신 것을 환영합니다!</h1>
      <p>Next.js App Router를 사용한 홈페이지입니다.</p>
    </div>
  )
}

// app/about/page.js - 소개 페이지 ('/about' 경로)
export default function AboutPage() {
  return (
    <div>
      <h1>회사 소개</h1>
      <p>우리는 혁신적인 기술로 세상을 바꿔나가고 있습니다.</p>
    </div>
  )
}

layout.js - 레이아웃 컴포넌트

// app/layout.js - 루트 레이아웃 (모든 페이지에 적용)
export const metadata = {
  title: '우리 회사',
  description: '혁신적인 기술 회사'
}

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>
        <header>
          <nav>
            <a href="/">홈</a>
            <a href="/about">소개</a>
            <a href="/blog">블로그</a>
          </nav>
        </header>
        
        <main>{children}</main>
        
        <footer>
          <p>&copy; 2024 우리 회사</p>
        </footer>
      </body>
    </html>
  )
}

// app/blog/layout.js - 블로그 섹션 레이아웃
export default function BlogLayout({ children }) {
  return (
    <div className="blog-container">
      <aside>
        <h3>카테고리</h3>
        <ul>
          <li><a href="/blog/tech">기술</a></li>
          <li><a href="/blog/business">비즈니스</a></li>
        </ul>
      </aside>
      <div className="blog-content">
        {children}
      </div>
    </div>
  )
}

loading.js - 로딩 UI

// app/loading.js - 전역 로딩
export default function Loading() {
  return (
    <div className="loading-container">
      <div className="spinner"></div>
      <p>로딩 중...</p>
    </div>
  )
}

// app/blog/loading.js - 블로그 섹션 로딩
export default function BlogLoading() {
  return (
    <div>
      <div className="skeleton-title"></div>
      <div className="skeleton-content"></div>
    </div>
  )
}

error.js - 에러 처리

// app/error.js - 전역 에러
'use client' // 에러 컴포넌트는 클라이언트 컴포넌트여야 함

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>문제가 발생했습니다!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>다시 시도</button>
    </div>
  )
}

3️⃣ 중첩 라우팅과 레이아웃 상속

app/
├── layout.js           (루트 레이아웃)
├── page.js            (홈)
├── dashboard/
│   ├── layout.js      (대시보드 레이아웃)
│   ├── page.js        (대시보드 홈)
│   ├── analytics/
│   │   ├── layout.js  (분석 섹션 레이아웃)  
│   │   └── page.js    (분석 페이지)
│   └── settings/
│       └── page.js    (설정 페이지)

레이아웃 상속 구조:

/dashboard/analytics 페이지 접속시:
┌─────────────────────────────────────┐
│ 루트 레이아웃 (app/layout.js)         │
│ ┌─────────────────────────────────┐ │
│ │ 대시보드 레이아웃 (dashboard/)    │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ 분석 레이아웃 (analytics/)   │ │ │
│ │ │ ┌─────────────────────────┐ │ │ │
│ │ │ │ 분석 페이지 내용        │ │ │ │
│ │ │ └─────────────────────────┘ │ │ │
│ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘

🔄 Part 2: React 불변성과 상태 업데이트

🎯 불변성이 뭔가요?

불변성(Immutability) = 원본을 건드리지 말고 새로운 것을 만들어!

일상 예시로 이해하기:

❌ 가변적(Mutable):
원본 문서에 직접 수정 → 원본이 변경됨

✅ 불변적(Immutable):  
원본 문서는 그대로 두고 → 복사본에 수정 → 새 문서 생성

🔥 JavaScript에서 불변성 원칙

1️⃣ 원시 타입은 기본적으로 불변

let a = 5
let b = a  // 값 복사
b = 10     // a는 여전히 5

console.log(a) // 5
console.log(b) // 10

2️⃣ 객체와 배열은 참조 타입 (주의!)

// ❌ 잘못된 방법 - 원본 수정
let user = { name: '김개발', age: 25 }
let updatedUser = user  // 참조 복사!
updatedUser.name = '이개발'

console.log(user.name)        // '이개발' (원본이 바뀜!)
console.log(updatedUser.name) // '이개발'

// ✅ 올바른 방법 - 새 객체 생성
let user = { name: '김개발', age: 25 }
let updatedUser = { ...user, name: '이개발' }  // 스프레드로 복사

console.log(user.name)        // '김개발' (원본 유지!)
console.log(updatedUser.name) // '이개발'

🔥 React에서 불변성이 중요한 이유

React의 상태 비교 방식

// React 내부 동작 (단순화)
function useState(initialValue) {
  let state = initialValue
  
  function setState(newValue) {
    // 🔥 얕은 비교 (참조 비교)
    if (state === newValue) {
      return // 같으면 리렌더링 안함!
    }
    
    state = newValue
    reRender() // 다르면 리렌더링
  }
  
  return [state, setState]
}

불변성 위반시 발생하는 문제

// ❌ 문제가 있는 코드
function UserProfile() {
  const [user, setUser] = useState({
    name: '김개발',
    hobbies: ['코딩', '독서'],
    address: { city: '서울', district: '강남구' }
  })
  
  const addHobby = (newHobby) => {
    // ❌ 원본 배열 직접 수정!
    user.hobbies.push(newHobby)
    setUser(user) // React: "어? 같은 객체네? 리렌더링 안해!"
  }
  
  const updateCity = (newCity) => {
    // ❌ 원본 객체 직접 수정!
    user.address.city = newCity
    setUser(user) // React: "어? 같은 객체네? 리렌더링 안해!"
  }
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>취미: {user.hobbies.join(', ')}</p>  {/* 업데이트 안됨! */}
      <p>도시: {user.address.city}</p>        {/* 업데이트 안됨! */}
    </div>
  )
}

올바른 불변성 업데이트

// ✅ 올바른 코드
function UserProfile() {
  const [user, setUser] = useState({
    name: '김개발',
    hobbies: ['코딩', '독서'],
    address: { city: '서울', district: '강남구' }
  })
  
  const addHobby = (newHobby) => {
    // ✅ 새 배열 생성
    setUser({
      ...user,                          // 기존 객체 복사
      hobbies: [...user.hobbies, newHobby]  // 새 배열 생성
    })
  }
  
  const removeHobby = (hobbyToRemove) => {
    // ✅ 필터로 새 배열 생성
    setUser({
      ...user,
      hobbies: user.hobbies.filter(hobby => hobby !== hobbyToRemove)
    })
  }
  
  const updateHobby = (index, newHobby) => {
    // ✅ map으로 새 배열 생성
    setUser({
      ...user,
      hobbies: user.hobbies.map((hobby, i) => 
        i === index ? newHobby : hobby
      )
    })
  }
  
  const updateCity = (newCity) => {
    // ✅ 중첩 객체도 새로 생성
    setUser({
      ...user,                    // 최상위 복사
      address: {
        ...user.address,          // address 객체 복사
        city: newCity             // city만 업데이트
      }
    })
  }
  
  return (
    <div>
      <h2>{user.name}</h2>
      <div>
        <h3>취미 목록:</h3>
        {user.hobbies.map((hobby, index) => (
          <div key={index}>
            {hobby}
            <button onClick={() => removeHobby(hobby)}>삭제</button>
            <button onClick={() => updateHobby(index, hobby + '!')}>수정</button>
          </div>
        ))}
        <button onClick={() => addHobby('영화감상')}>취미 추가</button>
      </div>
      
      <div>
        <p>주소: {user.address.city}, {user.address.district}</p>
        <button onClick={() => updateCity('부산')}>도시 변경</button>
      </div>
    </div>
  )
}

🎯 Part 3: 동적 라우팅 실습

🔥 동적 라우팅이란?

URL의 일부를 변수로 사용하는 라우팅

정적 라우팅: /blog/react-tutorial
동적 라우팅: /blog/[slug]  → /blog/어떤값이든

📂 동적 라우팅 파일 구조

1️⃣ 기본 동적 라우팅

app/
├── blog/
│   ├── page.js          → '/blog'
│   └── [slug]/
│       └── page.js      → '/blog/react-tutorial'
│                        → '/blog/javascript-guide'  
│                        → '/blog/next-js-tips'

// app/blog/[slug]/page.js
export default function BlogPost({ params }) {
  const { slug } = params  // URL에서 slug 추출
  
  return (
    <div>
      <h1>블로그 포스트</h1>
      <p>현재 슬러그: {slug}</p>
    </div>
  )
}

// 방문 예시:
// /blog/react-tutorial → params = { slug: 'react-tutorial' }
// /blog/javascript-guide → params = { slug: 'javascript-guide' }

2️⃣ 중첩 동적 라우팅

app/
├── user/
│   └── [id]/
│       ├── page.js           → '/user/123'
│       ├── profile/
│       │   └── page.js       → '/user/123/profile'  
│       └── settings/
│           └── page.js       → '/user/123/settings'

// app/user/[id]/page.js
export default function UserPage({ params }) {
  const { id } = params
  
  return (
    <div>
      <h1>사용자 대시보드</h1>
      <p>사용자 ID: {id}</p>
    </div>
  )
}

// app/user/[id]/profile/page.js
export default function UserProfile({ params }) {
  const { id } = params
  
  return (
    <div>
      <h1>사용자 프로필</h1>
      <p>사용자 ID: {id}의 프로필 페이지입니다.</p>
    </div>
  )
}

3️⃣ 다중 동적 라우팅

app/
├── shop/
│   └── [category]/
│       └── [productId]/
│           └── page.js    → '/shop/electronics/laptop-123'
│                          → '/shop/clothing/shirt-456'

// app/shop/[category]/[productId]/page.js
export default function ProductPage({ params }) {
  const { category, productId } = params
  
  return (
    <div>
      <h1>상품 상세</h1>
      <p>카테고리: {category}</p>
      <p>상품 ID: {productId}</p>
    </div>
  )
}

// 방문 예시:
// /shop/electronics/laptop-123 → { category: 'electronics', productId: 'laptop-123' }

4️⃣ Catch-all 라우팅 (...)

app/
├── docs/
│   └── [...slug]/
│       └── page.js    → '/docs/a'
│                      → '/docs/a/b'  
│                      → '/docs/a/b/c'

// app/docs/[...slug]/page.js
export default function DocsPage({ params }) {
  const { slug } = params  // 배열로 들어옴!
  
  return (
    <div>
      <h1>문서 페이지</h1>
      <p>경로: {slug.join(' / ')}</p>
      <ul>
        {slug.map((segment, index) => (
          <li key={index}>Level {index + 1}: {segment}</li>
        ))}
      </ul>
    </div>
  )
}

// 방문 예시:
// /docs/getting-started → slug = ['getting-started']
// /docs/api/users/create → slug = ['api', 'users', 'create']

🎯 실무 적용 가이드

동적 라우팅 베스트 프랙티스

1️⃣ SEO 친화적 슬러그 만들기

// 한글 제목을 URL 친화적으로 변환
function createSlug(title) {
  return title
    .toLowerCase()
    .replace(/[^a-z0-9가-힣]/g, '-')  // 특수문자를 대시로
    .replace(/-+/g, '-')             // 연속 대시 제거
    .replace(/^-|-$/g, '')           // 앞뒤 대시 제거
}

// 예시:
// "Next.js 완전 정복!" → "next-js-완전-정복"

2️⃣ 타입 안전한 파라미터 처리

// TypeScript 사용시
interface PageProps {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export default function BlogPost({ params, searchParams }: PageProps) {
  // 파라미터 검증
  if (!params.slug || typeof params.slug !== 'string') {
    notFound() // Next.js 404 페이지로 리다이렉트
  }
  
  return <div>안전한 파라미터: {params.slug}</div>
}

3️⃣ 메타데이터 동적 생성

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.thumbnail]
    }
  }
}

💡 오늘의 핵심 정리

파일 기반 라우팅

파일 = URL 매핑으로 직관적
자동 코드 분할로 성능 최적화
중첩 레이아웃으로 유지보수성 향상

불변성 원칙

객체/배열은 항상 새로 생성
스프레드 연산자 적극 활용
React의 리렌더링 최적화 핵심

동적 라우팅 패턴

[param]: 단일 동적 세그먼트
[...slug]: 다중 세그먼트 (catch-all)
params 객체로 파라미터 접근

🔥 실무에서 정말 많이 쓰는 것들 (찐 경험담)
📈 실무 활용도 랭킹

🥇 1위: 불변성 업데이트 패턴 (99% 사용)

거의 매일 쓰는 필수 기술!
jsx// 🔥 실무에서 매일 보는 패턴들
const [user, setUser] = useState({...})

// 폼 업데이트
setUser({...user, name: newName})

// 배열에 아이템 추가
setItems([...items, newItem])

// 배열에서 삭제
setItems(items.filter(item => item.id !== deleteId))

왜 중요한가?

모든 React 프로젝트에서 상태 관리할 때 필수
안 알면 버그가 끊임없이 발생
성능 최적화의 기본

🥈 2위: 동적 라우팅 (80% 사용)

웬만한 프로젝트에는 다 들어감

jsx// 실제 프로젝트 예시들
/blog/[slug]           // 블로그, 뉴스 사이트
/user/[id]/profile     // 사용자 시스템
/product/[category]/[id] // 이커머스
/admin/[...slug]       // 관리자 페이지

실무 사례:

모든 상세 페이지 (제품, 게시글, 프로필)
RESTful API와 완벽 매칭
SEO 친화적 URL 구조

🥉 3위: 파일 기반 라우팅 (70% 사용)

Next.js 쓰면 자동으로 사용
실무 장점:

새 페이지 추가 = 파일만 생성
폴더 구조 = URL 구조
코드 리뷰할 때 구조 파악 쉬움

🎯 실무에서 이렇게 활용돼요
전자상거래 사이트 예시
📂 파일 구조 (실제 회사 구조와 비슷)

app/
├── page.js                    // 메인 페이지
├── products/
│   ├── page.js               // 상품 목록
│   ├── [category]/
│   │   ├── page.js           // 카테고리별 상품
│   │   └── [productId]/
│   │       └── page.js       // 상품 상세
├── user/
│   ├── [userId]/
│   │   ├── page.js           // 마이페이지
│   │   ├── orders/
│   │   │   └── page.js       // 주문 내역
│   │   └── wishlist/
│   │       └── page.js       // 찜 목록
└── admin/
    └── [...slug]/
        └── page.js            // 관리자 모든 페이지

🛒 쇼핑카트 상태 관리 (불변성)

jsx// 실무에서 매일 쓰는 패턴
function ShoppingCart() {
  const [cart, setCart] = useState([])
  
  // 상품 추가
  const addItem = (product) => {
    setCart(prev => {
      const existing = prev.find(item => item.id === product.id)
      if (existing) {
        return prev.map(item =>
          item.id === product.id 
            ? { ...item, quantity: item.quantity + 1 }
            : item
        )
      }
      return [...prev, { ...product, quantity: 1 }]
    })
  }
  
  // 수량 변경
  const updateQuantity = (id, quantity) => {
    setCart(prev =>
      prev.map(item =>
        item.id === id ? { ...item, quantity } : item
      )
    )
  }
  
  // 상품 삭제
  const removeItem = (id) => {
    setCart(prev => prev.filter(item => item.id !== id))
  }
}

💼 실무 프로젝트별 활용도

스타트업/스케일업 회사
jsx// 🔥 매우 자주 사용

동적 라우팅: /company/[companyId]/job/[jobId]
불변성: 복잡한 폼, 실시간 데이터
파일 라우팅: 빠른 프로토타이핑
대기업 서비스
jsx// 🔥 필수 기술로 간주
동적 라우팅: /service/[category]/[subcategory]
불변성: 대용량 데이터 처리
파일 라우팅: 마이크로서비스 구조
에이전시/외주
jsx// 🔥 클라이언트 요구사항 대부분
동적 라우팅: 다국어 /[locale]/product/[id]
불변성: CMS 연동, 실시간 업데이트
파일 라우팅: 빠른 개발, 유지보수

🚨 실무에서 자주 하는 실수들

불변성 실수 (신입개발자 90%가 경험)

jsx// ❌ 이런 버그 때문에 밤새는 경우 많음
const updateUser = () => {
  user.name = newName  // 화면이 안 바뀜!
  setUser(user)
}

// ✅ 이렇게 해야 함
const updateUser = () => {
  setUser({...user, name: newName})
}
동적 라우팅 실수
jsx// ❌ 이런 식으로 하드코딩
<Link href={`/product/electronics/123`}>

// ✅ 동적으로 처리
<Link href={`/product/${category}/${productId}`}>

🎯 면접에서도 자주 물어봄

면접관이 좋아하는 답변
면접관: "React에서 상태 업데이트할 때 주의할 점이 있나요?"

좋은 답변:
"불변성을 지켜야 합니다. 객체나 배열의 경우
스프레드 연산자나 map, filter 등을 사용해서
새로운 참조를 만들어야 React가 변화를 감지하고
리렌더링할 수 있습니다."

실무 경험 어필 포인트

"Next.js의 파일 기반 라우팅을 사용해서
SEO 친화적인 동적 라우팅 구조를 설계했고,
불변성 원칙을 지켜서 상태 관리 최적화를 경험했습니다."

💡 결론: 오늘 배운 것의 실무 가치
🔥 매일 쓰는 것들 (필수)

불변성 업데이트: 상태 관리하는 모든 곳
동적 라우팅: 상세 페이지 있는 모든 프로젝트
파일 기반 라우팅: Next.js 쓰는 모든 프로젝트

짱효

✨🌏확장해 나가는 프론트엔드 개발자입니다✏️

이전 포스트