• 카테고리

    질문 & 답변

  • 세부 분야

    풀스택

  • 해결 여부

    미해결

4-5강에서 destructuring (비구조화 할당)을 하는게 맞나요?

21.11.22 06:07 작성 조회수 96

0

안녕하세요.
GridCards가 나오지 않아서 헤매던 와중에, 아래와 같이 코드를 고쳐줬더니 이미지가 다 나오게 되었습니다. 혹시 제가 인강에서 놓친게 있나 싶어서 4강을 다시 봤는데도 이렇게 적지 않으셨더라구요. 저도 MainImage 띄울때까지만 해도 문제 없었구요.
 
아래와 같이 코드를 고치면 GridCards가 왜 나오는건지, 이렇게 하는게 맞는건지 알려주시면 감사드리겠습니다!
 
cf) json 형식으로 가지고 오니까 굳이 비구조화할당으로 key, value 값을 따로 설정해줘서 가지고 올 필요가 없을 것 같은데... 왜 아래와 같이 하니까 안나오던 이미지들이 나오는건지 모르겠습니다 ㅠ
 
            setMovies([...response.results])
 
 
course-thumbnail

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

답변 1

답변을 작성해보세요.

0

John Ahn님의 프로필

John Ahn

지식공유자

2021.11.23

안녕하세요 !!! 

const fetchMovies = (endpoint) => {
fetch(endpoint)
.then(response => response.json())
.then(response => {
console.log(response)
setMovies([...Movies, ...response.results])
setMainMovieImage(response.results[0])
setCurrentPage(response.page)
})
}

이렇게 되어있는 소스 코드에서 

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

이 부분을 

setMovies([ ...response.results])
 

이렇게 만드셨단 건가요 ?!!! 

wisely_님의 프로필

wisely_

질문자

2021.11.23

안녕하세요. 답변 감사드립니다! 

(혹시 아래 내용이 제가 충분히 설명하지 못한 걸수도 있을 것 같아 깃헙 주소도 같이 첨부드립니다. 

 

제가 아직 진도를 다 나가지 않아서, const fetchMovies 부분이 조금 다른데 GridCards 나오게 하는 제 코드는 아래와 같습니다. 

useEffect(() => {
        const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`
        fetch(endpoint)
        .then(response => response.json())
        //.then(response => console.log(response))
        // .then(response => console.log(response.results[0]))
        .then(response => {

            // array
            setMovies([...response.results])
            // 가지고 온 이미지들 중에서 첫 번째
            setMainMovieImage(response.results[0])

        })

  }, [])

여기서 강의와 다른 코드는 바로 아래 한 줄인데요. 4강을 다시 봐도 그냥 response.results로 적으셨던데 왜 제 코드에서는 destructuring을 해줘야 이미지들이 나오는지 궁금합니다.

            setMovies([...response.results])
 

- 그냥 response.results라고만 적으면 다음 화면이 나옵니다. 

ㅡㅡㅡㅡㅡ

 

더불어 한 가지 더 여쭈어보고 싶었던게 있는데, 

Config.js 에서 이미지 부분 API 주소를 아래와 같은 이유로 수정했는데 혹시 제가 잘못 집은 부분이 있는지도 봐주시면 감사드리겠습니다! (이미지가 나오긴 하나 API 주소가 사이트 정책?에 따라 바뀔 수도 있는건지... 의심스럽긴해서요.)

// 이미지 부분의 API도
// export const IMAGE_BASE_URL = 'http://image/tmdb.org/t/p'
export const IMAGE_BASE_URL = 'http://www.themoviedb.org/t/p/'

주석 처리해준 주소가 강의에서 나온 주소인데, 바꿔준 이유는 저 주소로 시작하는 이미지가 브라우저에서 뜨지 않길래, themovie 사이트 들어가서 > 인기순 영화 있는 곳의 주소를 직접 확인하여 넣어주었습니다.  

 

//

 

항상 감사합니다! 

wisely_님의 프로필

wisely_

질문자

2021.11.29

다음 강의 보니 ... spread로 되어있네요. 

해결하였습니다.

 

감사합니다 :) 

이 글과 비슷한 Q&A