inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

198

wisely_

작성한 질문수 5

0

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

웹앱 react nodejs mongodb express

답변 1

0

John Ahn

안녕하세요 !!! 

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])
 

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

0

wisely_

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

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

 

제가 아직 진도를 다 나가지 않아서, 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 사이트 들어가서 > 인기순 영화 있는 곳의 주소를 직접 확인하여 넣어주었습니다.  

 

//

 

항상 감사합니다! 

0

wisely_

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

해결하였습니다.

 

감사합니다 :) 

에러서 요렇게만 해보세요

0

244

1

antd Menu 질문

0

282

1

movieTitle

0

228

1

npm run dev 연결이 안됩니다ㅜㅜ

0

424

1

npm run dev 오류

0

871

1

403 forbidden error

0

1082

2

npm run dev 오류

0

710

1

모듈이 없다는데요

0

1285

1

npm run dev 실행시 오류

0

5403

1

504 Gateway Timeout Error

0

1461

1

컴파일 에러 관련 문의

0

510

1

npm run dev 오류

0

766

1

이미지가 안떠요...

0

376

2

npm run dev 실행하고 인증이 안되는거 같아요

0

540

1

cd client에서 npm install 오류

0

1429

1

npm run dev시 localhost가 자꾸 3000으로 연결됩니다

0

984

1

Netlify + AWS Elastic Beanstalk 를 이용한 배포

1

1801

1

[nodemon] app crashed - waiting for file changes before starting... Error occurred while proxying request localhost:3000/api/hello to http://localhost:5000/ 해결법

0

465

0

지금 듣기엔 안되는 강의일까요?

0

725

1

사진이 2개 2개씩 다른줄에 나와요 ㅠㅠ

0

443

1

비동기 처리가 영상과 다르게 됩니다..

0

249

0

#2강 npm install

0

783

4

LandingPage.js 내 useState(null) 이용하는 이유

0

227

0

client 부분에 App.js 와 Config.js 위치가 다른데 상관없는 것인가요?

0

386

1