자바스크립트 : 페이지네이션에 사용하는 Array.fill().map()

 const numPages = Math.ceil(total / limit);

 

 

Array(numPages)

            .fill()

            .map((_, i) => (

              <button className={classes.button}

                key={i + 1}

                onClick={() => setPage(i + 1)}

              >

                {i + 1}

              </button>

            ))

페이지네이션을 만들고있는데, 참고하는 자료 중에 이해가 어려웠던 구문.

fill() 함수는 배열의 요소를 어떠한 값으로 채울수 있는 함수로 알고있는데, argument 가 없으면 undefiend로 값이 들어가게 될것이고.. 그 다음 map 함수를 쓴다? 그럼 어떻게 작동하는거지..!

 

예를들어

console.log(Array(5).fill().map((v,i)=>i));

> Array [0, 1, 2, 3, 4]

이렇게 테스트를 해보면, 위와 같은 값이 나오는데

Array(5)  : 5개짜리 배열을 생성

Array(5).fill() :  [undefined,undefined,undefined,undefined,undefined] 이렇게 반환!

Array(5).fill() .map((v,i)=>i); 이렇게 map을 사용하면 v 로 각각의 요소를 받아 (undefiend) i 로 바꿔주는 것이다.

 

map 의 첫번째 인자는 배열의 요소, 그리고 두번째 인자는 각각의 인덱스이기 때문에

undefined로 정의된 배열 요소들이 모두 인덱스값으로 치환된다.

 

 

따라서 위의 코드를 다시 해석해보면,

 const numPages = Math.ceil(total / limit);    // 페이지네이션을 만들때는 총 데이터 갯수 / 한페이지에 보여질 데이터 수로                                                                          나누고 올림하여 필요한 페이지 수를 구함

Array(numPages) 로 만들고자 하는 페이지 길이만큼의 배열을 생성한 다음, fill()을 이용해 undefined로 만들어준다.

** 의문점 **'
Array(숫자) 해서 만든 배열은 자동으로 undefiend로 값이 들어가던데 왜 굳이 fill()을 다시 하는건지? 

아무튼, map을 이용해서 배열 형식으로 받아온 데이터를 가공해 동적으로 데이터 리스트를 만들어주는 방법은 자주 사용하기 때문에 익숙하니 패스

 

페이지네이션 버튼의 값은 { i+1} 으로 1부터 last page까지 생성이 될것이고

페이지 번호가 onClick 될때는 무명함수로 부터  setPage가 현재 페이지 +1 로 1씩 증가한다.

예를들어 1번 초기 페이지에서 3번 페이지를 클릭하면, setPage가 작동하면서  page의  state 값이 해당 페이지로 바뀐다.

 map으로 만든 <button> 들은 하나의 개체들이기 때문에 각각의 i값을 가지고 있기 때문이다.

 

그리고, Array()로 배열을 생성하는것과 new Array()로 생성하는것의 차이점이 궁금해서 찾아봤는데

 

자바스크립트에서 생성자는 사실, 하나의 함수와 다를바가 없다. 어떤 함수든 new 연산자와 함께라면 생성자로 사용할 수 있다. 그러나 내장객체의 경우, 특별히 new 연산자를 붙여서 쓰거나 붙이지 않고 쓰거나 두가지 모든 경우로 사용되는데 결과는 다르다. new 를 붙이면 인스턴스가 새로 생성된다. 

관례적으로, 생성자로 사용할 함수는 첫글자가 대문자로 되어있고, 따라서 첫글자가 대문자인 함수는 new를 붙여 실행해야한다! 공동의 약속. new를 붙이지 않고 호출해도 가능하지만, 객체형태로 접근하게 되면 에러가 발생한다.

 

페이지네이션 컴포넌트 내에 사용되는 Array는 그냥 배열을 반환할 뿐, Array 내부 요소에 접근할 일이 없기 때문에 이렇게 사용해도 무관한듯 하다.

 

 

참고)

new 연산자와 생성자 함수 (javascript.info)

new 연산자와 생성자 함수

React로 페이지네이션 UI 구현하기 | Engineering Blog by Dale Seo

React로 페이지네이션 UI 구현하기