inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 리액트 A-Z[19버전 반영]

영화 나열을 위한 Row 컴포넌트 생성하기

banner가 여러 번 실행됩니다

304

작성자 없음

작성한 질문수 0

0

https://github.com/kkyu0718/react-study/tree/main/react-netflix-clone

코드는 위에 있습니다.

  1. 일단은 app.js 가 한번 렌더링되면서 banner도 한번 렌더링 되어야하는데 이렇게 8번이 실행됩니다.
  2. 1번 때문에 실행이 안되고 있는 걸수도 있는데 useEffect() 에서의 fetchData가 실행이 되고 있지않아

    Uncaught TypeError: Cannot read properties of undefined (reading 'results')

    가 발생하는거 같습니다.

코드를 다시 아무리봐도 문제는 없어보이는데 혹시 어떻게 해결해야될까요? 

 

 

tdd typescript react redux Next.js

답변 1

0

John Ahn

안녕하세요 

로그를 찍으실 때 함수 안에서 찍던지 아니면 useEffect 안에서 찍어주셔야 합니다 

안 그러면 state 하나하나 바뀔 때마다 로그가 찍히게 됩니다 ~

2번 같은 경우는 ${movie?.videos?.results[0].key} 이런식으로 바꿔주시면 results 가져올 때 movie 와 movie.videos가 있을 때만 가져오기 때문에 에러가 안나게 됩니다 ~

더 궁금한게 있으면 질문주세요 ~~

감사합니다 ㅎㅎ 


0

공부중

혹시 그림과 같이 한번 실행될때 두번이 실행되는 이유가 무엇인가요?? 무슨 state가 바껴서 request.data 2번 후 data 2번이 실행되는 건가요??

 

그리고 해결을 하고 싶은데..ㅠㅠ

 

이 에러도 같이 뜨네요..ㅠㅠ

0

성민석

안녕하세요~~ 우선 첫번째 두번이 실행이 된다고 하시는건 제가 어떤걸 말씀하시는건지 잘 몰라가지고..ㅠㅠ

 

두번째  올려주신

위의 에러는 저도 동일한 질문을 하였는데 저런 에러가 뜨는이유는 

리액트는 실행이 되면 렌더링을 먼저 하게됩니다 그렇게 되면 

movie?.backdrop_path

Banner.js 의 헤더태크에서 백그라운드 이미지 경로를 설정을 해주었는데 리액트가 렌더를 제일먼저 실행하기에  movie안에는 아무것도 없겠죠? 왜나하면 state를 설정할때 빈배열을 기본값을 줬잖아요?https://image.tmdb.org/t/p/original/${movie?.backdrop_path}

그러기에 original/의 뒤의 값이 없어서 undefined가 나오고 404에러가 나오는것입니다

그리고 제가 movie.backdrop_path가 아닌 movie?.backdrop_path로 쓴이유는 ?가 있으면

리액트가 렌더를 할때 저기 값이 없으면 렌더하지 않고 그다음 태그로 넘어가게 됩니다

이렇게 렌더가 다 되고 난후 useEffect()가 실행이 됩니다 그러면 fetchData()함수가 실행이 되고 그렇게 되면 setMovie()가 실행이 되어 state가 변경이 됩니다 

리액트는 state가 변경이 되면 자동으로? 렌더링이 됩니다

이제는 movie안에 값이 있으니까 그럼 리렌더링이 되고 이미지가 나오게 됩니다

 

0

공부중

안녕하세요. 답변 정말 감사합니다. 

답변 해주신 내용은 이해가 되는데.. 에러 해결이 안되었습니다 ㅠㅠ

0

성민석

어떤 에러 말씀하시는 건가요?

 

0

공부중

말씀해주신대로 옵셔널 체이닝(movie?.drop_path)을 넣어도 같은 404에러가 뜹니다. ㅠㅠ

 

 

강의 소스 코드 압축 풀기 오류

0

70

1

런타임 에러 ㅠㅠ

0

85

1

강의대로 따라갔는데 에러보다 api키로 들어간 넷플릭스? 그런게 렌더링 되지 않습니다 ㅠ

0

100

1

안녕하세요 개발과 상관없는 질문입니다만

0

111

1

리액트 라우터 관련

0

101

1

react-beatiful-dnd에서 문제가 발생합니다.

0

103

1

react19에서는 react-beautiful-dnd가 설치되지 않습니다.

0

808

1

useEffect로 사용을 해도 되나요?

0

198

1

넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.

0

195

1

react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다

0

279

2

리액트 dockderfile 작성 시 COPY 질문

0

145

1

next.js에서부터는 react query 필요없는지

0

320

1

기능

0

195

1

오류가 안보여요

0

193

1

CSS

0

217

1

local storage

0

208

1

list컴포넌트 생성하기

0

223

1

검색어 입력 후 초기화하는 방법 궁금합니다!

0

331

1

Banner.css에 대해서

0

445

1

플러그인이 추천을 안해줍니다

0

321

1

마이너스버튼 테스트

0

279

2

리액트 서버 실행 오류

0

1156

2

오류메세지는 확인했는데 어떻게 고쳐야 할지 모르겠습니다 ㅠ

0

298

1

creactStore질문이요

1

284

2