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

원아영님의 프로필 이미지
원아영

작성한 질문수

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

무비앱 시리즈 #9 Favorite 버튼 만들기 (1) ( 따라하며 배우는 리액트 노드 )

안녕하세요 선생님

작성

·

479

0

안녕하세요 선생님! 강의 잘 듣고 있습니다.

다름아니라 제가 강의들으면서 따라 만들고 있는데요.

movien detail 페이지에서 웹은 정상적으로 잘 작동하나 콘솔창에

아래와 같은 2종류의 에러가 총 35개가 뜨는데 구글에

검색하면서 나오는 해결 방법으로 이리저리 해봤는데

잘 안되서 질문 드립니다. 어떻게 해야할까요?

---------------1번 종류

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at MovieInfo.js:8.

    in MovieInfo (at MovieDetail.js:50)

    in div (at MovieDetail.js:46)

    in div (at MovieDetail.js:40)

    in MovieDetail (created by Context.Consumer)

    in withRouter(MovieDetail) (at auth.js:38)

    in AuthenticationCheck (created by Context.Consumer)

    in Route (at App.js:25)

    in Switch (at App.js:21)

    in div (at App.js:20)

    in Suspense (at App.js:18)

    in App (at src/index.js:29)

    in Router (created by BrowserRouter)

    in BrowserRouter (at src/index.js:28)

    in Provider (at src/index.js:21)

-------------------2번 종류

Warning: Updating a style property during rerender (background) when a conflicting property is set (backgroundPosition) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.

    in div (at MainImage.js:5)

    in MainImage (at MovieDetail.js:41)

    in div (at MovieDetail.js:40)

    in MovieDetail (created by Context.Consumer)

    in withRouter(MovieDetail) (at auth.js:38)

    in AuthenticationCheck (created by Context.Consumer)

    in Route (at App.js:25)

    in Switch (at App.js:21)

    in div (at App.js:20)

    in Suspense (at App.js:18)

    in App (at src/index.js:29)

    in Router (created by BrowserRouter)

    in BrowserRouter (at src/index.js:28)

    in Provider (at src/index.js:21)

혹시나 해서 제 깃허브 주소 첨부드립니다.

https://github.com/AyoungWon/movie-site

답변 부탁드릴게요 감사합니다.

---------------------

질문 올린뒤 계속 검색하다가 dependency 업데이트 하라는 말이 있어서

전부 최신 버전으로 업데이트 했더니 에러는 계속 나고 비슷한 warning이긴 한데

1번 종류 에러가 아래처럼 바뀌었습니다.

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at MovieInfo.js:8.

2번 종류 에러도 여전히 있구요.. 웹은 일단 잘 돌아가는데 왜일까요 ㅠㅠㅠㅠ

답변 2

1

-------------------2번 종류

Warning: Updating a style property during rerender (background) when a conflicting property is set (backgroundPosition) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.

이 에러는 리렌더링 될때 값이 없어도 css 속성이 렌더링 되버려서 생기는 부분이에요

그래서 강사님께서 앞에 {MainMovieImage && 로 감싸주셨고 이렇게 했는데도 같은 에러가 발생하면

useState 초기화할때 useState(null) 이렇게 쓰면 해결되요

0

useState(null)  하고  {MainMovieImage && 했는데도 error 뜨네요

 

Warning: Updating a style property during rerender (background) when a conflicting property is set (backgroundSize) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.

    at div

    at MainImage (http://localhost:3000/static/js/bundle.js:781:18)

    at div

    at LandingPage (http://localhost:3000/static/js/bundle.js:615:78)

    at AuthenticationCheck (http://localhost:3000/static/js/bundle.js:2173:81)

    at Routes (http://localhost:3000/static/js/bundle.js:92612:5)

    at div

    at Suspense

    at App

    at Router (http://localhost:3000/static/js/bundle.js:92545:15)

    at BrowserRouter (http://localhost:3000/static/js/bundle.js:92025:5)

    at Provider (http://localhost:3000/static/js/bundle.js:89209:20)

// MovieDetail.js 
Movie state가 null로 초기화 되었는지 확인해보세요^^

const [Movie, setMovie] = useState(null);

또한 return 할 때
{Movie && <MainImage />}
단축평가로 useEffect가 실행되어 Movie 상태가 저장 됐을때 실행되도록 하세요 :)

원아영님의 프로필 이미지
원아영

작성한 질문수

질문하기