Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
안녕하세요, 질문이 있습니다.
Viết
·
871
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)
Câu trả lời 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',4
LandingPage.js 에서 MainMovieImage의 초기값이 null로 입력되지 않아서 발생되는 에러입니다.
저는 초기값으로 [] 빈배열을 줬을때 계속 발생하다가 null값으로 변경한 뒤 에러가 사라졌습니다.
정확한 원인은 모르지만 구글링 기억으로는 화면이 렌더링 되기 전후로 style값들이 적용되어서 그런것으로 알고 있습니다.