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

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

작성

240

8분 47초 까지 따라했는데, 오류가 뜹니다.

import React, { useEffect } from 'react'
import axios from '../api/axios'

export default function Row({ isLargeLow, title, id, fetchUrl }) {
    useEffect (() => {
        fetchMovieData();
    }, []);

    const fetchMovieData = async () => {
        const request = await axios.get(fetchUrl);
        console.log('request', request);
    };

  return (
    <div>
        
    </div>
  )
}

터미널에서는 아래와 같은 오류가 뜨고,

WARNING in ./src/components/Banner.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/components/Banner.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning

(75:5) autoprefixer: start value has mixed support, consider using flex-start instead

WARNING in [eslint] 
src/components/Row.js
  Line 7:8:  React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

webpack compiled with 2 warnings

아래는 크롬에서 뜨는 오류입니다.

Uncaught runtime errors:
×
ERROR
Cannot read properties of undefined (reading 'fetchNetflixOriginals')
TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals')
    at App (http://localhost:3000/static/js/bundle.js:46:61)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:25280:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10290:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10334:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10391:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:30265:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9)
ERROR
Cannot read properties of undefined (reading 'fetchNetflixOriginals')
TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals')
    at App (http://localhost:3000/static/js/bundle.js:46:61)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:25280:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10290:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10334:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10391:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:30265:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9)
ERROR
Cannot read properties of undefined (reading 'fetchNetflixOriginals')
TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals')
    at App (http://localhost:3000/static/js/bundle.js:46:61)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:25280:20)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:30243:18)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:29408:11)
    at recoverFromConcurrentError (http://localhost:3000/static/js/bundle.js:28900:24)
    at performConcurrentWorkOnRoot (http://localhost:3000/static/js/bundle.js:28812:26)

react redux tdd typescript next.js 소프트웨어-테스트

답변 2

John Ahn

지식공유자

안녕하세요.

아직도 안되시면 저장소 주소 올려주시면 제가 한번 봐보겠습니다.

현재 보여주신 소스 코드 이외에서 오타가 난 걸로 예상됩니다 ~

Pumpkin-man

질문자

안녕하세요.

https://github.com/pumpknman/netflix-clone

여기에 코드를 올려두었습니다. 감사합니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

제시된 코드와 오류 메시지를 바탕으로 상황을 분석해보겠습니다.

첫 번째 경고는 useEffect 훅 내부에서 사용된 fetchMovieData 함수를 의존성 배열에 추가하지 않아 발생하는 경고입니다. useEffect 내부에서 정의된 함수들은 의존성 배열에 포함되거나, 또는 함수를 외부에서 정의 및 의존성 배열 내부에서 참조해야 합니다. 의존성 배열은 훅이 리렌더링 될 때 해당 함수가 새로운 것인지 판단하는 데에 사용됩니다.

useEffect (() => {
    fetchMovieData();
// 겹따옴표 안쪽에 fetchMovieData를 추가
}, [fetchMovieData]);

두 번째 경고는 Banner.css 파일 내에서 start 값을 사용하는데 대해 autoprefixer가 경고를 나타내고 있습니다. flex-start를 사용하는 것을 고려하라는 내용입니다. 이는 start 값이 완전히 지원되지 않는 경우가 있기 때문입니다. CSS 파일을 확인하여 해당 부분을 수정하시면 될 것 같습니다.
마지막 오류는 ‘fetchNetflixOriginals’가 undefined 나타내며 이는 아마도 App 컴포넌트 또는 그 상위 컴포넌트에서 fetchNetflixOriginals을 정의하거나 전달하지 않아 발생하는 것으로 추측됩니다. fetchNetflixOriginals이 정의된 부분과 이를 Row 컴포넌트로 전달하는 부분을 살펴보셔야 할 것입니다. 아마도 fetchUrl props로 fetchNetflixOriginals 값을 전달하는 데에 문제가 있을 가능성이 있습니다.

위 내용을 바탕으로 코드를 검토하시고, 필요한 수정을 진행해 보시길 바랍니다. 추가적으로 문제가 해결되지 않는 경우, 직접적인 질문이나 코드 리뷰를 원하는 특정 부분을 구체적으로 문의하실 수 있습니다.

인프런 커뮤니티 질문&답변

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