개요

PageCachingPage는 React Context API를 활용한 페이지 간 상태 유지 시스템을 구현한 컴포넌트입니다. 사용자가 폼 데이터를 입력한 후 다른 페이지로 이동했다가 돌아와도 입력 내용이 유지되는 페이지 캐싱 기능을 시연하고 학습할 수 있는 교육용 페이지입니다.

주요 기능

1. React Context 기반 상태 유지

• 전역 상태 관리: FormProvider를 통한 앱 전체 상태 관리
• 페이지 간 상태 보존: 컴포넌트 언마운트 후에도 Context 상태 유지
• 실시간 동기화: 모든 페이지에서 동일한 상태에 접근 가능

2. 폼 데이터 관리

• 텍스트 입력: 대용량 텍스트 입력 지원 (textarea)
• 실시간 통계: 문자 수, 단어 수, 줄 수 실시간 계산
• 상태 표시: 현재 입력 상태와 Context 저장 내용 미리보기
• 초기화 기능: 원클릭으로 모든 입력 내용 초기화

3. 네비게이션 테스트

• 다중 페이지 링크: 4개 페이지로 이동 가능한 테스트 링크
• 뒤로가기 복원: 브라우저 뒤로가기 시 상태 복원 테스트
• 상태 지속성: 여러 페이지 이동 후에도 데이터 유지

기술적 구현

Context 활용

import { useForm } from '../contexts/FormContext';

export default function PageCachingPage() {
  const { content, setContent, clearContent, getContentLength } = useForm();

  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setContent(e.target.value);
  };

  // 통계 계산
  const wordCount = content.trim() ? content.trim().split(/\\s+/).length : 0;
  const lineCount = content.split('\\n').length;

  // 컴포넌트 렌더링...
}

FormContext 의존성