📌 React에서 페이지네이션과 유효성 검사 구현하기

📌 React에서 페이지네이션과 유효성 검사 구현하기

React 프로젝트에서 페이지네이션과 유효성 검사를 구현하는 방법을 정리해보겠습니다.
특히 FAQ 페이지의 페이지네이션과 비밀번호 유효성 검사를 예제로 다루겠습니다.

---

✅ 1. 페이지네이션(Pagination) 구현하기

페이지네이션은 많은 데이터를 여러 페이지로 나누어 표시하는 기능입니다.
React에서 useState와 Array.prototype.slice()를 활용하면 쉽게 구현할 수 있습니다.

🔹 구현 목표

• 한 번에 4개씩 FAQ를 보여줌
• "이전", "다음" 버튼 추가
• 첫 페이지에서는 "이전" 버튼 비활성화
• 마지막 페이지에서는 "다음" 버튼 비활성화

🔹 React 코드 예제

import React, { useEffect, useState } from 'react';
import instance from '../axiosConfig';

export const Faq = () => {
  const [faqs, setFaqs] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 4; // 한 페이지에 표시할 항목 수

  useEffect(() => {
    const fetchFaqs = async () => {
      try {
        const response = await instance.get('/faq/getAll');
        if (response.status === 200 && Array.isArray(response.data.data)) {
          setFaqs(response.data.data);
        }
      } catch (error) {
        console.error("FAQ 데이터를 가져오는 중 오류 발생: ", error);
      }
    };
    fetchFaqs();
  }, []);

  // 현재 페이지에 표시할 FAQ 데이터 계산
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentFaqs = faqs.slice(indexOfFirstItem, indexOfLastItem);

  return (
    <div>
      <h2>FAQ</h2>
      <div>
        {currentFaqs.map((faq, index) => (
          <div key={faq.id}>
            <h3>{indexOfFirstItem + index + 1}. {faq.question}</h3>
            <p>{faq.answer}</p>
          </div>
        ))}
      </div>

      {/* 페이지네이션 버튼 */}
      <div>
        <button 
          onClick={() => setCurrentPage(currentPage - 1)} 
          disabled={currentPage === 1}
        >
          이전
        </button>
        <span>{currentPage} / {Math.ceil(faqs.length / itemsPerPage)}</span>
        <button 
          onClick={() => setCurrentPage(currentPage + 1)} 
          disabled={indexOfLastItem >= faqs.length}
        >
          다음
        </button>
      </div>
    </div>
  );
};

export default Faq;

✅ 핵심 포인트

• useState를 사용하여 currentPage 상태를 관리
• slice()를 사용하여 현재 페이지의 데이터만 가져옴
• currentPage === 1일 때 "이전" 버튼 비활성화
• indexOfLastItem >= faqs.length일 때 "다음" 버튼 비활성화

---

✅ 2. 비밀번호 유효성 검사(Validation)

회원가입 또는 로그인 과정에서 비밀번호의 형식을 검증하는 것이 중요합니다.
이번 예제에서는 소문자 + 숫자 포함, 5~10자리 비밀번호를 입력하도록 유효성 검사를 적용해보겠습니다.

🔹 유효성 검사 조건

• 비밀번호는 5~10자리여야 함
• **소문자(a-z)**와 **숫자(0-9)**를 반드시 포함해야 함
• 비밀번호 확인(재입력)과 일치해야 버튼이 활성화됨

🔹 React 코드 예제

import React, { useState } from 'react';
import { useFeeStore } from '../../store';

function Password() {
  const { name, studentId, password, setPassword } = useFeeStore();
  const [confirmPassword, setConfirmPassword] = useState('');

  // 비밀번호 검증 (소문자 + 숫자 포함, 5~10자리)
  const isValidPassword = password.length >= 5 && password.length <= 10 && /[a-z]/.test(password) && /\d/.test(password);
  
  // 비밀번호 확인
  const isMatch = isValidPassword && password === confirmPassword;

  const handleSubmit = async () => {
    if (!isMatch) return;

    const payload = {
      name: name,
      userStudnetId: studentId,
      userPassword: password,
    };
    
    console.log(payload);
    alert('회원가입 완료');
  };

  return (
    <div>
      <h2>비밀번호 설정</h2>

      <div>
        <label htmlFor="password">비밀번호</label>
        <input 
          type="password" 
          id="password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />
      </div>

      <div>
        <label htmlFor="confirmPassword">비밀번호 확인</label>
        <input 
          type="password" 
          id="confirmPassword" 
          value={confirmPassword} 
          onChange={(e) => setConfirmPassword(e.target.value)} 
        />
      </div>

      <p>* 비밀번호는 소문자 + 숫자 포함 5~10자리여야 합니다.</p>

      <button 
        style={{ backgroundColor: isMatch ? 'black' : '#d3d3d3', cursor: isMatch ? 'pointer' : 'not-allowed' }}
        disabled={!isMatch}
        onClick={handleSubmit}
      >
        다음
      </button>
    </div>
  );
}

export default Password;

✅ 핵심 포인트

• 정규식(/[a-z]/ && /\d/)을 사용하여 소문자+숫자 포함 확인
• 비밀번호 길이가 5~10자리인지 체크
• 비밀번호와 비밀번호 확인이 일치하는지 확인
• 조건이 충족될 때만 버튼 활성화 (disabled={!isMatch} 적용)

---

🚀 마무리

이번 정리에서는 React에서 페이지네이션과 유효성 검사를 구현하는 방법을 배웠습니다.
✔️ 페이지네이션을 활용해 FAQ 목록을 4개씩 나누어 표시
✔️ 비밀번호 유효성 검사로 보안 강화

이제 실제 프로젝트에 적용해보세요! 🎯
질문이 있다면 댓글로 남겨주세요. 😊