[React] 페이지네이션 input 버전

input요소에 페이지숫자를 입력하는 페이징네이션
1.if-else문을 통해 범위 내의 페이지를 입력할 수 있도록 하는 handlePageChange함수 생성

const handlePageChange = (page) => {
    if (!isNaN(page) && page >= 1 && page <= pagingCount) {
      setPage(page);
    } else {
      alert("범위 내의 숫자를 입력하세요");
    }
  };

2. 각 버튼마다 handlePageChange 선언 & input에 숫자 입력 후 "Enter"키 누를 시 handlePageChange 작동할 수 있도록

	<ul>
        <li onClick={() => handlePageChange(1)}>⏪️</li>
        <li onClick={() => handlePageChange(page - 1)}>◀️</li>
        <li>
          <input
            className="pageInput"
            type="text"
            value={page}
            onChange={(e) => handlePageChange(e.target.value)}
          />
          /{pagingCount}
        </li>
        <li onClick={() => handlePageChange(page + 1)}>▶️</li>
        <li onClick={() => handlePageChange(pagingCount)}>⏩️</li>
     </ul>

🚨 문제발생!
value로 초기값을 설정했을 땐 새로운 값을 입력할 수 없었거나
onChange로 value값을 변경하면 실시간으로 변화를 인지하기 때문에 범위를 벗어난다고 인식하여 변경이 불가능한 상황 발생
=> deFaultValue를 활용해 초기값을 설정해주어 value값 변경 가능
로 하면 되는줄 알았으나.. 화살표 버튼으로 페이지를 옮길 때 page번호가 바뀌지 않는다....

1. value와 onChange를 쓰면 input이 빈값이 되면 내용도 같이 사라진다 + enter도 의미없음
2. defaultValue를 사용하면 페이지 이동은 정상적으로 움직이나 화살표 버튼을 눌렀을 시 page의 값은 바뀌나 value가 바뀌지 않는다.

아직.. 해결 못함....ㅠㅠ