안녕하세요, 질문이 있습니다.

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

무비앱 시리즈 #5 Grid Card Component ( 따라하며 배우는 리액트 노드 )

작성

723

콘솔창에 아래와 같은 에러가 계속해서 발생하는데 혹시 그 원인을 알 수 있을까요 ?

index.js:1 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:31)

in div (at MovieDetail.js:29)

in MovieDetail (at auth.js:38)

in AuthenticationCheck (created by Context.Consumer)

in Route (at App.js:24)

in Switch (at App.js:20)

in div (at App.js:19)

in Suspense (at App.js:17)

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)

mongodb nodejs 웹앱 express react

답변 2

Gradler Kim

오류 내용을 번역해 보면 background와 관련된 속성값들을 축약된 형태(shorthand)로 섞어 쓰지 말라는 의미입니다.

background: 
            `linear-gradient(to bottom, rgba(0,0,0,0)
            39%, rgba(0,0,0,0)
            41%, rgba(0,0,0,0.65)
            100%), url('${props.image}'), #1c1c1c`,
            backgroundSize: '100%, cover',
            backgroundPosition: 'center, center',

// 위와 같이 축약된 속성과 축약되지 않은 속성이 섞여서 작성된 속성들을 모두 축약되지 않은 형태로 분리시키면 오류가 발생하지 않습니다.
background: 
            `linear-gradient(to bottom, rgba(0,0,0,0)
            39%, rgba(0,0,0,0)
            41%, rgba(0,0,0,0.65)
            100%)`,
            backgroundColor: '#1c1c1c',
            backgroundImage: `url('${props.image}')`,
            backgroundSize: '100%, cover',
            backgroundPosition: 'center, center',

당근같은사람

LandingPage.js 에서 MainMovieImage의 초기값이 null로 입력되지 않아서 발생되는 에러입니다.

저는 초기값으로 [] 빈배열을 줬을때 계속 발생하다가 null값으로 변경한 뒤 에러가 사라졌습니다.

정확한 원인은 모르지만 구글링 기억으로는 화면이 렌더링 되기 전후로 style값들이 적용되어서 그런것으로 알고 있습니다.

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

안녕하세요, 질문이 있습니다.