쉬운 NextJS 07: Template Component의 특징과 활용

Next.js Template Component의 특징과 활용

목차

1. 서론
2. 템플릿 컴포넌트의 핵심 특징
3. Layout vs Template
4. 활용 사례
5. 구현 예제
6. 결론

서론

Next.js에서 제공하는 Template 컴포넌트는 Layout 컴포넌트와는 다른 독특한 특징을 가지고 있습니다. 이 글에서는 Template 컴포넌트의 특징과 실제 활용 사례에 대해 자세히 알아보겠습니다.

템플릿 컴포넌트의 핵심 특징

템플릿 컴포넌트의 가장 큰 특징은 리렌더링이 발생한다는 점입니다. 이는 Layout 컴포넌트와의 가장 큰 차이점이기도 합니다.

리렌더링 프로세스

1. 새로운 인스턴스 생성
2. 상태(State) 리셋
3. 이펙트(Effects) 재실행

// app/templates/default.tsx
export default function Template({ children }: { children: React.ReactNode }) {
  // 페이지 전환 시마다 이 컴포넌트는 새로운 인스턴스로 생성됩니다
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 페이지 전환 시마다 실행됩니다
    console.log('Template mounted');
    return () => {
      console.log('Template unmounted');
    }
  }, []);

  return (
    <div className="template-wrapper">
      {children}
    </div>
  );
}

Layout vs Template

Layout 컴포넌트

• 상태 유지
• 리렌더링 없음
• 전역 UI에 적합

// app/layout.tsx
export default function Layout({ children }: { children: React.ReactNode }) {
  const [count, setCount] = useState(0);
  // 이 상태는 라우트가 변경되어도 유지됩니다

  return (
    <div className="layout">
      <header>
        <nav>{/* 네비게이션 */}</nav>
      </header>
      {children}
    </div>
  );
}

Template 컴포넌트

• 상태 리셋
• 페이지 전환 시 리렌더링
• 동적 UI에 적합

활용 사례

1. 페이지 초기화 로직

// app/templates/with-initialization.tsx
export default function Template({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    // 페이지 전환마다 실행되는 초기화 로직
    const initializePage = async () => {
      await fetchInitialData();
      setupPageState();
    };

    initializePage();
  }, []);

  return <div className="initialized-page">{children}</div>;
}

2. 동적 메타데이터

// app/templates/with-dynamic-meta.tsx
import { Metadata } from 'next';

export async function generateMetadata(): Promise<Metadata> {
  // 동적으로 메타데이터 생성
  const metadata = await fetchDynamicMetadata();

  return {
    title: metadata.title,
    description: metadata.description
  };
}

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>;
}

3. 페이지 전환 애니메이션

// app/templates/with-transition.tsx
import { motion } from 'framer-motion';

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, x: 20 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -20 }}
      transition={{ duration: 0.3 }}
    >
      {children}
    </motion.div>
  );
}

구현 예제: 네이티브 앱 스타일 페이지 전환

// app/templates/native-like.tsx
'use client';

import { motion } from 'framer-motion';
import { useRouter } from 'next/navigation';

export default function NativeTransitionTemplate({
  children
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();

  return (
    <motion.div
      initial={{ transform: 'translateX(100%)' }}
      animate={{ transform: 'translateX(0%)' }}
      exit={{ transform: 'translateX(-100%)' }}
      transition={{ type: 'spring', stiffness: 300, damping: 30 }}
    >
      <div className="page-container">
        {children}
      </div>
    </motion.div>
  );
}

결론

Template 컴포넌트는 리렌더링이 필요한 상황에서 강력한 도구가 됩니다. 특히:

• 페이지 초기화 로직이 필요할 때
• 동적 메타데이터가 필요할 때
• 페이지 전환 애니메이션을 구현할 때

이러한 특징을 잘 활용하면 더 동적이고 인터랙티브한 웹 애플리케이션을 구축할 수 있습니다.

참고 문헌

1. Next.js 공식 문서 - Templates
2. React 공식 문서 - Components and Props
3. Next.js GitHub Repository
4. Vercel Engineering Blog
5. React Fiber Architecture Documentation