inflearn logo
강의

Course

Instructor

Learning React A-Z by Following Along [Version 19 반영]

Creating a Row component for listing movies.

GET https://image.tmdb.org/t/p/original/undefined 404에러

774

c2hila2526

1 asked

1

실행 자체는 잘 되고 이미지도 잘 불러와지는데 콘솔을 보면 GET https://image.tmdb.org/t/p/original/undefined 에러가 뜹니다. 한번씩 GET https://image.tmdb.org/t/p/original/null 도 같이 나오고요.

왜 발생하는지 모르겠어요. 무시해도 되는 걸까요?

Row.js입니다

import React, { useEffect, useState } from 'react'
import axios from "../api/axios";
import "./Row.css";

function Row({title, fetchUrl, id, isLargeRow}) {
  const [movies, setMovies] = useState([]);

  const fetchMovieData = async() => {
    const request = await axios.get(fetchUrl)
    setMovies(request.data.results);
  }


  useEffect(()=>{
    fetchMovieData();
  }, [])

  return (
    <section className="row">
      <h2>{title}</h2>
      <div className="slider">
        <div className="slider__arrow-left">
          <span className="arrow">{"<"}</span>
        </div>

        <div id={id} className="row__posters">
          {movies.map((movie)=>
            (
              <img
                key={movie.id}
                className={`row__poster ${isLargeRow && "row__posterLarge"}`}
                src={`https://image.tmdb.org/t/p/original/${
                  isLargeRow ? movie.poster_path : movie.backdrop_path
                } `}
                loading="lazy"
                alt = {movie.name}
              />
            ))}
        </div>

        <div className="slider__arrow-right">
          <span className="arrow">{">"}</span>
        </div>
      </div>
    </section>
  )
}

export default Row

 

redux typescript tdd react Next.js

Answer 2

2

imuchgabis3999

리액트의 실행순서에 의해 위와 같은 에러가 나오는 것입니다

1. 리액트는 렌더링되는 부분이 먼저 실행됩니다

movies state에 언제 값이 들어갈까요?

useEffect에서 fetchMovieData()를 실행할때겠죠?

하지만 리액트는 렌더링을 먼저 하기에 렌더링을 할때에는 movie안에는 아무 값도 없습니다 그래서 null이 나오는 것입니다

렌더를 다하고 useEffect()가 실행이 되어 movie가 set이 되어 다시 한번더 렌더를 하면 이때 결과물이 제대로 나옵니다

 

추가로 저도 위와 비슷한 질문을 했었는데 john 티처께서 자세하게 답 달아주셨습니다

https://www.inflearn.com/questions/598845

0

c2hila2526

감사합니다 이해했어요

방어코드에 대해 생각해봐야겠네요

0

Chetan Thakur

Got same issue any defence code

 

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

0

70

1

런타임 에러 ㅠㅠ

0

84

1

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

0

100

1

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

0

111

1

리액트 라우터 관련

0

101

1

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

0

103

1

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

0

806

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

193

1

오류가 안보여요

0

193

1

CSS

0

217

1

local storage

0

208

1

list컴포넌트 생성하기

0

223

1

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

0

331

1

Banner.css에 대해서

0

444

1

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

0

320

1

마이너스버튼 테스트

0

279

2

리액트 서버 실행 오류

0

1156

2

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

0

298

1

creactStore질문이요

1

284

2