[JS-ES6] 매개변수(rest), 전개 문법(spread)

function LandingPage() {

    // 2. 가지고 온 API를 state에 넣어보자
    const [Movies, setMovies] = useState([])
    // 3. MainImage를 만들어보자 
    const [MainMovieImage, setMainMovieImage] = useState(null)
    // loadMore 누를 때마다 페이지를 바꿔보자. 초기값은 (0페이지)
    const [CurrentPage, setCurrentPage] = useState(0)

    // 1. API를 가지고 와보자
    useEffect(() => {
        const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`
        fetchMovies(endpoint)

    }, [])

    // 정보 가지고 와주는 로직 같은거는 함수로 빼준 거
    const fetchMovies = (endpoint) => {
        fetch(endpoint)
            .then(response => response.json())
            //.then(response => console.log(response))
            // .then(response => console.log(response.results[0]))
            .then(response => {

                // array
                setMovies([...Movies, ...response.results])
                // 가지고 온 이미지들 중에서 첫 번째
                setMainMovieImage(response.results[0])
                // 페이지 정보 바꿔주기
                setCurrentPage(response.page)
            })
    }

 

상황

예를 들어 지금 loadMore 버튼 눌러서 2페이지라고 치면 fechMovies 함수 통해서 2페이지의 정보들로 가는거지 

-> 그런데 이전 1페이지의 이미지들은 사라지고 2페이지 (21-40개)의 이미지들로'만' setMovies가 되고 있는 상황

 

-> 이를 해결해주기 위해 ...Movies를 추가함. 

setMovies([...Movies, ...response.results])

---

저 ... 의 개념은

- 나머지 매개변수인지(rest) 전개 문법인지(spread) 2가지 경우가 있고 구별해주어야 함.

- 여기서는 spread 기능으로 사용됨 

 

나머지 매개변수(rest)

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Julius Caesar

  // 나머지 인수들은 배열 titles의 요소가 됨
  // titles = ["Consul", "Imperator"]
  alert( titles[0] ); // Consul
  alert( titles[1] ); // Imperator
  alert( titles.length ); // 2
}

showName("Julius", "Caesar", "Consul", "Imperator");

 

전개 문법(spread)

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(...arr1, ...arr2) ); // 8

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2];

alert(merged); // 0,3,5,1,2,8,9,15 (0, arr, 2, arr2 순서로 합쳐집니다.)

---

다시 코드 해석

setMovies([...Movies, ...response.results])

 

"전개 문법은 이터러블 객체 여러 개를 전달하는 것도 가능함" 

-> 즉 이전 페이지들의 ...Movies 이미지와, 새롭게 로딩되는 페이지의 ...response.results 이미지들을 다 Movies에 담겠다는 것

 

 

 

 

개념 출처 : https://ko.javascript.info/rest-parameters-spread