javascript - ... (스프레드) 연산자와 _ (언더스코어)변수

import React, {useState} from 'react';
import "./Pagination.css"

function Pagination({buttonRange, totalCount, setPage}) {

    const [selectedPage, setSelectedPage] = useState(1);

    const handleClick = (pageNum) => {
        setPage(pageNum);
        setSelectedPage(pageNum);
    }
    return (
        <div className="pagination-container">
            {/* 이전페이지 버튼 */}
            {buttonRange[0] > 1 && (<button className="pagination-button" onClick={() => setPage(buttonRange[0] - 1)}>Previous</button>)}

            {/* 숫자버튼 생성 */}
            { [...Array(buttonRange[1] - buttonRange[0] + 1)].map( (_, i) => (
                buttonRange[0] + i <= Math.ceil(totalCount / 10) &&
                (<button
                    key={i}
                    className={`pagination-button ${buttonRange[0] + i === selectedPage ? 'selected' : ''}`}
                    onClick={() => handleClick(buttonRange[0] + i)}
                >
                    {buttonRange[0] + i}
                </button>)
            ) ) }

            {/* 다음페이지 버튼 */}
            {Math.ceil(totalCount / 10) > buttonRange[1] &&
                (<button className="pagination-button" onClick={() => setPage(buttonRange[1] + 1)}>Next</button>)}
        </div>
    );
}

export default Pagination;

 

위 코드는 리액트에서 Paging 처리를 위해서 작성된 Component이다.

 

페이징에 사용되는 숫자버튼들을 만들어 주는 코드를 보면

[...Array(buttonRange[1] - buttonRange[0] + 1)]

이러한 표현이 보이는데 이때   ...  이라는 연산자가 사용되는 것을 볼 수 있다.

 

 처음 보면 이게뭐지하고 혼란스러울 수 있는데 이는 spread 연산자로 배열일 경우엔 [] 를 생략할 수 있고

객체인경우에는 {}를 생략하여 표현할 수 있으며  문자열 변수에 붙이면 배열로 반환시켜주고 각 배열과 객체의 깊은 복사를 할 수 있는 등 다양하게 활용할 수 있는 연산자이다.

 

(예시 1)

var arr = ['a', 'b'];
console.log(...arr);

(예시 2)

var text = 'abcd';
console.log(...text); // 'a', 'b', 'c', 'd' 가 출력됨

(예시 3)

[a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(a1); // 1
console.log(a2); // 2
console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9]

 

다시 돌아와서

[...Array(buttonRange[1] - buttonRange[0] + 1)]

위 코드를 보면 [...Array(5) ] 이런 표현식으로 사용한건데 Array(5)이 실행되면

길이가 5이고 모든 요소가 undefined인 배열이 생성된다.

 

그리고 나서 그것을 ... 으로 스프레딩 해주어  'undefiend, undefined' 이런식으로 5개가 분할되는 것이고

그 분할된 것을 다시 [] 감싸서 표현함으로써 [undeifne, undefined, undefined, undefined, undefined ] 라는 배열을

생성한 것이다.

 

다음 map함수를 살펴보자

[...Array(buttonRange[1] - buttonRange[0] + 1)].map( (_, i)=>(코드생략))}

_ 변수를 볼 수 있을 텐데

 

 map 함수를 사용할 때 (value, index) => {} 형태로 사용하게 되면, value는 현재 처리 중인 요소의 값이고, index는 그 요소의 인덱스를 의미한다.

 

그런데 이전에 생성한 배열의 모든원소가 undefined이고 사실상 의미가 없어서 사용하지 않는 값이다.

 

따라서 value는 사용하지않고 index만 사용하기 때문에 _ 언더스코어(_)가 사용되면 이 값이 실제로는 무시되거나 사용되지 않음을 명확하게 표현하는 관습이다.