20.08.18 16:58 작성
·
718
0
콘솔창에 아래와 같은 에러가 계속해서 발생하는데 혹시 그 원인을 알 수 있을까요 ?
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)
답변 2
4
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',