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

Question

콘솔창에 아래와 같은 에러가 계속해서 발생하는데 혹시 그 원인을 알 수 있을까요 ? 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)

Gradler Kim · Answer

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. 오류 내용을 번역해 보면 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',

당근같은사람 · Answer

LandingPage.js 에서 MainMovieImage의 초기값이 null로 입력되지 않아서 발생되는 에러입니다. 저는 초기값으로 [] 빈배열을 줬을때 계속 발생하다가 null값으로 변경한 뒤 에러가 사라졌습니다. 정확한 원인은 모르지만 구글링 기억으로는 화면이 렌더링 되기 전후로 style값들이 적용되어서 그런것으로 알고 있습니다.